html - Søger god simpel CSS dropdown menu - Udvikleren.dk

Tags: css html

<< < 1 2 > >>

Bruger #13010 @ 19.09.11 21:44

Der er nogen der mener mine menu punkter på min hjemmeside gør det for uoverskueligt så vil prøve at lave dem om til drop down menuen hvor menuerne folder ud når man holder musen over.

Jeg forstiller mig det skal være lavet i HTML og CSS.

Kan i anbefale en god simpel CSS dropdown menu ?

17 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 3 karma

Sorter efter stemmer Sorter efter dato

Bruger #11386 @ 20.09.11 02:00

503

http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/

Bruger #16669 @ 19.09.11 22:46

Denne bruger jeg på www.fniis.dk :-)

http://javascript-array.com/scripts/simple_drop_down_menu/

Bruger #13010 @ 20.09.11 00:02

440

Vil gerne undgå at bruge javascript.

Bruger #16786 @ 20.09.11 07:38

Det bliver svært uden java

Bruger #1 @ 20.09.11 08:11

1.204

Det bliver svært uden java

Bestemt ikke, men muligvis mere besværligt uden JavaScript

Mvh.

Kasper (TSW)

TSW WebCoder | TSW SiteSync | FashionArena.net | SuperBazar | Jeans Udsalg

Bruger #15663 @ 20.09.11 09:33

415

Det kan sagtens lade sig gøre med HTML og CSS...
Det eneste er at det ikke er særlig pænt...

Mange gange laver man jo en menu javascript, og er js slået fra ja så falder man tilbage på den lidt mindre fine udgave hvor det hele klares med CSS og HTML

Bruger #13010 @ 21.09.11 18:01

440

[slettet]

Indlæg senest redigeret d. 15.11.2011 12:11 af Bruger #13010

Bruger #10114 @ 21.09.11 19:14

Prøv denne her:

HTML kode

 <nav>
     <ul>
         <li><a href="#">[link.1]</a></li>
         <li><a href="#">[link.2]</a>
             <ul>
                 <li><a href="#">[link.2.1]</a></li>
                 <li><a href="#">[link.2.2]</a></li>
                 <li><a href="#">[link.2.3]</a></li>
                 <li><a href="#">[link.2.4]</a></li>
                 <li><a href="#">[link.2.5]</a></li>
             </ul>
         </li>
         <li><a href="#">[link.3]</a>
             <ul>
                 <li><a href="#">[link.3.1]</a></li>
                 <li><a href="#">[link.3.2]</a></li>
                 <li><a href="#">[link.3.3]</a></li>
                 <li><a href="#">[link.3.4]</a></li>
                 <li><a href="#">[link.3.5]</a></li>
             </ul>
         </li>
         <li><a href="#">[link.4]</a></li>
         <li><a href="#">[link.5]</a></li>
     </ul>
 </nav>

CSS kode

 a:link  {
     text-decoration: none;
     color: #999999;
 }
 
 a:visited  {
     text-decoration: none;
     color: #999999;
 }
 
 a:hover  {
     text-decoration: underline;
     color: #7E0000;
 }
 
 a:active  {
     text-decoration: none;
     background: #2f2f2f;
     color: #7E0000;
 }
 
 nav {
     width: 100%;
     height: 40px;
     background-color: #111111;    
     border: solid 2px #000000;
 }
 
 nav ul {
     padding: 0;
     margin: 0 auto;
     list-style: none;
 }
 
 nav ul li {
     float: left;
     display: block;
     position: relative;
 }
 
 nav ul a {
     color: #999999;
     text-transform: uppercase;
     text-decoration: none;
     display: block;
     border: solid 1px transparent;
     padding: 10px;
     display: block;
 }
 
 nav li ul {
     display: none;
 }
 
 nav ul li a:hover {
     border: #333333 1px solid;
     background: #1f1f1f;
     color: #7E0000;
 }
 
 nav li:hover ul {
     border: #333333 1px solid;
     background: #1f1f1f;
     display: block;
     position: absolute;
     z-index: 1;
 }
 
 nav li:hover li {
     float: none;
     font-size: 11px;
 }
 
 nav li:hover a {
     background: #111111;
 }
 
 nav li:hover li a:hover {
     background: #1f1f1f;
     color: #7E0000;
 }

Jeg ved der er nogle fejl i koden, omkring farverne på linksene.. men menuen fungerer fint.. Det er også den første drop down menu jeg har lavet..

Bruger #13010 @ 22.09.11 12:03

440

Tak men grunden til jeg spurgte om i kendte en god menu var så jeg selv slap for at teste og fejlfinde så meget.

Ville være lidt rart hvis menuen fungerede godt i alle browsere sådan at jeg ikke får så mange problemer med den.

Problemet er jo at jeg ikke selv kan teste den i ældre browsere.
Og det vil jo være ærgeligt hvis folk så ikke kan bruge hjemmesiden fordi menuerne ikke virker.

Er der nogen der ved om såden nogen CSS :hover menuer virker på en touchskærm ?

Indlæg senest redigeret d. 22.09.2011 18:53 af Bruger #13010

Bruger #16191 @ 22.09.11 19:07

det er nok ikke den bedste løsning, men har du prøvet:

side med combobox (dropdown menu)

Kode

<html>
<head>
    <title>combobox</title>
</head>
<body>
    <form method="post" name="form" action="/search.php">
        <select name="selection">
            <option value="text1">text1</option>
            <option value="text2">text2</option>
            <option value="text3">text3</option>
            <option value="text4">text4</option>
        </select>
        <input type="submit" value="Find" name="submit">
    </form>
</body>
</html>

og så search.php

Kode

<html>
<head>
    <title>search</title>
    <?php if ($_POST['selection'] != "") echo "<meta http-equiv='refresh' content='0; url=" . $_POST['selection'] . ".html'>"; ?>
</head>
<body>
    <?php
    if ($_POST['selection'] != "") 
        echo "<h1>Redirecting...</h1>";
    else
        echo "I dont know <.<";
    ?>
</body>
</html>

<< < 1 2 > >>

Søger god simpel CSS dropdown menu

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler