PDA

View Full Version : Help me make a Vert. Dropdown menu



zoe20
Sep 20th, 2009, 08:12 AM
Hi i am making web site where i have to use a vertical drop down menus. i already created the nav bar and the roll overs. please some one help me make drop down menus please.

regards

This is the Live demo of the page:

click here (http://hook4adesign.com/1/testing.htm)

This is the CSS :




html,body{
background: #B256A1 0px 0px;
margin: 0px;
padding: 0px;
}
#wrapper{
margin: 0px auto;
width: 965px;
background: url(images/bg.png) repeat-y;
height: 965px;
}
#header{
background: url(images/header.png) no-repeat;
height: 132px;
width: 965px;
margin-bottom: 3px;
}
#nav{
background: url(images/nav.png) no-repeat;
height: 40px;
width: 965px;
}
#adv{
background: url(images/saying.png) no-repeat;
height: 54px;
width: 965px;
margin-bottom: 3px;

}
#sidenav{
background: url(images/nav_back.png) no-repeat;
float: left;
height: 312px;
width: 238px;
position: relative;
left: 12px;

}
#sidenav ul{
list-style: none;
padding: 0px;
margin: 16px 0px 0px;

}
#sidenav ul li{
margin: 0px 0px 2px;
padding: 0px;
}
#sidenav ul li a{
background: url(images/btn.png) no-repeat left top;
font: normal 15px/33px "Arial MT";
color: #000000;
text-decoration: none;
display: block;
height: 33px;
width: 238px;
padding: 0px 0px 0px 12px;


}
#sidenav ul li a:hover {
background: url(images/btn_1.png) no-repeat;
color: #B256A1;
}
#sideadv{
background: url(images/imgg.png) no-repeat;
float: right;
height: 312px;
width: 696px;
position: relative;
right: 12px;
}
#middle{
height: 312px;
width: 965px;
margin-bottom: 3px;
}




This is the Mark Up:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testing</title>
<link href="z.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">

<div id="header"></div>
<div id="nav"></div>
<div id="adv"></div>
<div id="middle">

<div id="sidenav">

<ul>
<li><a href="">Our Value,Vision &amp; Mission</a></li>
<li><a href="">Our Products</a></li>
<li><a href="">Our Teams</a></li>
<li><a href="">Our Clients</a></li>
<li><a href="">Our Performance</a></li>
<li><a href="">Latest News</a></li>
<li><a href="">ABB In the community</a></li>
<li><a href="">Feedback</a></li>
</ul>



</div>
<div id="sideadv">
</div>


</div>











</div>

</body>
</html>


Thanks in advance.

SB65
Sep 20th, 2009, 10:04 AM
Not exactly sure what you mean by a vertical drop down. I assume from the arrows on you existing menu you want the next level menu to appear to the right of the existing menu on hover?

If so your html needs to include a second level ul nested within the appropriate <li>:



<ul>
<li><a href="">Our Value,Vision & Mission</a>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
</li>
<li><a href="">Our Products</a></li>
<li><a href="">Our Teams</a></li> etc...

then make your css something like:



#sidenav ul li{
position:relative;* reference point for absolute positioning*/
line-height:0;/*stop IE messing up*/
}

#sidenav ul ul {
position:absolute;/* use absolute positioning/*
left:236px;/*position to the left of the top menu*/
top:0;/*and in line with it*/
margin-top:0; /*lose the top margin applied to the top menu*/
display:none;/*hide it*/
}

#sidenav ul li:hover ul
{display:block}/* display only on hover*/


Give that a try for starters - you might need to play around with the absolute positioning to get the menu exactly as you want it. Try this in FF first - you might need to tweak it a bit for IE7.

One other point: IE6 doesn't support hover other than on anchor <a> elements - so it won't work on IE6 without something extra - like this (http://www.xs4all.nl/~peterned/csshover.html).

zoe20
Sep 20th, 2009, 10:37 AM
yes i want the next level menu to appear to the right of the existing menu on hover. Exactly. I am new to css adn i know only basics so can u explain more detail please? Thanks in advance.

effpeetee
Sep 20th, 2009, 10:46 AM
yes i want the next level menu to appear to the right of the existing menu on hover. Exactly. I am new to css adn i know only basics so can u explain more detail please? Thanks in advance.
Lots of help here (http://exitfegs.co.uk/Sources.html). Use the search box, type in menu

Frank

SB65
Sep 20th, 2009, 11:19 AM
...so can u explain more detail please?

Not sure what else I can say. Add the css to the bottom of your css file, and amend your html to add the second level <ul> elements as you need.

Then if you get stuck, upload your amended code and post back here.

zoe20
Sep 20th, 2009, 01:41 PM
Not sure what else I can say. Add the css to the bottom of your css file, and amend your html to add the second level <ul> elements as you need.

Then if you get stuck, upload your amended code and post back here.
First of all rally thanks for the prompt reply and i added the css and emended the html as u suggested.Here's the out come.

Amended Live Demo (http://hook4adesign.com/1/testing.htm)

regards
zoe

SB65
Sep 20th, 2009, 03:46 PM
OK, you haven't added all the css - you've missed:


#sidenav ul ul {
position:absolute;/* use absolute positioning/*
left:236px;/*position to the left of the top menu*/
top:0;/*and in line with it*/
margin-top:0; /*lose the top margin applied to the top menu*/
display:none;/*hide it*/
}

The use of position:absolute takes the element out of the main flow of the document, and positions it exactly where specified. The starting point for an element with absolute positioning is the top left of the next element up in the html hierarchy which has position:relative set.

So, here we have set position:relative on the <li> element of the top level menu, so our left and right positioning on the <ul> element contained within this <li> starts from this point. Our code sets top:0 - so it is at the same vertical point as the "Value/mission" menu item - which is what we want. But in the absence of a left value, it's also at the same horizontal point as "Value/mission" and hence it appears on top of it. Once we add left:236px it appears 236px to the left of "value/mission" which is prettyy much where we want it.

Absolute positioning should be used with discretion - elements with position:absolute will generally appear on top of other elements - which is what we want here, but in other circumstances could cause problems.

zoe20
Sep 20th, 2009, 04:31 PM
heres the updated page . please see it.

regards
Updated (http://hook4adesign.com/1/testing.htm)

SB65
Sep 20th, 2009, 04:35 PM
Yes, it's not right. You should be able to see why by looking at your css:


#sidenav ul ul {
display:none;
left:236px;
margin-top:0;
position:absolute;
}

Something's missing...

zoe20
Sep 20th, 2009, 10:50 PM
ok i missed

top:0;/*and in line with it*/

Please see it now. Seems i need some Java script to make this vertical drop downs work properly??

Live Demo (http://hook4adesign.com/1/testing.htm)

SB65
Sep 21st, 2009, 08:39 AM
What is it that it's not doing then? It looks OK to me.

zoe20
Sep 21st, 2009, 09:32 AM
yes its working great.but as soon as i cant able to click the button as soon as the cursor goes over it its disappearing. Do i need to add any edition tweaks ??

SB65
Sep 21st, 2009, 09:50 AM
Right, just having a look at that, spotted after I posted earlier.

It's due to your #sidenav and #sideadv elements. Remove position:relative from both of these and position your elements using margins instead of left and right - using left and right other than with absolute position can cause problems anyway. Your new css should be:


#sideadv {
background:transparent url(images/imgg.png) no-repeat scroll 0 0;
float:right;
height:312px;
margin-right:12px;
width:696px;
}

#sidenav {
background:transparent url(images/nav_back.png) no-repeat scroll 0 0;
float:left;
height:312px;
margin-left:12px;
width:238px;
}

zoe20
Sep 21st, 2009, 10:15 AM
yeah but they say thumb rule in css is not to give margins to same side an element is floated?? that's what i used relative there.

SB65
Sep 21st, 2009, 10:25 AM
It's not a rule of thumb. IE6 incorrectly doubles margins in this case - but there's an easy fix for that (apply display:inline to the div). You are better off without the position:relative - which can cause issues (as we are seeing) in more than IE6.

There's an alternative here. What you're trying to do is move the #sidenav and #sideadv divs in from the edge so it looks nice. We can do this with margins. However we could also do this by applying 12px padding left and right to #wrapper - so do that if you prefer.

EDIT: in which case you'll need to reduce the width of #wrapper by 24px to compensate...

zoe20
Sep 21st, 2009, 10:36 AM
Awesome its working great . Is it possible to give some background to the drop down menus? right now the background is transparent.

Edited Demo (http://hook4adesign.com/1/testing.htm)

SB65
Sep 21st, 2009, 11:02 AM
Just apply a background colour or image to the #sidenav ul ul element.

zoe20
Sep 21st, 2009, 11:38 AM
Just apply a background colour or image to the #sidenav ul ul element.

Awesome here's you go!! Live Demo (http://hook4adesign.com/1/testing.htm). One more issue is it possible to show that purple triangle to the buttons that are only having next level buttons? i.e (drop downs)??

SB65
Sep 21st, 2009, 12:01 PM
The arrow image is coming from the background image applied from #sidenav ul li a. So at the moment it applies to all <a> elements within #sidenav ul li - both the top and second level menu.

If you don't want it on all the <a> elements, then you first need to make a different image without the arrow - let's assume you call this btn_noarrow.png.

Then apply a new class in your html to those <a> where you don't want the arrow. Something like:



<ul>
<li><a href="">Our Value,Vision &amp; Mission</a>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
</li>
<li><a href="">Our Products</a>
<ul>
<li><a href="item1.htm" title="item-1">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
</li>
<li><a href="" class="noarrow">Our Teams</a></li>
etc.


Once you'e done that you can then apply the new background image only to those buttons with the new class using something like:



#sidenav ul li a.noarrow
{background-image:url(images/btn_noarrow.png)}

That will allow you to have the arrow on top level links only where a submenu exists. Now, assuming that you don't want the arrow on any of the second level links, rather than apply the class to all of the links you can just add:



#sidenav ul ul li a
{background-image:url(images/btn_noarrow.png)}

This statement will only apply to second level links (identified by the repeated ul). Finally to keep things nice and neat, we could combine these two statements:



#sidenav ul ul li a, #sidenav ul li a.noarrow
{background-image:url(images/btn_noarrow.png)}

You''ll need something similar for the :hover as well.

zoe20
Sep 21st, 2009, 05:21 PM
thanks a lot . here's the update.
Live Demo (http://hook4adesign.com/2/testing.htm)