Drop Down Nav Menu Effect


Recommended Posts

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>::Source::</title>

<link rel="stylesheet" href="layout.css" type="text/css" media="screen">

<link rel="stylesheet" href="style.css" type="text/css" media="screen">

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

<script language="JavaScript" src="typetext.js"></script>

</head>

<body onload="type_text()">

<!--[if IE]><style type="text/css">#sizer { width:expression(document.body.clientWidth > 1280 ? "170px" : "24%" ); } </style><![endif]-->

<div id="sizer">

<div id="expander">

<h1><img src="images/slogan.gif"></a></h1>

<span class="top"><b><b></b></b></span>

<div class="wrap-rightside"><div class="wrap-leftside"><div class="wrap-border1"><div class="wrap-border2">

<div id="header"></div>

<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>

<div id="wrapper" class="clearfix">

<div id="content" class="narrowcolumn">

<p class="navigation">

<span class="alignleft"></span>

<span class="alignright"></span>

</p>

</div>

</div>

<div id="footer"></div>

</div></div></div></div> <!-- #wrap-leftside -->

<span class="bottom"><b><b></b></b></span>

<b class="leftsidetop"></b>

<p id="disclaimer">© 2005-2006, complhex.com, Some Rights Reserved.</p>

</div>

</div>

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">

</script>

<script type="text/javascript">

_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 by DOSError
Link to post
Share on other sites

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. :P

index.html

<html>

<title></title>

<head>

<style type="text/css" media="all">@import "style.css";</style> <script type="text/javascript" src="menu.js"></script>

</head>

<body>

<div id="navigation">

<ul id="nav">

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

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

<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/Blog" title="">Blog</a></li>

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

</ul>

</li>

<li><a href="http://www.complhex.com/The_More_You_Know" title="">The More You Know</a></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 by DOSError
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...