Avatar billede rubaek Mester
28. maj 2008 - 22:09 Der er 2 kommentarer og
1 løsning

Ændring af et script fra nettet

Jeg har fundet dette script på nettet, men vil gerne have mulighed for at lave en undermenu, så der kommer evt. kommer en pil med de nye undermenuer. Kan det lade sig gøre?
__

<script type="text/javascript" language="JavaScript">
<!---
// Use Freely as long as following disclaimer is intact ::
//---------------------------------------------------------------
// Cross Browser Multi-Orientation Menu v1.5 17th August 2004
// This script written by Rik Comery. www.ricom.co.uk
// For support, visit the "Resources" section at www.ricom.co.uk       
// All rights reserved.
// Featured in the SimplytheBest DHTML Scripts Library at http://simplythebest.net/scripts/

//  MENU ITEMS //
// DUPLICATE THIS ENTIRE SECTION FOR MULTIPLE MENUS.  PLEASE SEE THE INSTRUCTIONS FILE FOR DETAILS ///
var Menu1 = new Array ()
var subMenu1 = new Array ()

  Menu1[0] = new Array("PlanMagic", "http://planmagic.com","_top", "left")
    subMenu1[0] = new Array()

  Menu1[1] = new Array("Business software", "http://planmagic.com/products.html","_top", "left")
    subMenu1[1] = new Array()
    subMenu1[1][0] = new Array ("Business plan", "http://planmagic.com/business_planning.html","_top")
    subMenu1[1][1] = new Array ("Marketing plan", "http://planmagic.com/marketing_planning.html","_top")
    subMenu1[1][2] = new Array ("Financial plan", "http://planmagic.com/financial_planning.html","_top")
    subMenu1[1][3] = new Array ("Hospitality industry", "#808080","#FFFF88")              //
    subMenu1[1][4] = new Array ("Restaurant plan", "http://plan-a-restaurant.com","_top")
    subMenu1[1][5] = new Array ("Bar business plan", "http://planmagic.com/business_plan/bar_business_plan.html","_top")
    subMenu1[1][6] = new Array ("Bed & Breakfast plan", "http://planmagic.com/business_plan/bed_&_breakfast_business_plan.html","_top")
    subMenu1[1][7] = new Array ("Hotel business plan", "http://planmagic.com/business_plan/hotel_business_plan.html","_top")
    subMenu1[1][8] = new Array ("Resort business plan", "http://planmagic.com/business_plan/hotel/resort_business_plan.html","_top")

  Menu1[2] = new Array("Downloads", "http://planmagic.com/download.html","_top", "left")
    subMenu1[2] = new Array()

  Menu1[3] = new Array("Order now!", "http://planmagic.com/register.html","_top", "left")
    subMenu1[3] = new Array()

  Menu1[4] = new Array("Contacts", "http://ricom.co.uk/contacts.php","_top", "right")
    subMenu1[4] = new Array()
    subMenu1[4][0] = new Array ("Company profile", "http://planmagic.com/company.html","_top")
    subMenu1[4][1] = new Array ("Customer service", "http://planmagic.com/contact.html","_top")
    subMenu1[4][2] = new Array ("Feedback form", "http://planmagic.com/feedback.html","_top")

  Menu1[5] = new Array("Business tookit", "http://planmagic.com/toolkit/toolkit.html","_top", "left")
    subMenu1[5] = new Array()

/// FORMAT MENU  ///
menuStyle = "flat"                                  // Menu Style (flat, 3d)
cellPadding = "3"                                  // Cell Padding
cellBorder = 1                                      // Border width (for no border, enter 0)  THIS VALUE APPLIES TO ALL MENUS
verticalOffset = "0"                                // Vertical offset of Sub Menu.
horizontalOffset = "0"                              // Horizontal offset of Sub Menu.
subMenuDelay = 2                                    // Time sub menu stays visible for (in seconds). THIS VALUE APPLIES TO ALL MENUS
subIndicate = 1                                    // Show if a sub menu is present (use 0 for "no")  THIS VALUE APPLIES TO ALL MENUS
indicator = "<img src='images/arrow-down.gif' border='0'>" // Symbol to show if a sub menu is present (subIndicate must be to set to 1)
                                                    // Use standard HTML <img> tag. You can use a character instead of an image.
                                                    // e.g.      indicator = ">"
// Main Menu Items
menuWidth = "0"                  // Width of menu item.  Use 0 for default
borderColor = "Black"            // Border Colour (flat mode only)
borderHighlight = "#97BBD3"      // Border Highlight Colour (3d mode only)
borderShadow = "#31556D"        // Border Shadow Colour (3d mode only)
menuBackground = "#2b83c4"      // Cell Background Colour
menuHoverBackground = "beige"    // Cell Background Colour on mouse rollover
fontFace = "arial"              // Font Face
fontColour = "#FFFFFF"          // Font Colour
fontHoverColour = "#2b83c4"      // Font Colour on mouse rollover
fontSize = "8pt"                // Font Size
fontDecoration = "none"          // Style of the link text (none, underline, overline, line-through)
fontWeight = "normal"            // Font Weight (normal, bold)

// Sub Menu Items
smenuWidth = "0"                // Width of sub menu item.  Use 0 for default
sborderColor = "Black"          // Border Colour (flat mode only)
sborderHighlight = "#E9E9E2"    // Border Highlight Colour (3d mode only)
sborderShadow = "#83837C"        // Border Shadow Colour (3d mode only)
smenuBackground = "beige"        // Cell Background Colour
smenuHoverBackground = "#2b83c4" // Cell Background Colour on mouse rolloverr
sfontFace = "arial"              // Font Face
sfontColour = "#2b83c4"          // Font Colour
sfontHoverColour = "#FFFFFF"    // Font Colour on mouse rollover
sfontSize = "8pt"                // Font Size
sfontDecoration = "none"        // Style of the link text (none, underline, overline, line-through)
sfontWeight = "normal"          // Font Weight (normal, bold)

quantity = 1
/// END FORMAT MENU  ////
Avatar billede emkay Nybegynder
30. maj 2008 - 10:36 #1
Det er ikke så smart at lave din navigation på denne måde, da søgemaskiner så ikke kan finde rundt på siden.
En smartere måde at gøre det på er at skrive din menu som nogle helt normale og "clean" unordered lists og så bagefter med noget CSS og javascript få dem til at opføre sig som du vil. Det er også nemmere at vedligeholde senere, hvis du adskiller indhold, udseende og opførsel istedet for at have det hele samlet.

Et hurtigt (utestet) eksempel:

<ul>
  <li><a href="">Business Plan</a></li>
  <li><a href="">Marketing Plan</a></li>
  <li><a href="">Financial Plan</a>
    <ul>
      <li><a href="">Submenupunkt1</a></li>
      <li><a href="">Submenupunkt2</a></li>
    </ul>
  </li>
  <li><a href="">Hospitality industry</a></li>


I din css sætter du så alle ul li ul til at være display:none; og med javascript binder du så en funktion til mouseover-eventen på hver ul li a.
Denne funktion skal så vise en evt underliggende ul på det rigtige sted osv, men det er en css-sag.
jQuery (jquery.com) gør det nemt at lave de omtalte bindinger til funktioner og gør det også meget nemmere at ændre css'en på de ting der nu skal ændres ved mouseover.
Avatar billede emkay Nybegynder
30. maj 2008 - 10:37 #2
Der mangler selvfølgelig lige et </ul> til slut i mit eksempel, men ideen er jo til at forstå alligevel :P
Avatar billede rubaek Mester
03. oktober 2008 - 22:24 #3
Lukker
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester