[CSS] Mouseover menu

Door Cedric op 22-07-2007 19:28

834 views

Hey,

Ik heb dus weeral een probleem met mijn mouseover menu's. Net nu ik dacht dat het ging lukken zonder hulp ;) In IE7 zie ik het menu perfect, maar in FF zie ik maar 1 menuitem.

Heb al wat met de paddings gespeeld en blijkbaar willen ze in FF naast elkaar staan..

http://www.freshcreations.be/klanten/animeplanet (enkel relevante images online gezet, moest met manager)

Dit is de CSS:

ul#sidemenu{
float:left;
margin:10px 0 0 0;
padding:0; 
list-style:none; 
width:220px;
}

ul#sidemenu li a:link, ul#sidemenu li a:active, ul#sidemenu li a:visited { 
display:block;
outline:none;
float:left;
padding:5px 0 0 28px;
color:#282828;
text-decoration:none;
width:192px;
height:19px;
background:url(images/menuitem.jpg); 
} 

ul#sidemenu li a:hover {
display:block;
width:192px;
height:19px;
color:#FFFFFF;
text-decoration:none;
background:url(images/menuitem_over.jpg); 
}

En de HTML:

<ul id="sidemenu">
            	<li><a href="#">Archive</a></li>
                <li><a href="#">Series</a></li>
                <li><a href="#">Fan Art</a></li>
                <li><a href="#">Games</a></li>
                <li><a href="#">Community</a></li>
                <li><a href="#">Downloads</a></li>
                <li><a href="#">Manga</a></li>
                <li><a href="#">Tutorials</a></li>
                <li><a href="#">Member Profiles</a></li>
                <li><a href="#">Sign-Up</a></li>
            </ul>

Heeft iemand een idee hoe ik dit goed krijg?

Alexander de Jong

22-07-2007 20:14

Ik kan dit wel gaan uit zoeken voor u, wat ik ook wel graag doe. Maar echter heb ik een leuke site waar dit op staat:

Css menu tips and tricks

Jan Koehoorn

22-07-2007 20:37

Het is niet echt zinvol om je a tags te gaan floaten in een dergelijk menu. Hanteer deze strategie:


ul {
    list-style-type: none;
}
ul li {
    float: left;
    width: 130px; /* als ze allemaal even breed moeten zijn. Anders zet je dit bij de a */
}

ul li a {
    display: block; /* zodat het HELE block gevoelig wordt voor de mouseover en niet alleen je linktekst*/
}

Voor een voorbeeld, kijk op: http://www.jankoehoorn.nl/tuts/css/menu/

mark Dijkstra

22-07-2007 21:42

Je kunt het ook iets simpeler doen (vind ik dan) gewoon met wat javascript der in

de voorbeeld komt uit een rich editor van me zelf

deze stuk van code tussen je <head> tag's plaatsen
----------------------------------------------
<script language="Javascript">



</script>

en deze kun je over al tussen je <body> tag's plaatsen
----------------------------------------------------------------
<a href="#" onclick="insert_format('B');" class="bbb" onMouseOver="document.mouseover.src=image2.src" onMouseOut="document.mouseover.src=image1.src">
<img src="images/button_bold.gif" border=0 name="mouseover" alt="bold"></a>

<a href="#" onclick="insert_format('I');" class="bbb" onMouseOver="document.mouseover2.src=image4.src" onMouseOut="document.mouseover2.src=image3.src">
<img src="images/button_italic.gif" border=0 name="mouseover2" alt="italic"></a>

<a href="#" onclick="insert_format('U');" class="bbb" onMouseOver="document.mouseover3.src=image6.src" onMouseOut="document.mouseover3.src=image5.src">
<img src="images/button_under.gif" border=0 name="mouseover3" alt="underline"></a>

dit werkt zowel als in ie en ff.

misschien dat je hier wat aan hebt ;)

greetz

Jan Koehoorn

22-07-2007 23:09

@ mark: ik zou jouw manier afraden, om een aantal redenen.

1) Het is niet "simpeler". Je hebt nu per link veel meer code.
2) Het functioneren van je navigatie hangt nu af van JavaScript, en dat kan uitstaan (en dat staat het ook in 1 op de 20 gevallen)
3) De manier waarop je je JavaScript gebruikt, is niet unobtrusive. Mocht je niet weten wat dat is, Google dan even.
4) Je werkt alleen met name attributen en kent geen id's toe. Dat maakt het een heel stuk moeilijker om je JavaScript crossbrowser te krijgen (denk aan functies als document.getElementById)

mark Dijkstra

23-07-2007 01:32

@Jan hmm nu ik het zo bekijk tja dan kan ik het toch beter met css gaan doen :D thanks voor de tip :D

Arno

23-07-2007 21:53

Ik heb hem net bekeken in FF, maar hij werkt toch gewoon?
Of mis ik iets?

Jan Koehoorn

23-07-2007 22:01

@ Arno: waarschijnlijk heeft de TS intussen de tips verwerkt ;-)

Reageren

Inloggen om te reageren