javascript - Drop down menu - Udvikleren.dk - Programmering, webdesign og grafik

Tags: javascript

<< < 1 2 > >>

Bruger #14015 @ 12.12.08 22:36

Heyson.

Jeg har et design, bygget op i tables.

|--------------|
| top banner |
|______________|
|___top menu___|
| m|content | m|
| e| | e|
| n| | n|
| u| | u|
|_1|________|_2|
|____Footer____|

Så der i top menu, har jeg så nogle punkter:

punkt 1 - punkt 2 - punkt 3 - punkt 4

så når man holder musen over f.eks punkt 2 så kommer der en drop down, (evt. også bygget op i tables).

Kan man det?

Indlæg senest redigeret d. 12.12.2008 22:36 af Bruger #14015

13 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 6 karma

Sorter efter stemmer Sorter efter dato

Bruger #10647 @ 12.12.08 22:55

233

Her er et hurtigt eksempel der viser hvordan man kan lave en css dropdown menu uden javascript og vha. list.

Tables er generalt en dårlig ide da de tager lang tid for søge maskiner at indexere og du har ikke ligeså let kontrol over dem som du har med div designs

Kode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css" />
        <style>
            .dd_menu li {
                width: 50px;/*Design Udseende*/
                float: left;
                background: red;/*Design Udseende*/
                border: 1px solid green; /*Design Udseende*/
            } .dd_menu ul {
                display: none;
            } .dd_menu li:hover ul {
                display: inline;
            }
        </style>
    </head>
    <body>
        <ul class="dd_menu">
            <li>
                1.0
            </li>
            <li>
                2.0
                <ul>
                    <li>
                        2.1
                    </li>
                    <li>
                        2.2
                    </li>
                    <li>
                        2.3.0
                    </li>
                    <li>
                        2.4.0
                    </li>
                </ul>
            </li>
            <li>
                3.0
            </li>
            <li>
                4.0
            </li>
            <li>
                5.0
            </li>
        </ul>
    </body>
</html>

Bruger #11596 @ 13.12.08 20:35

Den virker ikke i IE6 da man kun kan css-selectoren hover på A i IE6, så man skal have noget javascript

Bruger #14015 @ 12.12.08 23:59

Yes - det ser meget fornuftigt ud.

Det eneste problem er bare, at de så udvider mit design ved hover? Hvordan gør man sådan, så den bare flyder ?

Bruger #10647 @ 13.12.08 01:10

233

Kode

            .dd_menu li {
                width: 50px;/*Design Udseende*/
                float: left;
                background: red;/*Design Udseende*/
                position: relative;
                border: 1px solid green; /*Design Udseende*/
            } .dd_menu ul {
                display: none;
            } .dd_menu li:hover ul {
                display: inline;
            }

Prøv med det, jeg har sat alle li elementer til position: relative;

Bruger #14015 @ 13.12.08 10:17

- det hjælper ikke :/

Bruger #10647 @ 13.12.08 12:41

233

Så virker det:

Kode

.dd_menu > li {
            	height: 20px;
                width: 50px;/*Design Udseende*/
                float: left;
                background: red;/*Design Udseende*/
                border: 1px solid green; /*Design Udseende*/
            } 
			.dd_menu ul {
                display: none;
				position: relative;
				z-index: 1001;
            } 
			.dd_menu li:hover ul {
                display: inline;
            }
			.dd_menu ul li {
				height: 20px;
                width: 50px;/*Design Udseende*/
                background: red;/*Design Udseende*/
                border: 1px solid green; /*Design Udseende*/
			}

Nu skal udseendet dog ændres 2 steder.

Bruger #14015 @ 13.12.08 15:14

Ja nu virker det!
- det eneste problem er bare, at det ikke virker i INTERNET EXPLORER?..

Bruger #14015 @ 13.12.08 15:25

og forresten. Hvordan får man den til at være i CENTER? i stedet for at være ude i siden?

har prøvet med alt, men virker stadig ikke?

altså, så den er i midten af min topmenu og ikke i venstre side.

CSS kode

 .dd_menu li {
 height: 20px;
 width: 50px;
 list-style:none;
 float:left;
 } 
 
 .dd_menu ul {
 display: none;
 position: relative;
 z-index: 1001;
 text-align:center;
 } 
 
 .dd_menu li:hover ul {
 display: inline;
 }
 
 .dd_menu ul li {
 height: 20px;
 width: 100px;
 background: #F0F0F0;
 border: 1px solid #DCDCDC;
 }

Indlæg senest redigeret d. 13.12.2008 15:25 af Bruger #14015

Bruger #10647 @ 13.12.08 15:30

233

En lille opdatering, så virker det:

CSS kode

 <style>
             .dd_menu {
                 width: 500px; /***********SÆT BREDDEN PÅ DIN MENU HER*********/
                 margin: 0 auto 0 auto;
             }
             .dd_menu > li {
                 height: 20px;
                 width: 50px;/*Design Udseende*/
                 float: left;
                 background: red;/*Design Udseende*/
                 border: 1px solid green; /*Design Udseende*/
             } 
             .dd_menu ul {
                 display: none;
                 position: relative;
                 z-index: 1001;
                 left: 0;
             } 
             .dd_menu li:hover ul {
                 display: inline;
             }
             .dd_menu ul li {
                 height: 20px;
                 width: 50px;/*Design Udseende*/
                 background: red;/*Design Udseende*/
                 border: 1px solid green; /*Design Udseende*/
             }
         </style>

Indlæg senest redigeret d. 13.12.2008 15:30 af Bruger #10647

Bruger #14015 @ 13.12.08 16:01

hmm.. Nej desværre virker det stadig ikke :/..

Tag et kig på: http://sophiefs.dk/page.php?id=1&sprog=danish&code=danish&langid=default&dropdownmenu - se?

husk .php?dropdownmenu på linket (er tilføjet).

<< < 1 2 > >>

Drop down menu

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler