Vinnaren i pepparkakshustävlingen!
  1. Dator och IT
  2. Systemutveckling
  3. Webbutveckling och javascript

Horisontel meny rollovers

Svara
  • 1
  • 2
2009-03-14, 13:11
  #1
b0rka
Medlem
b0rkas avatar
Hej!

Har googlat en del, och sett några enligt mig dåligt förklarade artiklar om hur man gör en sån.
Är enklare om menyn ligger som en lista.

Jag har gjort en meny i PS som fungerar bra, fast jag vill att mina knappar jag har gjort så bli mycket ljusare när man håller muspekaren över dom. Därför har jag gjort andra knappar i PS som ska visas när man håller muspekarn över knappen.

Men hur får jag detta till att fungera?

Är hyffast grön inom webdesign, men har iafall lyckats snickra ihop ett par hemsidor i notepad++ och försöker hålla mig inom strict CSS.

Har givetvis sökt forumet, men hittar bara trådar om hur man gör sånt vertikalt.

Tacksam för hjälp!
Citera
2009-03-14, 14:21
  #2
rhdf
Medlem
du måste googlat dåligt
finns hur många artiklar som helst om hur man bygger horisontella menyer utifrån en lista kolla runt lite på http://www.alistapart.com tex

enkelt sagt så får man ta och be sina <li> att ligga bredvid varandra
sen lägger man bilden som bakgrund på en a-tagg och den alternativa bilden som bakgrund på a:hover
Citera
2009-03-14, 16:00
  #3
b0rka
Medlem
b0rkas avatar
Jo, så långt har jag kommit, men det är ju flera olika knappar.. Hur gör jag då?
Citera
2009-03-14, 16:08
  #4
Kausti
Medlem
Kaustis avatar
Citat:
Ursprungligen postat av b0rka
Jo, så långt har jag kommit, men det är ju flera olika knappar.. Hur gör jag då?

Kod:
#knapp1 {
//vanliga bakgrundsbilden på startknappen
}

#knapp1:hover {
//hover bakgrund på startsideknappen
}

#knapp2 {
//bakgrunden på kontaktsidan-knappen
}

#knapp2:hover {
//hoverbakgrund på kontaktknappen
} 

Och så vidare
Citera
2009-03-14, 16:29
  #5
rhdf
Medlem
vill man göra det ännu "porrigare" Så kan du använda dig av "CSS-sprites"
då gör du helt enkelt en bild där du har alla menyknapparna i normal-läge samt "hover" bilden, då behöver du bara hämta en bild för alla knapparna
lite enkelt:
[menyknapparna i normal-läge]
[menyknapparna i hover-läge]

och sen flyttar du runt i den bilden med css, dels en flytt för varje normalbild, dels ett hopp, säg 30px "ner" för hover

li a{background-image:url(dinfinamenybild.png)}
li a.first{background-position:0 0;}
li a.first:hover{background-position:0 -30px;}
__________________
Senast redigerad av rhdf 2009-03-14 kl. 16:42.
Citera
2009-03-14, 17:18
  #6
00010000
Medlem
00010000s avatar
Citat:
Ursprungligen postat av Kausti
Kod:
#knapp1 {
//vanliga bakgrundsbilden på startknappen
}

#knapp1:hover {
//hover bakgrund på startsideknappen
}

#knapp2 {
//bakgrunden på kontaktsidan-knappen
}

#knapp2:hover {
//hoverbakgrund på kontaktknappen
} 

Och så vidare
Vilket iofs inte stöds av IE6, 7 eller 8.
IE hanterar i princip bara :hover på a-elementet.

Det finns lösningar/work-arounds kring det problemet som t.ex. WhateverHover men jag skulle personligen rekommendera en lösning som inte kräver så kallade "fulhack".

Min personliga favorit är css sprites som nämns här ovan.

T.ex.
http://wellstyled.com/files/css-nopr.../example2.html
http://websitetips.com/articles/css/sprites/
http://www.fiftyfoureleven.com/weblo...s-optimization
http://alistapart.com/articles/sprites/
Citera
2009-03-14, 18:09
  #7
phunque
Medlem
phunques avatar
Citat:
Ursprungligen postat av 00010000
Vilket iofs inte stöds av IE6, 7 eller 8.
IE hanterar i princip bara :hover på a-elementet.

Det finns lösningar/work-arounds kring det problemet som t.ex. WhateverHover men jag skulle personligen rekommendera en lösning som inte kräver så kallade "fulhack".

Min personliga favorit är css sprites som nämns här ovan.

T.ex.
http://wellstyled.com/files/css-nopr.../example2.html
http://websitetips.com/articles/css/sprites/
http://www.fiftyfoureleven.com/weblo...s-optimization
http://alistapart.com/articles/sprites/
Som lök på laxen ger användandet av sprites även en annan positiv effekt, nämligen en reduktion av http-requests (givet att man bakar in alla bilder i en) som påverkar nedladdningstiden.
Citera
2009-03-14, 18:51
  #8
Kausti
Medlem
Kaustis avatar
Citat:
Ursprungligen postat av 00010000
Vilket iofs inte stöds av IE6, 7 eller 8.
IE hanterar i princip bara :hover på a-elementet.

Det funkar utmärkt för mig i IE7, Chrome och FF3:

Kod:
<style type="text/css">
#knapp1 {
display: block;
width: 200px; 
height: 100px;
background-image: url('http://bild.se/something.gif');
color: red;
}

#knapp1:hover {
color: green;
background-image: url('http://bild.se/hoverbild.gif');
}

</style>

<a href='#' id='knapp1'>asafssf</a> 
Citera
2009-03-14, 19:40
  #9
00010000
Medlem
00010000s avatar
Citat:
Ursprungligen postat av Kausti
Det funkar utmärkt för mig i IE7, Chrome och FF3:

Kod:
<style type="text/css">
#knapp1 {
display: block;
width: 200px; 
height: 100px;
background-image: url('http://bild.se/something.gif');
color: red;
}

#knapp1:hover {
color: green;
background-image: url('http://bild.se/hoverbild.gif');
}

</style>

<a href='#' id='knapp1'>asafssf</a> 
Ja det fungerar eftersom det är just ett a-element.
Det var detta element jag skrev att IE stödjer :hover på.
Citera
2009-03-15, 13:02
  #10
b0rka
Medlem
b0rkas avatar
Okej, läste igenom artikeln, och försökte lösa det, men får det inte att fungera. Det blir bara en bakgrundsbild, inget mer. Inga länkar eller något.

Är som sagt, rätt novis, men försöker lära mig.
Finns förmodligen 100 fel, så skratta inte ut mig för mycket, men jag bifogar koden jag har skrivit, hoppas ni kan hjälpa mig lite.

CSS:

Citat:
#menu li {
list-style: none;
}

#menu li, #menu a {
display: block;
}

#home {left: 0; width: 176px;}
#service {left: 177px; width: 172px;}
#sails {left: 350px; width: 172px;}
#about {left: 524px; width: 172px;}
#contact {left: 697px; width: 172px;}



#home a:hover {background: transparent url(img/Home_Buttom.gif) 0 47px no-repeat;}
#service a:hover {background: transparent url(img/test.gif) -177 -47px no-repeat;}
#sails a:hover {background: transparent url(img/test.gif) -350 -47px no-repeat;}
#about a:hover {background: transparent url(img/test.gif) -524 -47px no-repeat;}
#contact a:hover {background: transparent url(img/test.gif) -697 -47px no-repeat;}


Och här kommer HTML:

Citat:
<ul id="menu">

<li id="home"><a href="#1"></a></li>
<li id="service"><a href="#2"></a></li>
<li id="sails"><a href="#3"></a></li>
<li id="about"><a href="#4"></a></li>
<li id="contact"><a href="#4"></a></li>
</ul>


Menyn ska vara horisontel, så antar att det ska vara display: inline istället för block?

Tack för all hjälp!
Citera
2009-03-15, 13:52
  #11
rhdf
Medlem
för att få menyn horisontell så sätter du float:left på
HTML-kod: 
#menu li{
float:left}
sen måste du ange storlek på dina a-taggar, jag antar att de är lika stora

HTML-kod: 
#menu a{
height:47px;
width:172px;
}

sen är det vettigt att ha en text i länken med så att de funkar utan css
HTML-kod: 
#menu a span{display:none;}

<li id="home"><a href="#1"><span>Home</span></a></li>
Citera
2009-03-15, 14:29
  #12
b0rka
Medlem
b0rkas avatar
Får fortfarande inga klickbara länkar.

Bara bakgrundsbilden som är i #menu visas

Såhär ser min CSS ut

Citat:
#menu {
width: 860px;
height: 47px;
margin: 0px;
padding: 0px;
list-style-type: none;
background: url(img/test.gif)
}

#menu li {
list-style: none;
display: block;
float: left;
}

#menu a {width: 172px; height: 47px; }

#home {left: 0; width: 176px;}
#service {left: 177px; width: 172px;}
#sails {left: 350px; width: 172px;}
#about {left: 524px; width: 172px;}
#contact {left: 697px; width: 172px;}



#home a:hover {background: transparent url(img/Home_Buttom.gif) 0 47px no-repeat;}
#service a:hover {background: transparent url(img/test.gif) -177 -47px no-repeat;}
#sails a:hover {background: transparent url(img/test.gif) -350 -47px no-repeat;}
#about a:hover {background: transparent url(img/test.gif) -524 -47px no-repeat;}
#contact a:hover {background: transparent url(img/test.gif) -697 -47px no-repeat;}

Här HTML koden

Citat:
<ul id="menu">

<li id="home"><a href="#1"></a></li>
<li id="service"><a href="#2"></a></li>
<li id="sails"><a href="#3"></a></li>
<li id="about"><a href="#4"></a></li>
<li id="contact"><a href="#4"></a></li>
</ul>

Som sagt, bara bakgrundsbilden visas
Citera
Svara
  • 1
  • 2

Stöd Flashback

Flashback finansieras genom donationer från våra medlemmar och besökare. Det är med hjälp av dig vi kan fortsätta erbjuda en fri samhällsdebatt. Tack för ditt stöd!

Stöd Flashback