|
|||||||||
|
|||||||||
|
|||||||||
 |
|||||||||
| |
||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
ASP Free Forums Sponsor:
|
|
|
|
#1
November 7th, 2005, 04:17 PM
|
|||
|
|||
|
hover in main menu
I have a two level menu - I want to hover a different color - it works fine on the submenu - but on the main menu it just changes over the words. This is my example:
http://webpages.charter.net/jukoenig/alaarktest/testingindex.htm This is the code: Code:
<style type="text/css">
#csstopmenu, #csstopmenu ul{
padding: 0;
margin: 0;
list-style: none;
}
#csstopmenu li{
float: top;
position: relative;
width: 10em;
}
#csstopmenu li a:hover{
background-image: url(../images/ButtonOvr.jpg);
}
#csstopmenu a{
text-decoration: none;
}
.mainitems{
border: 1px solid black;
border-left-width: 1px;
background-image: url(../images/button.jpg);
}
.headerlinks a{
margin: auto 8px;
font-weight: bold;
color: black;
}
.submenus{
display: none;
width: 10em;
position: absolute;
top: 0em;
left: 10em;
border: 1px solid black;
background-image: url(../images/buttonsub.jpg);
}
.submenus li{
width: 100%;
}
.submenus li a{
display: block;
width: 100%;
font-weight: bold;
color: black;
text-indent: 3px;
}
html>body .submenus li a{ /* non IE browsers */
width: auto;
}
.submenus li a:hover{
border: 1px solid black;
border-left-width: 1px;
background-image: url(../images/ButtonOvrSub.jpg);
}
#csstopmenu li>ul {/* non IE browsers */
top: auto;
left: auto;
}
#csstopmenu li:hover ul, li.over ul {
display: block;
}
html>body #clearmenu{ /* non IE browsers */
height: 3px;
}
</style>
<script type="text/javascript">
startMenu = function() {
if (document.all&&document.getElementById) {
cssmenu = document.getElementById("csstopmenu");
for (i=0; i<cssmenu.childNodes.length; i++) {
node = cssmenu.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function(){
this.className=this.className.replace(" over", "")
}
}
}
}
}
if (window.attachEvent)
window.attachEvent("onload", startMenu)
else
window.onload=startMenu;
</script>
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>
<body>
<ul id="csstopmenu">
<li class="mainitems" style="border-left-width: 1px">
<div class="headerlinks"><a href="http://www.alaarkrobotics.com">Home</a></div>
</li>
<li class="mainitems">
<div class="headerlinks"><a href="..pages/sales.asp">Sales</a></div>
<ul class="submenus">
<li><a href="../pages/robotsales.asp/">Robots</a></li>
<li><a href="../pages/inventorysearch.asp">Robot Parts</a></li>
</ul>
</li>
<li class="mainitems">
<div class="headerlinks"><a href="../pages/repairmotors.asp">Repair Motors</a></div>
<ul class="submenus">
<li><a href="../pages/wristrepair.asp">Wrist Units</a></li>
<li><a href="../pages/robotrepair.asp">Robots</a></li>
<li><a href="../pages/teachpendantrepair.asp">Teach Pendants</a></li>
<li><a href="../pages/circuitboardrepair.asp">Circuit Boards</a></li>
</ul>
</li>
<li class="mainitems">
<div class="headerlinks"><a href="../pages/robotrecondition.asp">Robot Recondition</a></div>
</li>
<li class="mainitems">
<div class="headerlinks"><a href="../pages/equipmentwanted.asp">Equipment
Wanted</a></div>
</li>
<li class="mainitems">
<div class="headerlinks"><a href="../pages/contact.asp">Contact Us</a></div>
</li>
<li class="mainitems">
<div class="headerlinks"><a href="../pages/map.asp">Map</a></div>
</li>
</ul>
<div id="clearmenu" style="clear: left"><!-- TemplateBeginEditable name="Body" -->Body<!-- TemplateEndEditable --></div>
</body>
</html>
Last edited by Lafinboy : November 8th, 2005 at 09:02 PM.
|
|
#2
November 7th, 2005, 06:35 PM
|
||||
|
||||
|
You'll need to apply display: block; to your top menu a items.
Please learn to use wrap your code in code or highlight tags please. Makes it much easier for us to work with your code.
__________________
-
thought-after | my thoughts on web development Get Firefox, the developers browser Budget hosting - recommended [/left]
|
|
#3
November 8th, 2005, 10:41 AM
|
|||
|
|||
|
wrap code in code
Quote:
What do you mean by wrap code in code? I'm not sure where to add the display: block; - I added it to all of the top menu items - I'm not sure what you mean by the a items? None of the places that I put the code worked. Last edited by tihonna : November 8th, 2005 at 10:50 AM. Reason: Add a question about the original solution
|
|
#4
November 8th, 2005, 02:04 PM
|
||||
|
||||
|
Quote:
see this thread: Instructions for new posters. I hope this helps. 
__________________
ShepherdWeb :: Charging Rhino Wizard I know of no more encouraging fact than the unquestionable ability of man to elevate his life by conscious endeavor. {Henry David Thoreau} § shepherdweb.com § fariswheel productions § reagan administration
|
|
#5
November 8th, 2005, 09:08 PM
|
||||
|
||||
|
Here are the two css declarations you need to change. Particular changes are highlighted for you:
Code:
#csstopmenu li a { display: block; }
.submenus{
display: none;
width: 10em;
position: absolute;
top: 0em;
left: 10em;
border: 1px solid black;
background-image: url(../images/buttonsub.jpg);
z-index: 10;
}
There are a number of problems with the menu, the main one being that hovered lists cover up the lists underneath them. While this may not be such a great problem for mouse users (they can just move the mouse away), it is a problem for keyboard users who need to tab through each of the items to get to the next item on the list. Consider moving the sublists so they fly out to the side of the main list.
|
|
#6
November 9th, 2005, 08:30 AM
|
|||
|
|||
|
Hover
Quote:
I added the code for the a item - I also had to add width: 100% to get it to work. What does the z-index do? What other problems did you mean? Last edited by tihonna : November 9th, 2005 at 02:49 PM. Reason: added item
|
|
#7
November 18th, 2005, 09:08 AM
|
||||
|
||||
|
Quote:
z-index controls if a block is raised from the page, flat with the page or suken. for example the quote box in this thread would have something like z-index:-20 , this will giv eyou a suken look.
__________________
Mark If you found a post particularly helpful, show your appreciation by clicking the "scales" icon in the bar just above the post, at the right hand side.
|
|
#8
November 18th, 2005, 04:52 PM
|
||||
|
||||
|
Quote:
The z-index will give you no such visual effects. The simplest way to think of z-index is as a reference to the layers position in the stack that makes up the page. Imagine that each element on the page is drawn onto a clear piece of plastic. If all pieces are layed next to each other without overlapping then they will all have the same z-index, ie they will all be on the same layer. Now say you want the logo piece to overlap the navigation bar. So you move one piece of plastic so it overlaps the lower piece. This increases the z-index of the logo piece, placing it above the stack of other pieces.
|
|
| Viewing: ASP Free Forums > Web Design > Web Layout > hover in main menu |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
|
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
