Varför skapar jag menyn i css innan jag börjar med jquery?

När man skapar en hemsida ska man inte lägga till javascript fören man vet att allt fungerar utan javascript. För det finns personer som inte har javascript aktiverat. Så om man skapar en fungerande meny i html och css först vet man att den kommer att fungera för alla.

Nackdelar med drop-down med css

Den största nackdelen är att de som använder internet explorer 6 inte kommer att se undermenyerna på grund av att internet explorer 6 bara kan ha :hover på länkar. Men de kommer att kunna använda menyn när man lagt till javascript.

Grunden för menyn.

För att kunna bygga en drop-down behöver vi en lista i html. För att skapa en undermeny behöver vi bara lägga en ul tagg i en li tagg. Till exempel:

Så här ser min html kod ut:

• hem
  • arkiv
  • taggar
  • sublink
  • sublink
• Blogg
• Om mig
• Tutorials
  • HTML
  • CSS
  • Jquery
  • Php
  • annat
    • Wordpress
    • Joomla
    • drupal
    • photoshop
• länk
• länk
• länk

Jag har även två div element som du också kommer att behöva. Du ser dem högst upp och de är #access och .menu. Jag använder dem för att kunna bestämma bredd och annat i css.

Just nu ser det inte mycket ut för världen. Det är en vanlig lista bara. Så skapa ett css dokument så kan vi börja skriva css som gör att menyn ser ut och fungerar som den ska.

Först bestämmer vi bredd och bakgrundsfärg. Vi bestämmer även tecken storleken.

#access {
background: #000;
display: block;
float: left;
margin: 0 auto;
width: 940px;
}
#access,
div.menu {
font-size: 13px;
width: 928px;
}

Sen bestämmer vi att listorna inte ska någon list stil och att de inte ska någon margin.

#access ul{
list-style: none;
margin: 0;
}

Efter det säger vi att att list element ska flyta till vänster, vara relativt positionerade och ha en bredd på 100 pixlar. Anledningen till att vi vill att de ska flyta till vänster är att de hamnar på rad.

#access li {
float: left;
position: relative;
width:100px;
}

Om du kollar på menyn nu kan du se att vi är en bit på vägen:

Nu bestämmer vi hur länkarna ska se ut. Line-height används för att få större yta på länken. Man kan använda padding men line-height har en tendens att bli lite bättre.

#access a {
color: #aaa;
display: block;
line-height: 38px;
padding: 0 10px;
text-decoration: none;
}

Nu ska vi fixa till alla listor som är nästlade. Vi anger skuggor för att få en snyggare effekt. Vi döljer dem och positionerar dem. Z-index gör så att de hamnar högst upp.

#access ul ul {
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
display: none;
position: absolute;
top: 38px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
padding:0;
}

nu ser vi till att de listor som är nästlade hamnar rätt. #access ul ul ul är den tredje nivån. Left gör så att de hamnar vid sidan av och inte under den listan som är förälder.

#access ul ul li {
min-width: 180px;
}
#access ul ul ul {
left: 100%;
top: 0;
}

Sen fixar vi länkarna i andra nivån-

#access ul ul a {
background: #333;
line-height: 1em;
padding: 10px;
width: 160px;
height: auto;
}

Nu kommer vi till det som internet explorer får problem med, vi ska använda hover på li element. Vi väljer alla a element som finns under ett li element som man hovrar över.

#access li:hover > a,
#access ul ul :hover > a {
background: #999;
color: #fff;
}

Nu till den sista biten som bestämmer att när man hovrar över ett li element som har en child som är en annan lista så ska den visas:

#access ul li:hover > ul {
display: block;
}

Nu är menyn klar.

Kan man lägga till fler steg?

Ja det kan man men jag råder till att inte göra det. En tre stegs meny är användarvänligt men inte en fyra stegs. Det är bättre att organisera länkarna bättre.

Förbättra menyn med jquery.

Nu har vi en helt fungerande meny men den kan göras bättre med lite jquery magi. Så ladda ner jquery om du inte redan gjort det: http://jquery.com/. Länka in det genom att skriva det här i head taggen:

sen skapar du ett nytt js dokument och länkar in det på samma sätt.Det är i det dokumentet vi ska skriva all jquery.

Nya css klasser och bilder.

Vi ska lägga till lite klasser i css dokumentet som vi kommer att använda med jquery. Vi behöver en som stoppar att andra nivån öppnas vid hover och sen fyra klasser som vi kommer att använda till bilder:

/* klassen menuitem läggst till av jquery */
#access ul li.menuitem:hover > ul {
display: none;
}

span.opendown{
width:12px;
height:9px;
background: url(images/opendown.png) center center no-repeat;
display:inline-block;
margin-left:10px;
}
span.closeup{
width:12px;
height:9px;
background: url(images/closeup.png) center center no-repeat;
display:inline-block;
margin-left:10px;
}
span.openright{
width:9px;
height:12px;
background: url(images/openright.png) center center no-repeat;
display:inline-block;
margin-left:10px;
}
span.closeleft{
width:9px;
height:12px;
background: url(images/closeleft.png) center center no-repeat;
display:inline-block;
margin-left:10px;
}

bilden jag använder ser ut såhär:

Sen har jag roterat den så att den ligger i alla fyra vinklar.

Ladda scriptet när sidan när DOM är redo.

Som vanligt när man ska manipulera DOM måste man vänta på att hela dokumentet laddat klart. Därför anväder vi document ready function. All jquery vi skriver ska skrivas innan den funktionen:

$(function(){
//koden här
});

Nu vet vi att scriptet inte körs fören DOM är klart. Nu ska vi ge alla top länkar klassen menuitem så att submenyerna öppnas vid hover:

$(".menu > ul > li").addClass("menuitem");

Där väljer vi alla li som ligger direkt under ul som i sin tur ligger direkt under menu.

Nu ska vi lägga till bilden som visas när en submeny är stängd. Vi vill att bilderna bara ska visas om det finns en submeny. Därför använder vi "has()" som kollar om elementet har en child. Sen letar vi efter det första a elementet och lägger till en span med ett klass namn som vi lagt till i css.

$(".menu > ul > li.menuitem").has("ul").find("a:first").append('');

Nu ska vi fixa så att submenyn öppnas när man klickar på bilden. Jag använder toggle för att göra det så enkelt som möjligt. Om jag inte hade använt toggle hade jag fått använda två olika click event och kollat vilken klass span hade för att sedan andra klassen. Toggle gör det enkelt genom att man kan använda flera funktioner i toggle som körs varannan gång till exempel:

$("#knapp").toggle(function(){
gör något
},function(){
gör nått annat
});

Om man klickar på #knapp en gång kommer det första hända, den andra gången kommer nått annat hända. Klickar man igen kommer det första hända igen. Så här ser toggle ut för menyn:
Först väljer vi vad som man ska klicka på. I den första funktionen så har jag en hover funktion som ändrar css värde för ul. Om vi utelämnar den biten kommer det inte fungera på grund av #access ul li.menuitem:hover > ul {display: none;}. Listan skulle döljas igen på en gång. Sen letar vi på den ul som ska visas genom att använda this som är det element vi klickat på. Till sist ändrar vi klassen för span så att bilden ändras när man klickar på den. I andra funktionen döljer vi listan och andrar klassnamnet igen

//toggle funktion
$(".menu > ul > li > a span").toggle(function(){
//css fix
$(".menu > ul > li > ul").hover(function(){
$(this).css("display", "block")
})
//visar submenyn
$(this).parent().parent().find("ul:first").slideDown("fast");
//ändrar klass
$(this).removeClass("opendown").addClass("closeup");
},function(){
//döljer
$(this).parent().parent().find("ul:first").slideUp("fast");
//ändrar klass
$(this).removeClass("closeup").addClass("opendown");
});

Nu ska vi lägga till bilder för de element som har submenyer i andra nivån:

$(".menu > ul > li > ul > li").has("ul").find("a:first").append('');

Nu ska vi använda hover för att ändra bild. Förman ska inte behöva klicka för att få upp tredje nivån. Hover kan ha två funktioner, en som är nar man hovrar in över elementet det andra när man hovrar ut:

$(".menu > ul > li > ul > li").has("ul").hover(function(){
$(this).find("a:first span").removeClass("openright").addClass("closeleft");
},function(){
$(this).find("a:first span").removeClass("closeleft").addClass("openright");
});

Nu är menyn helt klar. Den funger med och utan javascript aktiverat. Om man dock har ie6 och javascript avaktiverat fungerar den inte.

Exprimentera med det här och visa upp dem här under.

Alla koder:

html:

• hem
  • arkiv
  • taggar
  • sublink
  • sublink
• Blogg
• Om mig
• Tutorials
  • HTML
  • CSS
  • Jquery
  • Php
  • annat
    • Wordpress
    • Joomla
    • drupal
    • photoshop
• länk
• länk
• länk

Css:

#access {
background: #000;
display: block;
float: left;
margin: 0 auto;
width: 940px;
}
#access,
div.menu {
font-size: 13px;
width: 928px;
}
#access ul{
list-style: none;
margin: 0;
}
#access li {
float: left;
position: relative;
width:100px;
}
#access a {
color: #aaa;
display: block;
line-height: 38px;
padding: 0 10px;
text-decoration: none;
}
#access ul ul {
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
display: none;
position: absolute;
top: 38px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
padding:0;
}
#access ul ul li {
min-width: 180px;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: #333;
line-height: 1em;
padding: 10px;
width: 160px;
height: auto;
}
#access li:hover > a,
#access ul ul :hover > a {
background: #999;
color: #fff;
}
#access ul li:hover > ul {
display: block;
}

#access ul li.menuitem:hover > ul {
display: none;
}

span.opendown{
width:12px;
height:9px;
background: url(images/opendown.png) center center no-repeat;
display:inline-block;
margin-left:10px;
}
span.closeup{
width:12px;
height:9px;
background: url(images/closeup.png) center center no-repeat;
display:inline-block;
margin-left:10px;
}
span.openright{
width:9px;
height:12px;
background: url(images/openright.png) center center no-repeat;
display:inline-block;
margin-left:10px;
}
span.closeleft{
width:9px;
height:12px;
background: url(images/closeleft.png) center center no-repeat;
display:inline-block;
margin-left:10px;
}

Jquery:

$(function(){
$(".menu > ul > li").addClass("menuitem");

$(".menu > ul > li.menuitem").has("ul").find("a:first").append('');

$(".menu > ul > li > a span").toggle(function(){
$(".menu > ul > li > ul").hover(function(){
$(this).css("display", "block")
})
$(this).parent().parent().find("ul:first").slideDown("fast");
$(this).removeClass("opendown").addClass("closeup");
},function(){
$(this).parent().parent().find("ul:first").slideUp("fast");
$(this).removeClass("closeup").addClass("opendown");
});
$(".menu > ul > li > ul > li").has("ul").find("a:first").append('');
$(".menu > ul > li > ul > li").has("ul").hover(function(){
$(this).find("a:first span").removeClass("openright").addClass("closeleft");
},function(){
$(this).find("a:first span").removeClass("closeleft").addClass("openright");
});
});