|
CSS - Multiple Rows Of Suckerfish Style Drop Down Menus
I'm trying to use suckerfish style drop downs, based on CSS with javascript only for an Internet Explorer hack. It's working fine for a single horizontal row of menus, however I wanted to setup a few rows of other menus underneath the first row. The problem is that the dropdown goes underneath the menus under it and I can't figure out how to fix it.
This is an example of the problem. Any suggestions? Similar TutorialsSuckerfish came into my life recently and has not only offered a great deal of freedom with dynamic menus at lower overheads than most (totally) Javascript alternatives, but has also had me tearing hairs out more frequently than most other things I know. The problem I currently face is when viewing my menus in IE6. At first this suggests that the issues lie within the Javascript of the Suckerfish menus... The pages in questions are located at the following addresses (please excuse the mid-construction state of each): www.cheapboilers.com/sandbox/index.html www.cheapboilers.com/sandbox/baxi_105.html Take the grey vertical menu on the left hand side. The first level appears fine, but the problem is with the second level. In index.html all appears well. However in baxi_105.html when moving down the list in the second level menu the menu disappears when moving from the first to the second item. At first I thought the problem was to do with the margins surrounding the elements - I thought the li element had detected the mouse as having left the element as it passed over the border. If this were true then the same would happen with the index.html page (which uses the same code/html/css). It does not. My current theory is that the other elements on the page are somehow interfering with the Suckerfish menus. Index.html has nothing but text in the content of the page. baxi_105.html has images, links etc in it. This theory is backed up by going to the bottom list item in index.html (Worcester) and viewing the second level menu for it. The menu vanishes as with all the menus on baxi_105.html. It is as if the footer of the page is interfering with the operation of the menus. This disappearing menu issue is driving me up the wall. Please can someone offer a solution? Thanks in advance. Andy http://www.sdtars.com/development/ I can't figure out why I can't get them to popup over the other menus. Can anyone see what I am doing wrong? Thanks! I am not sure how to centre all items on the suckerfish menus: I thought this would work, but it doesn't and even if it did it won't validate: <ul id="nav"> <div style="text-align:center;margin-left:auto;margin-right:auto;"> NAV ELEMENTS HERE... </div> </ul> Surely someone has had to centre there suckerfish menu to a fixed width box..or any box for that matter. Was referred to Suckerfish and find it very useful but I cannot figure out how to center the menu line on the screen (inside a table or not). Oddly, it automatically centers in IE but not Chrome or Firefox. Any suggestions? Thanks in advance!! I can post an example of what I mean but don't want to violate the new users guidelines. I want to make the drop downs on suckerfish menus appear horizontally rather than vertically. Any ideas how to? PHP Code: <style type="text/css"> #nav, #nav ul { padding: 0; margin: 0; list-style: none; background-color: red; color: #000; } #nav a { display: block; width: 10em; color: #FFF; } #nav li { float: left; width: 10em; background-color: green; } #nav li ul { position: absolute; width: 10em; left: -999em; } #nav li:hover ul { left: auto; } #nav li:hover ul, #nav li.sfhover ul { left: auto; } </style> <ul id="nav"> <li><a href="#">Percoidei</a> <ul> <li><a href="#">Remoras</a></li> <li><a href="#">Tilefishes</a></li> <li><a href="#">Bluefishes</a></li> <li><a href="#">Tigerfishes</a></li> </ul> </li> <li><a href="#">Anabantoidei</a> <ul> <li><a href="#">Climbing perches</a></li> <li><a href="#">Labyrinthfishes</a></li> <li><a href="#">Kissing gouramis</a></li> <li><a href="#">Pike-heads</a></li> <li><a href="#">Giant gouramis</a></li> </ul> </li> <!-- etc. --> </ul> I thought I could change the BLOCK display of the #nav a to INLINE but that doesn't work. We want the dropdowns to appear as 1 2 3 4 5 rather than 1 2 3 4 5 Thanks Hello my helpful comrades, I'm having some problems with the ol' Suckerfish in IE. It seems the second list is floating left, insead of appearing beneath the first list, and "clear:" won't fix it. I've been looking over the CSS all morning, but can't seem to locate the problem. The menus display perfectly in Fx. I have a feeling a lack of sleep is making me mildly stupid, but the slow progress thus far has driven me to seek help I've put the menu in a seperate .css file from the main layout to make it easier to read: CSS HTML Cheers! Hi fowks, Normally I'm able to solve CSS issues relatively easily, well with some experimentation at least. However, this one has really got me stumped. Basically, I'm developing a menu for a weblication which is based on the famous Suckerfish menus. Everything works ok in IE and Mozilla when in an Left-to-Right (LTR) environment, but it doesn't work quite so well when the direction is flipped to RTL. IE copes fine, but FF doesn't. The menu works itself, but the viewport doubles in size and scrolls off to the right, even though there are no elements there. Anyone got an idea as to what could be doing this? I've included the relevant files for you to trial. Thanks for having a look. Hope you can help. It's driving me nuts. Cheers, John I have been developing some dropdown menus loosely based on Patrick Griffiths "Suckerfish" example (see http://www.alistapart.com/articles/dropdowns/) and I have a prototype mostly working. The code is simple and is included in full below. However I see two problems with this that I can't sort out. First, in IE (6.0.2800) the dropdown is offset significantly from the left edge of the upper menu cell. In Mozilla (1.7.5) it's fine. I can't figure out why -- any ideas? I want it right underneath, not offset. Also, in Mozilla the dropdowns have a 1-pixel space at the right edge between the background and the border. Also a mystery ... Thanks for any comments / thoughts. Tom ======================================================== Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {
font-family: arial, helvetica, serif;
background: white url(images/ddbg3.gif) no-repeat 6000px 6000px;
margin-left: 1em;
}
.mainlist {
list-style: none;
padding: 0;
margin: 0;
}
.mainitem {
float: left;
position: relative;
width: 120px;
text-align: center;
cursor: hand;
padding: 0;
border-top: 1px solid green;
border-left: 1px solid green;
border-bottom: 1px solid green;
}
.mainitem a {
font-weight: bold;
color: green;
text-decoration: none;
}
.mainitemlast {
border-right: 1px solid green;
}
.mainlist li:hover ul {
display: block;
left: 0;
}
li.over ul {
display: block;
left: 0;
}
.sublist {
display: none;
position: absolute;
float: left;
top: auto;
font-weight: normal;
background-color: #CCCCFF;
width: 150px;
padding: 0;
}
.subitem {
display: block;
float: left;
position: relative;
left: 0;
width: 100%;
border-top: 1px solid blue;
border-left: 1px solid blue;
border-right: 1px solid blue;
}
.subitemlast {
border-bottom: 1px solid blue;
}
.subitem a {
display: block;
font-weight: normal;
color: #060;
padding: 5px;
}
.subitem a:hover {
background-color: #EEEEFF;
}
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]></script>
</head>
<body>
<div id="content">
<br>
<ul class="mainlist" id="nav">
<li class="mainitem">
<div><a href="">Option 1</a></div>
<ul class="sublist">
<li class="subitem"><a href="">Subitem 1</a></li>
<li class="subitem"><a href="">Subitem 2</a></li>
<li class="subitem"><a href="">Subitem 3 is longer</a></li>
<li class="subitem subitemlast"><a href="">Subitem 4</a></li>
</ul>
</li>
<li class="mainitem">
<div><a href="">Option 2</a></div>
<ul class="sublist">
<li class="subitem"><a href="">Subitem 1</a></li>
<li class="subitem"><a href="">Subitem 2</a></li>
<li class="subitem"><a href="">Subitem 3 is longer</a></li>
<li class="subitem subitemlast"><a href="">Subitem 4</a></li>
</ul>
</li>
<li class="mainitem mainitemlast">
<div><a href="">Option 3</a></div>
<ul class="sublist">
<li class="subitem"><a href="">Subitem 1</a></li>
<li class="subitem"><a href="">Subitem 2</a></li>
<li class="subitem"><a href="">Subitem 3 is longer</a></li>
<li class="subitem subitemlast"><a href="">Subitem 4</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Hi guys, Im a newbie to CSS. Ive paid for a 3rd party module for my DotNetNuke site to produce custom navigation. It works perfectly in IE8/FFox etc.. However, in IE7, I have centering issues, and submenus all over the place. I really have no idea where to even start - and was hoping someone could shed some light? My URL is : http://merlo.com.au.dnnmax.com/Home/HomeV4.aspx Its the navigation along the top. The "html" which builds the menu is a bit convuluted being a dynamic system but Ill paste it anyway.. -- Code: <head> <link rel="stylesheet" type="text/css" href="nav.css" /> <script type="text/javascript"> <!--//--><![CDATA[//><!-- sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); //--><!]]> </script> <script type="text/javascript"> <!-- function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> </head> [NavMenu-Container[ <div id="{NavMenu.Id}"><ul><table border="0" style="width: 100%; text-align: center; vertical-align: middle;" ><tr> ]] [Level0-Item[ <td style="text-align: center; vertical-align: middle; border-right: 2px dotted #FFFFFF;" align="center" valign="middle"><li class="tab IIF({Tab.IsActive}='True',selected)"> ]] [Level0-Anchor[ <a class="tab" href="{Tab.Url}" title="{Tab.Name}"><img src="tabs/{Tab.Name}.png" border="0" alt="{Tab.Name}" id="{Tab.Name}" onmouseover="MM_swapImage('{Tab.Name}','','/Portals/_default/Skins/Merlo/tabs/{Tab.Name} hover.png',0)" onmouseout="MM_swapImgRestore()" onload="MM_preloadImages('/Portals/_default/Skins/Merlo/tabs/{Tab.Name} hover.png')"></a> ]] [Level1-Container[ <ul class="nontab"> ]] [Level1-Item[ <li> ]] [Level1-Anchor[ <a href="{Tab.Url}" title="{Tab.Title}" class="IIF({Tab.HasChildren}='True',parent)IIF({Tab.IsActive}='True', selected)">{Tab.Name}</a> ]] [Level2-Container[ <ul> ]] [Level2-Item[ <li> ]] [Level2-Anchor[ <a href="{Tab.Url}" title="{Tab.Title}" class="IIF({Tab.HasChildren}='True',parent)IIF({Tab.IsActive}='True', selected)">{Tab.Name}</a> ]] [Level3-Container[ <ul> ]] [Level3-Item[ <li> ]] [Level3-Anchor[ <a href="{Tab.Url}" title="{Tab.Title}" class="IIF({Tab.HasChildren}='True',parent)IIF({Tab.IsActive}='True', selected)">{Tab.Name}</a> ]] [Level4-Container[ <ul> ]] [Level4-Item[ <li> ]] [Level4-Anchor[ <a href="{Tab.Url}" title="{Tab.Title}" class="IIF({Tab.HasChildren}='True',parent)IIF({Tab.IsActive}='True', selected)">{Tab.Name}</a> ]] [/Level4-Item[ </li> ]] [/Level4-Container[ </ul> ]] [/Level3-Item[ </li> ]] [/Level3-Container[ </ul> ]] [/Level2-Item[ </li> ]] [/Level2-Container[ </ul> ]] [/Level1-Item[ </li> ]] [/Level1-Container[ </ul> ]] [/Level0-Item[ </li></td> ]] [/NavMenu-Container[ </tr></table></ul></div> ]]
-- And heres the CSS. -- Code: #nav {width: 100%;height: 50px; margin:0 auto;} #nav ul {float: left;width: 100%;list-style: none;margin: 0;padding: 0; line-height: 17px;} #nav ul li.tab ul {} #nav a {display: block;color: #fff; text-decoration: none;padding: 0px; background:none;} #nav li {float: none;padding: 0;background:none;list-style: none;} #nav ul li {float: none;text-align:center;padding: 0;background:none;} #nav ul li.tab {margin:0;padding: 0px;} #nav ul li.tab a {padding:0px;text-decoration:none;} #nav ul li.tab ul.nontab li a {background-image:none;font-weight:normal;} #nav ul li.tab ul.nontab li a.parent {background: url("menu-arrow.gif") center right no-repeat;} #nav ul li ul { background: url(images/submenubg.png) ; border-left: 2px dotted #FFFFFF; border-right: 2px dotted #FFFFFF; border-bottom: 2px dotted #FFFFFF; z-index: 99;} /* Submenu Main Container */ #nav ul li.tab ul.nontab { margin-left: -5px; } #nav ul li ul li { color: #FFFFFF; padding-left: 5px; padding-top: 2px; padding-bottom: 2px; text-align:left; border:none; margin-left:0;} /* Submenu Items */ #nav li ul {position: absolute;left: -999em;height: auto;width: 150px; font-weight: normal;margin: 0;padding: 0;} #nav li li { } #nav li ul a { text-align:left; background:none;} #nav li ul ul {margin: -1.75em 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;} #nav ul li ul li:hover, #nav ul li ul li.sfhover { background:url(images/submenubgover.png) ; color:# F00;} /* Submenu Items on Hover */ #nav ul li.tab ul.nontab li a:hover {color:#F00;} #nav li.tab:hover, #nav li.tab:hover a { background-position:0% -30px;color: #FFFFFF;} /* base links */ #nav li.tab:hover a {background-position:100% -30px;}
-- Any help will be greatly appreciated guys. Hi everyone, So I'm implementing the suckerfish dropdown into one of my sites. I'm having a bit of trouble getting something to work correctly. I did most of the grunt work on getting it customized, but I was hoping someone could help me figure out a few minor details. The version of the drop down I had to make has images for the top level (main level) of the navigation, and each image is a unique size. In doing so, as well as adding padding to the second level li for aesthetic purposes, in IE the menu doesn't drop but floats over to the right. I'm not sure why this is. Also, I know this may be more fit for the JavaScript area, and I'll repost there if necessary, but I'd like to keep the top level image in the "over" state while the cursor is on that 2nd level dropdown. Is that possible? I'll be anxious for your feedback, this has been driving me crazy all day. Here's the code. XHTML: Code: <div id="nav"> <ul> <li class="one"><a href="#"><img src="images/home.gif" /></a></li> <li class="two"><a href="#" onmouseover="document.two.src='images/nav-our_products_on.gif';" onmouseout="document.two.src='images/nav-our_products_off.gif';"><img name="two" src="images/nav-our_products_off.gif" /></a> <ul> <li><a href="#">sublink 1</li></a> <li><a href="#">sublink 2</li></a> </ul> </li> </ul> </div> CSS Code:
#nav {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #67670f;
}
#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav ul li.one {
float: left;
margin: 0;
padding: 0;
width: 51px;
list-style: none;
}
#nav ul li.one img {
border: 0;
}
#nav ul li.two {
float: left;
margin: 0;
padding: 0;
width: 118px;
list-style: none;
position: relative;
}
#nav ul li.two img {
border: 0;
}
/* - begin level 2 - */
#nav ul li ul {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
left: -999em;
border: solid 1px #ddd;
width: 118px;
voice-family: "\"}\"";
voice-family:inherit;
width: 116px;
}
#nav ul li ul li a {
display: block;
padding: 3px 0 3px 3px;
margin: 0;
color: #67670f;
text-decoration: none;
width: 118px;
voice-family: "\"}\"";
voice-family:inherit;
width: 113px;
}
#nav ul li.two ul li a:hover {
color: #52432c;
background-color: #e4e2db;
text-decoration: none;
}
#nav ul li:hover ul, #nav ul li.sfhover ul {
left: auto;
}
JavaScript Code:
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
It seems that in IE something isn't being cleared, as it almost appears that the second level is in place directly next to the top level link that is activating the dropdown menu. I look forward to your insight! Thanks! -Brian This method is just awesome, but how on earch does someone get the font color to stay on its hover state? http://htmldog.com/articles/suckerfish/dropdowns/ This should be a sticky and lets solve this problem together. This question is always asked but never answered. hey guys, im not the greatest with css and html but i do it for fun to try and teach myself. Anyways I have a css drop menu set up on my site and I am having a problem with the width sizes in the actual drop down. The text length is of various sizes in the drop down. (some are long single words, some are 2 words etc) and I am using a width size of 11em which in all browsers using a standard screen res shows up fine. but if somebody uses a smaller screen res the text starts wrapping. Where you get the 2 word lines split into 2 lines. and then If i increase the size sometimes I get separate <li>'s on the same line. Its pretty frustrating. What I want to do is be able to increase the width size of the drop menu and even have all kinds of extra padding on the right if I want but without <li>'s spilling onto the next line or without <li>'s sitting on the same line cause its too big. Here is my CSS for the drop. Code: #nav li ul {
background: #FCDFFF;
background-image: url('images/background.png');
border-style: ridge;
border-width: 5px;
border-color: #000000;
margin-top: 0px;
position: absolute;
font-size: 95%;
width: 11em;
left: -999em;
line-height: 2;
z-index: 999;
}
anybody know how I can do what Im looking for? Thanks in advance! So I'm a student working on my first real project. I've done Suckerfish drop-downs before, but I'm having trouble doing them with graphic text instead of system text. The image replacement works fine on the first level, but the nested li's just repeat the image of the main li. For example, the main nav item with the drop-down is "Our Coffee". In the drop-down menu instead of having the different images for the corresponding links, "Our Coffee" is repeated. Here's a selection of my code where I think the problem is happening: Code: <div id="nav">
<ul id="dd">
<li id="hm"><a href="menu.html">Menu</a></li>
<li id="au"><a href="about_us.html">About Us</a></li>
<li id="oc"><a href="#">Our Coffee</a>
<ul>
<li id="oc_dd_ko"><a href="oc_kona.html">Kona</a></li>
<li id="oc_dd_ma"><a href="oc_maui.html">Maui</a></li>
<li id="oc_dd_ka"><a href="oc_kauai.html">Kauai</a></li>
</ul>
</li>
<li id="os"><a href="os_hy.html">Our Stores</a></li>
<li id="ols"><a href="online_store.html">Online Store</a></li>
<li id="oct"><a href="our_culture.html">Our Culture</a></li>
</ul>
</div>
Code:
#nav ul li ul li a {
display: block;
height: 0px;
overflow: hidden;
}
#dd li#oc a {
display: block;
width: 95px;
}
#dd li#oc {
float: left;
width: 95px;
}
#dd li#oc ul {
position: absolute;
width: 95px;
left: -9999px;
}
#dd li#oc:hover ul {
left: auto;
}
#dd li#oc:hover ul, #dd li.sfhover ul {
left: auto;
}
li#oc ul li a {
height: 0px;
display: block;
overflow: hidden;
}
#oc_dd_ko a {
background: url(../images/oc_ddnav-01_lo.gif) no-repeat;
padding-top: 13px;
width: 58px;
}
#oc_dd_ko a:hover {
background: url(../images/oc_ddnav-01_hi.gif) no-repeat;
padding-top: 13px;
width: 58px;
}
#oc_dd_ma a {
background: url(../images/oc_ddnav-02_lo.gif) no-repeat;
padding-top: 15px;
width: 58px;
}
#oc_dd_ma a:hover {
background: url(../images/oc_ddnav-02_hi.gif) no-repeat;
padding-top: 15px;
width: 58px;
}
#oc_dd_ka a {
background: url(../images/oc_ddnav-03_lo.gif) no-repeat;
padding-top: 16px;
width: 58px;
}
#oc_dd_ka a:hover {
background: url(../images/oc_ddnav-03_hi.gif) no-repeat;
padding-top: 16px;
width: 58px;
}
#dd, #dd ul {
padding: 0;
margin: 0;
list-style: none;
}
Any suggestions would be appreciated. Hi all, The following CSS and HTML work fine in Mozilla, Netscape and Firefox. It can be viewed in action at: http://www.sirfragalot.com/wikindx2/ (choose the 'chocolate vanilla fudge sundae' from the Wikindx/preferences menu.) I have two questions: 1/ I'm aware that Konqueror does not support CSS drop-downs. It doesn't concern me as I've programmed a way around it. However, the menu items occasionally stack up vertically on the left side of the browser window: they're supposed to be horizontal. This stacking and subsequent un-stacking seems to be quite random. What's the fix? 2/ In IE, the drop-downs are rendered from the bottom right corner of the originating top menu item (they should be directly underneath). What is the fix? HTML CODE: Code: <!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" xml:lang="en" lang="en">
<!-- begin header template (+ 3 lines up!) -->
<head>
<title>WIKINDX</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="chocolate.css" type="text/css" />
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
</head>
<body>
<!-- begin menue template -->
<table class="menuTable" border="0" cellspacing="0" cellpadding="0" align="left">
<tr class="" align="left" valign="top">
<td class="" align="right" valign="top">
<ul id="nav">
<li><a class="menuLi" href="index.php?action=frontNoMenu">Wikindx</a>
<ul>
<li><a class="menu" href="index.php">Home</a></li>
<li><a class="menu" href="index.php?action=preferencesDisplay">Preferences</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=fileNoMenu">File</a>
<ul>
<li><a class="menu" href="index.php?action=exportRtf">Export RTF</a></li>
<li><a class="menu" href="index.php?action=exportBibtex">Export BibTeX</a></li>
<li><a class="menu" href="index.php?action=showFiles">Show Files</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=editNoMenu">Edit</a>
<ul>
<li><a class="menu" href="index.php?action=editCreator">Creator</a></li>
<li><a class="menu" href="index.php?action=editJournal">Journal</a></li>
<li><a class="menu" href="index.php?action=editPublisher">Publisher</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=resourceNoMenu">Resources</a>
<ul>
<li><a class="menu" href="index.php?action=listDisplay">List</a></li>
<li><a class="menu" href="index.php?action=searchDisplay">Search</a></li>
<li><a class="menu" href="index.php?action=selectDisplay">Select</a></li>
<li><a class="menu" href="index.php?action=resourceNew">New</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=textNoMenu">Text</a>
<ul>
<li><a class="menu" href="index.php?action=allMusings">Musings</a></li>
<li><a class="menu" href="index.php?action=randomMusing">Random Musing</a></li>
<li><a class="menu" href="index.php?action=allParaphrases">Paraphrases</a></li>
<li><a class="menu" href="index.php?action=randomParaphrase">Random Paraphrase</a></li>
<li><a class="menu" href="index.php?action=allQuotes">Quotes</a></li>
<li><a class="menu" href="index.php?action=randomQuote">Random Quote</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=adminNoMenu">Admin</a>
<ul>
<li><a class="menu" href="index.php?action=superadminLogonDisplay">Logon</a></li>
</ul>
</li>
<li><a class="menuLi" href="index.php?action=helpNoMenu">Help</a>
<ul>
<li><a class="menu" href="index.php?action=helpDisplay">Wikindx Help</a></li>
<li><a class="menu" href="index.php?action=aboutWikindx">About Wikindx</a></li>
</ul>
</li>
</ul>
</td>
</tr>
</table>
<br />
<!-- end menu template -->
</body>
<!-- end footer template (+ 1 line down!) -->
</html>
CSS CODE: Code: body {
background : #74664a;
font-family : sans-serif;
font-size : 0.9em;
color : #f6eedf;
}
/* SuckerFish CSS drop down style */
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav a {
display: block;
width: 7em;
}
#nav li {
float: left;
width: 7em;
background : red;
}
#nav li ul {
position: absolute;
width: 7em;
left: -999em;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
/* End Suckerfish Style */
/* Standard links such as top menu links */
A:visited, A:link, A:active {
text-decoration : none;
color : #74664a;
background : #efd197;
border-left : 1px groove #f6eedf;
border-top : 1px groove #f6eedf;
border-right : 1px groove #f6eedf;
border-bottom : 1px groove #f6eedf;
font-size : 0.9em;
}
A:hover {
text-decoration : none;
background : #f6eedf;
color : #74664a;
border-left : 1px groove #f6eedf;
border-top : 1px groove #f6eedf;
border-right : 1px groove #f6eedf;
border-bottom : 1px groove #f6eedf;
font-size : 0.9em;
}
/* .menu = submenu links */
A.menu:visited, A.menu:link, A.menu:active {
text-decoration : none;
color : #74664a;
display : block;
border-bottom : 1px solid #f6eedf;
width : 6em;
background : #efd197;
font-size : 0.9em;
text-align : left;
}
A.menu:hover {
text-decoration : none;
background : #f6eedf;
display : block;
color : #74664a;
border-bottom : 1px solid #f6eedf;
width : 6em;
font-size : 0.9em;
text-align : left;
}
/* normal links and paging links */
A.link:visited, A.link:link, A.link:active, A.page:visited, A.page:link, A.page.active {
text-decoration : none;
color : red;
background : transparent;
border : none;
}
A.link:hover, A.page:hover {
text-decoration : none;
background : #f6eedf;
color : #74664a;
border : none;
border : none;
}
/* resource links for resource URLs */
A.rLink:visited, A.rLink:link, A.rLink:active {
text-decoration : none;
background : transparent;
color : #f6eedf;
border : none;
}
A.rLink:hover {
text-decoration : none;
background : #f6eedf;
color : #74664a;
border : none;
border : none;
}
/* image links */
A.imgLink:visited, A.imgLink:link, A.imgLink:active {
text-decoration : none;
background : transparent;
border : none;
}
A.imgLink:hover {
text-decoration : none;
background : transparent;
border : none;
}
/*****
* .titleTable: the table containing the title bar
*****/
.titleTable {
width : 90%;
}
/*****
* .menuTable: the table containing the drop-down menus
*****/
.menuTable {
margin : 0 0 0 5%;
}
/*****
* .menuLi: text-color in list items of the drop-down menus
*****/
.menuLi {
color : black;
}
/*****
* .mainTable: the table containing the main content of WIKINDX
*****/
.mainTable {
border : none;
width : 90%;
padding : 0.2em;
clear : both;
}
/*****
* redefine HTML headings - see /core/html/MISC.php
*****/
h1, h2, h3, h4 {
color : #f6eedf;
margin : 0 0 1em 0;
}
/*****
* .footerFooter: footer information at end of script - part of a table
*****/
.footerTable {
font-size : 0.6em;
color : #f6eedf;
width : 90%;
}
/*****
* .error: <p>error messages</p>
*****/
.error {
background : red;
color : black;
}
/*****
* .success: <p>success messages</p>
*****/
.success {
background : #33ff00;
color : black;
}
/*****
* .small: small text
*****/
.small, .hint {
font-size : 0.8em;
}
/*****
* .hint: text hints given to provide further information usually on form input. Often used in conjunction
* with .small and usually the class of <span>....</span>
*****/
.hint {
color : #f6eedf;
}
/*****
* alternate background colours and font sizes for <td>resources</td> in a bibliographic list
*****/
.alternate1 {
/* background : #efd197; */
/* background : #f8efdf; */
border : 2px groove #583b04;
font-size : 0.9em;
color : #f6eedf;
}
.alternate2 {
/* background : #ede5d8; */
/* background : #f6eedf; */
border : 2px groove #583b04;
font-size : 0.9em;
color : #f6eedf;
}
/*****
* .highlight: highlight <span>search terms</span> in text
*****/
.highlight {
color : #583b04;
background : yellow;
}
/*****
* .required: highlighting for <span>required</span> form input elements (asterisk).
*****/
.required {
color : red;
}
Hi All, I seem to have made a mistake in installing a CSS drop-down menu b/c despite my best efforts, I cannot seem to make it work in Internet Explorer. I am using the Suckerfish method found http://www.alistapart.com/articles/dropdowns My CSS file is here And a sample page can be found here Does anyone see a mistake I made? All other browsers work beautifully, so the problem must lie in the Internet Explorer hack. I am very new to this whole css thing, but am trying to get all learned about it. I think I am doing badly so far. I am trying to make css drop-down menus, and have pulled code from all over the place, and modified it to look correct (so as to match my design comp). it is based on the suckerfish model <http://www.alistapart.com/articles/dropdowns/> and it works exactly as it should in safari, firefox (mac & pc). but doesn't work correctly at all in IE (mac or pc). I have implemented the "ie fix" with the javascript code several sites instructed me to use, and while it now sorta works (in the sense that the menus drop down), there are still problems. such as in IE on pc you can't roll down to the drop down menus, because they go away as soon as you roll off the top menu item. in IE on mac they are messed up in a whole other way. you can roll down to them, and they don't go away as soon as you're off the top nav option, but the hover is all jacked, and the menu is broken, sending the last nav button down to the next line! aaahhh! can anyone help me?! I'm sorry I'm so stupid and helpless, but... well. I am. any tips/etc would be mighty appreciated! -daniel OK, so I think I'm smart, but I guess not. I have this site http://jwdev.ocis.net I have been working on. It has implemented a CSS only drop down menu system. The problem. No mater what I do, including clear: left/z-index - the drop down menu "PROJECTS" falls under the page content in Firefox. For a first, this works in IE flawlessly. The CSS is a disaster right now as I have been hammering at it for days. Anyone lend a hand? I have added drop-down menus, but they are not appearing directly underneath the originating links. They are WAY off to the right. I can't figure out why for the life of me. Help, please? http://www.bartlett-family.net/BBCON Chris Hi guys, I recently learned about pure css drop down menus. Now if you look at my site in FF, and IE, you see in IE, it just doesn't display correctly. Why is this? Tips on fixing this? www.projectfinalfantasy.com Regards, Joseph Man. @kravvitz You have any idea how to do this? I can do it in all browsers except ie6, but I have no idea how to make ie6 comply... |
|||||||