Drop Down Nav Menu Effect

DOSError · September 29, 2006

I need help with a drop down menu for my site.

I have found some scripts laying all over the place for this, but I am having difficulty integrating it into my current design. I'm wanting something that will be compatible with most browsers (primarily Firefox, Opera and IE).

My idea is to create a hover over drop down menu called "Interactive" which would bundle the Forum/Blog/Gallery all into one. The reason behind all of this is that I have too many links at the top of the page and whenever the resolution gets too low, the links to the right simply disappear (thus killing my liquid design).

I want to maintain the color scheme that I am using on the current nav bar on the drop down as well.

-----------------------------------------------------------------------------------------------------------------

To help you help me, I will post the code used on my pages:

source.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<div id="nav">

<ul>

<li><a href="http://www.complhex.com">Home</a></li>

<li><a href="http://www.complhex.com/Tech/">Tech</a></li>

<li><a href="http://www.complhex.com/Gallery/">Gallery</a></li>

<li><a href="http://www.complhex.com/Blog/">Blog</a></li>

<li><a href="http://www.complhex.com/forum" target="_blank">Forum</a></li>

<li><a href="http://www.complhex.com/The_More_You_Know/">The More You Know</a></li>

<li><a href="http://www.complhex.com/Personal/">Personal</a></li>

<li><a href="http://www.complhex.com/Contact/">Contact</a></li>

</ul>

</div>

</p>

</div>

</div></div></div></div>

</div>

</script>

_uacct = "UA-260579-2";

urchinTracker();

</script>

</body></html>

------------------------------------------------------------------------------------------

layout.css

body {

padding: 40px 290px 40px 290px;

margin: 0;

text-align: center;

background: #000000 url(../images/stripe-bg.jpg) left top repeat; /* */

color: #000000;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

}

#sizer {

margin: 0 auto 0 auto;

padding: 0;

width: 24%;

max-width: 170px; /* version for IE is at the bottom of this style block */

}

#expander {

margin: 0 -290px 0 -290px;

min-width: 580px; /* Critical Safari fix */

position: relative;

}

/* Holly hack for IE \*/

* html #expander { height: 0; }

/* */

#wrapper {

width: 100%;

text-align: left;

position: relative;

}

#content {

padding: 1px 12px 1px 10px;

}

#content div.left { float: left; width: 48%; }

#content div.right { float: right; width: 48%; }

#content .clearing { display: block; clear: both; height: 1px; font-size: 1px; margin-top: -1px; }

#nav {

border-bottom: 2px solid #000000;

text-align: left;

position: relative;

}

/* \*/ * html #nav { height: 1px; } /* */

#nav ul {

list-style: none;

margin: 0; padding: 0;

height: 18px;

background: #636363;

}

#nav ul li { float: left; }

#nav ul li a {

float: left;

padding: 3px 10px 0 10px;

color: #FFFFFF;

height: 15px;

font: 11px Arial, sans-serif;

text-decoration: none;

font-weight: bold;

}

#nav ul li a:hover {

background: #636363;

color: #BEC187;

}

#disclaimer { height: 0px; padding: 0; position: relative; top: -25px;

width: 100%; text-align: center; font-size: 12px; color:

#000000; margin: 0; }

#disclaimer a { color: #542; text-decoration: none; font-weight: bold; }

#disclaimer a:hover { color: #653; }

h1 { position: absolute; top: 12px; right: 35px; margin: 0; padding: 0;

border: 0; }

h1 * { border: 0; }

.wrap-leftside {

background: transparent url(../images/border/border-l.gif) bottom left repeat-y;

padding-left: 29px;

position: relative;

padding-top: 1px;

}

.wrap-rightside {

background: transparent url(../images/border/border-r.gif) top right repeat-y;

padding-right: 29px;

position: relative;

padding-top: 249px;

}

.leftsidetop {

display: block;

position: absolute;

top: 35px; left: 0;

width: 29px; height: 249px;

background: transparent url(../images/border/border-l-top.gif) top left no-repeat;

}

.top, .top b { display: block; clear: both; height: 35px; }

.top { background: transparent url(../images/border/border-tl.gif) top left

no-repeat; padding-left: 316px; }

.top b { background: transparent url(../images/border/border-tr.gif) top right

no-repeat; padding-right: 97px; }

.top b b { background: transparent url(../images/border/border-t.gif) top left

repeat-x; }

.bottom, .bottom b { display: block; clear: both; height: 35px; }

.bottom { background: transparent url(../images/border/border-bl.gif) top left

no-repeat; padding-left: 341px; }

.bottom b { background: transparent url(../images/border/border-br.gif) top right

no-repeat; padding-right: 71px; }

.bottom b b { background: transparent url(../images/border/border-b.gif) top left

repeat-x; }

.wrap-border1 {

background: #FFFFFF top left; /* url(../images/paper-bg.jpg) */

border: 7px solid #000000; padding: 3px;

margin-top: -250px;

position: relative;

}

.wrap-border2 { border: 2px solid #000000; position: relative; }

/* holly-hack the lot \*/

* html .wrap-rightside, * html .wrap-leftside,

* html .wrap-border1, * html .wrap-border2 { height: 1px; }

/* */

#header {

height: 140px;

background: #000000 url(../images/banner.jpg) center no-repeat;

/* background: transparent url(../images/banner.jpg) top center repeat-x; */

border-bottom: 2px solid #C0C0C0;

}

#footer {

height: 40px;

background: transparent url(../images/divider.gif) center no-repeat;

border-top: 2px solid #000000;

/* margin-top: 25px;*/

}

.post { position: relative; }

/* Text styles */

.post {

padding: 5px 0 45px 0;

margin-bottom: -10px;

/* background: transparent url(../images/divider.gif) center bottom no-repeat; */

}

/* Link Color/Style */

#wrapper a { font-weight: bold; color: #000000; font-size: 12px; text-decoration: none; border-bottom: 1px dotted #BEC187;}

#wrapper a:hover { color: #CC0000; }

#wrapper .aside .comments-link a,

#wrapper .post .meta-links a { text-decoration: none; border: none; }

#viewpage p, .post p, .post li { line-height: 1.4; }

.post .comments-link {

text-align: right;

margin-top: -2em;

}

p.navigation .alignright { float: right; }

p.navigation .alignleft { float: left; }

p.navigation { overflow: hidden; }

/* Image Wrapper Styles */

.img-overflow {

float: left;

width: 100%;

margin: 0 0 0 0;

}

.img-overflow b, .img-floatleft, .img-floatright {

float: left;

max-width: 100%;

padding: 5px;

background: #dca;

border: 1px solid #a98;

}

.img-floatright { float: right; margin: 0 0 5px 10px; }

.img-floatleft { float: left; margin: 0 10px 5px 0; }

.img-overflow b i {

overflow: hidden;

float: left;

border: none; padding: 0;

}

.img-overflow b i.right { background-position: right top; background-repeat: no-repeat; }

.img-overflow b i.center { background-position: center top; background-repeat: no-repeat; }

.img-overflow b i img { float: left; }

.img-overflow b i.right img,

.img-overflow b i.center img { visibility: hidden; }

#wrapper a.img-link { border: none; text-decoration: none; background: none; line-height: 1; }

#wrapper a.img-link img { border: none; text-decoration: none; background: none; padding: 0; margin: 0; }

/* h4x for IE < 7 */

* html .img-overflow b i { width: 100%; }

/* http://www.positioniseverything.net/easyclearing.html */

.clearfix:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

.clearfix { display: inline-table; }

/* Hides from IE-mac \*/

* html .clearfix {height: 1%;}

.clearfix {display: block;}

/* End hide from IE-mac */

--------------------------------------------------------------------------------

Yes, I am aware that my CSS needs to be cleaned up, but I haven't had time lately. Thanks for any assistance that you can give me. Usually the people at BT are spot on whenever it comes to suggestions.

Edited September 29, 2006 by DOSError

jsbowen · September 29, 2006

For the CSS purist that you are becoming, have a look at this one:

http://www.cssplay.co.uk/menus/final_drop.html

This is a nice one, but uses a smidgen of scripting:

http://www.alistapart.com/articles/dropdowns/

DOSError · September 29, 2006

Well I did put together something a while ago using parts of the suckerfish css script. I got the menu working flawlessly, but I have major issues whenever I try to fit it into the area that my links are in now. I'm not at the server right now, so I can't upload the nav bar that I made, but that doesn't stop me from pasting the source.

index.html

<html>

<head>

</head>

<body>

<li><a href="" title="">Interactive</a>

<ul>

<li><a href="http://www.complhex.com/Gallery" title="">Gallery</a></li>

<li><a href="http://www.complhex.com/Forum" title="">Forum</a></li>

</ul>

</li>

<li><a href="http://www.complhex.com/Personal" title="">Personal</a>

<li><a href="http://www.complhex.com/Contact" title="">Contact</a></li>

</ul>

</div>

</body>

</html>

style.css

/*

#navigation {

/*height: 1.6em;*/

}

/* another son of suckerfish...

http://www.htmldog.com/articles/suckerfish/dropdowns/

http://www.alistapart.com/articles/horizdropdowns

*/

ul#nav { /* top level ul */

border-bottom: 2px solid #000000;

text-align: left;

position: relative;

padding: 0 0 0 105px;

margin: 0;

list-style: none;

height: 1.6em;

background-color: #666;

}

#nav a {

height: 15px;

font: 11px Arial, sans-serif;

font-weight: bold;

display: block;

padding: 0 20px;

margin: 0;

line-height: 1.6em;

/*width: 6em;*/

color: white;

background-color: #636363;

text-decoration: none;

}

#nav a:hover {

background: #636363;

color: #BEC187;

text-decoration: underline;

}

#nav a.active {

text-decoration: none;

background-color: #333;

}

#nav li {

display: inline;

float: left;

margin: 0;

padding: 0;

/*height: 1.6em;*/

/*width: 10em;/* fixed width works better, but looks ugly */

}

/* second-level lists */

#nav ul {

height: 18px;

background: #636363;

padding: 0;

margin: 0;

list-style: none;

}

#nav li ul {

position: absolute;

width: 1.0em;

left: -999em; /* to hide menus because display: none isn't read by screen readers */

}

#nav li li {

/*height: auto;*/

float: left;

width: 13.8em;

}

#nav li ul a {

float: left;

padding: 3px 10px 0 10px;

color: #FFFFFF;

height: 15px;

font: 11px Arial, sans-serif;

text-align: center;

text-decoration: none;

font-weight: normal;

background-color: #777;

/*display: block;*/

/*height: auto;*/

/*text-align: left;*/

}

#nav li ul a:hover {

background: #000000;

color: #BEC187;

}

#nav li ul ul {

margin: -1.3em 0 0 14em;

}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {

left: -999em;

}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {

left: auto;

}

menu.js

/*

JavaScript for drop-down menu (IE fix)

...another son of suckerfish.

http://www.htmldog.com/articles/suckerfish/dropdowns/

*/

sfHover = function() {

var sfEls = document.getElementById("nav").getElementsByTagName("LI");

for (var i=0; i<sfEls.length; i++) {

sfEls.onmouseover=function() {

this.className+=" sfhover";

}

sfEls.onmouseout=function() {

this.className=this.className.replace(new RegExp(" sfhover\\b"), "");

}

if (window.attachEvent) window.attachEvent("onload", sfHover);

If you create all of these files and open index, you will see that I have a nicely configured nav menu (though it still needs slight evening on the 2nd level width). I don't know if the amount of divs and ids are just blowing my mind or what, but I couldn't figure out how to get it adjusted properly. I mean, it went into the right spot, but it didn't fill the whole area and the dropdown menu would disappear upon mousing over it.

I will upload an example later tonight for evaluation...I just thought I would post the code incase you wanted to experiment with it in the mean time.

Thanks!

\\DOS

Edited September 29, 2006 by DOSError

DOSError · September 30, 2006

http://www.complhex.com/navmenu/ - Nav Bar On Blank Page

http://www.complhex.com/navmenu/2/ - Integrated Nav Bar On Site Structure

Sign In

Drop Down Nav Menu Effect

Recommended Posts

DOSError

Link to post

Share on other sites

jsbowen

Link to post

Share on other sites

DOSError

Link to post

Share on other sites

DOSError

Link to post

Share on other sites

Join the conversation

Browse

Activity