Kjapp og trygg hosting for Wordpress

Vertical drop meny

A

Apjh

Medlem
Hei og god kveld.

Jeg sitter litt fast her og har lett og lett etter en guide som kan hjelpe meg med å lage en vertical drop menu. Jeg ser for meg underfaner som kommer når man klikker på hoved linken. Jeg får bare underfanene til å være der konstant og jeg vil gjerne at de skal dukke opp når man først trykker på hoved link

eks:

Home
Produkter
-Shampo (disse skal ikke syns før man har trykket på produkter )
-Balsam


Noe sier meg at jeg må lage dette med hjelp av JQuery, er det umulig uten?
 
adeneo

adeneo

Medlem
Nå vet ikke jeg om du snakker om en meny bygget av lister, slik som <ul>/<li> eller <dl>/<dt>, eller om du snakker om en enkel dropdown ved å bruke <form> elementet.

Ved å bruke lister er det ikke noe problem å style en meny slik at man får flere nivåer, det finnes noen eksempler her, her og her!

Ved å bruke ting som border-radius og css3 transfom og matrix kan man til og med legge på effekter som gjør det tilnærmet likt en meny som bruker jQuery.
Spørsmålet blir vel egentlig hvorfor i all verden man skulle ønske å gjøre det med css når det er så enkelt med javascript.
jQuery UI har forøvrig noen ferdige innebygde menyer som bare initialiseres og styles, du kan kanskje se litt på det, minnes å huske at det er noen tabs og trekkspill greier integrert, men kanskje ikke akkurat den typen du er ute etter, det er vel litt mer suckerfish det!
 
A

Apjh

Medlem
Hei, Den horizontale menyen har jeg allerede klart å lage, det var ikke noe problem for meg å lage. Men det jeg nå sliter med er å lage dropdown menu som er vertical langs siden.

Listen min ser slik ut.

Kode: 
<ul>
  <li><a href="#">Hjem</a></li>
  <li><a href="#">Om oss</a></li>
  <li><a href="#">Produkter</a>
   <ul>
    <li>a href="html.html">Shampo</a></li>
    <li>a href="css.html">Balsam</a></li>
   </ul>
  </li>
  <li><a href="kontakt.html">Kontakt</a></li>
</ul>

Resultatet:

Hjem
Om oss
Produkter
--Shampo
--Balsam
Kontakt

Problemet mitt er at jeg vil at shampo og balsam skal skjules inntil noen trykker på produkter deretter skal de komme fram.

og css koden ser slik ut.

Kode: 
#links ul {
	 margin:0px;
	 padding:0px;
	 list-style:none;
	 }
	 
#links ul li a {
	 display:block;
	 background:url(images/navbutton.jpg) no-repeat;
	 padding:3px 0px 3px 27px;
	 font-size:14px;
	 font-family:Arial, Helvetica, sans-serif;
	 font-weight:blod;
	 color:#1a446a;
	 text-decoration:none;
	}
	
#links ul li a:hover {
	 background:url(images/navbutton.jpg) no-repeat;
	 background-position:0px -20px;
	 font-size:14px;
	 font-family:Arial, Helvetica, sans-serif;
	 font-weight:blod;
	 color:#F90;
	 text-decoration:none;
	}
 
adeneo

adeneo

Medlem
HTML: 
<!DOCTYPE html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>meny greier</title> 
<style type="text/css"> 
#links ul, #links li {margin:0px; padding:0px; list-style:none;}
#links ul li a, #produkter a {
	 display:block;
         background:url(images/navbutton.jpg) no-repeat;
	 padding:3px 0px 3px 27px;
	 font-size:14px;
	 font-family:Arial, Helvetica, sans-serif;
	 font-weight:bold;
	 color:#1a446a;
	 text-decoration:none;
	}
#links ul li a:hover, #produkter a:hover {
         background:url(images/navbutton.jpg) no-repeat;
	 background-position:0px -20px;
	 color:#F90;
	}
.slide a {margin-left: 10px;}
</style> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){
    $(".slide").hide();    //gjem de to menyvalgene
    $("#produkter a").click(function () { //start funksjonen ved click på produkter
        $(".slide").slideToggle("slow");  //beveg opp og ned
        return false;
    });
});
</script> 
</head> 
<body> 
    <div id="links"> 
        <ul>
            <li><a href="#">Hjem</a></li>
            <li><a href="#">Om oss</a></li>
                <ul id="produkter"><a href="#">Produkter</a>
                    <li class="slide"><a href="html.html">Shampo</a></li>
                    <li class="slide"><a href="css.html">Balsam</a></li>
                </ul>
            </li>
            <li><a href="kontakt.html">Kontakt</a></li>
        </ul>
    </div> 
</body> 
</html>
 
A

Apjh

Medlem
Den funka fett, akkurat slik jeg tenke meg adeneo :) Hjertelig takk til deg, du har gjort dagen min litt lettere.
 
Du må logge inn eller registrere deg for å svare her.
Topp