|
CSS - Pure Css Flyout/dropdown Menus.
Hi there.
I'm developing a website using Wordpress as the major CMS, it uses a navigation plugin called NAVT which makes dynamic navigation menus and allows you to nest some links under other links. Click here to see how it outputs the HTML. Basically it's a series of unordered lists inside other unordered lists, cluttered with various classes (none of them used by the plugin itself). So basically I want to turn that into a pure CSS only flyout/dropdown menus, I've seen code flying around but with all those classes that NAVT applies I'm struggling to adapt it. Has anyone done something similar to this? Cheers, Similar TutorialsHi, At work I have to do popup menus (I hate them), so I am trying with all I have to not use Javascript. I have the following working using just CSS and HTML: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title>Pure CSS Popups</title>
<style type="text/css">
body
{
font-family: Arial;
}
div#menubar
{
background-color: steelblue;
font-weight: bold;
}
div#menubar a.menuhead
{
position: relative;
text-decoration: none;
margin-right: 18pt;
color: darkblue;
}
div#menubar a.menuhead:hover
{
color: white;
background-color: darkblue;
}
div#menubar a.menuhead div.menu
{
visibility: hidden;
position: absolute;
left: 0;
top: 1em;
width: 15em;
background-color: steelblue;
border: 2px solid darkblue;
}
div#menubar a.menuhead:hover div.menu
{
visibility: visible;
}
div#menubar a.menuhead div.menu div.menuitem
{
width: 100%;
cursor: pointer;
background-color: steelblue;
border-bottom: 1px solid darkblue;
}
div#menubar a.menuhead div.menu div.menuitem:hover
{
background-color: darkblue;
}
div.menuitem a
{
}
</style>
</head>
<body>
<div id="menubar">
<a class="menuhead" href="">Menu 1
<div class="menu">
<div class="menuitem">Menuitem 1</div>
<div class="menuitem">Menuitem 2</div>
<div class="menuitem">Menuitem 3</div>
<div class="menuitem">Menuitem 4</div>
<div class="menuitem">Menuitem 5</div>
</div>
</a>
</div>
</body>
</html>
Now what I want to do is put real hyperlinks inside of the menuitem divs. However, when I do so it messes up for some strange reason in both Firefox and IE. If someone could tell me why I would GREATLY appreciate it. Code:
<div id="menubar">
<a class="menuhead" href="">Menu 1
<div class="menu">
<div class="menuitem">Menuitem 1</div>
<div class="menuitem">Menuitem 2</div>
<div class="menuitem"><a href="">Menuitem 3</a></div>
<div class="menuitem">Menuitem 4</div>
<div class="menuitem">Menuitem 5</div>
</div>
</a>
</div>
In Firefox, the menu items after the one with the hyperlink no longer format correctly, and the menu also becomes part of the menubar. In IE it looks ok, but when the mouse is moved over the menuitem hyperlink the menu goes away. In both, the menuitem divs get shrunk down to the width of the text. Any ideas??? 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. Hi there, I'm working my way through html, css and web design at the moment, and looking at drop down menus. Currently I'm looking at css only menus, I haven't delved into javascript yet. So I I've got a few questions regarding what I've currently got: html4strict Code: Original - html4strict Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hello</title> <link type="text/css" rel="stylesheet" media="screen" href="default.css" /> </head> <body> <div id="navbar"> <ul> <li><a href="#">Main Page</a></li> <li><a href="#">About</a></li> <li><a class="dropmenu"><a href="#">Tutorials</a> <ul> <li><a href="#">Photoshop</a></li> <li><a href="#">Dreamweaver</a></li> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> </ul> </a></li> <li><a class="dropmenu"><a href="#">Articles</a> <ul> <li><a href="#">3 column magic</a></li> <li><a href="#">Site layouts</a></li> <li><a href="#">Creating Navbars</a></li> </ul> </a></li> <li><a href="#">Links</a></li> </ul> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> css Code: Original - css Code @charset "utf-8"; /* CSS Document */ #navbar ul { padding: 0; margin: 0; list-style: none; background-color: #3F9; width: 120px; } #navbar li { position: relative; } #navbar li li { position: static; } #navbar ul ul { background-color: #7B5; top: 0; left: 120px; display: none; position: absolute; } #navbar a { text-decoration: none; text-align: center; display: block; padding: 5px 10px; } #navbar a.dropmenu { padding: 0; margin: 0; border: none; display: block; } #navbar li:hover ul, #navbar a.dropmenu:hover ul { display: block; } #navbar a:hover, #navbar li:hover { color: #000; background-color: #3CF; } #navbar li:hover li:hover { background-color: #F04; } @charset "utf-8"; So its currently a vertical flyout menu, I'll be looking at horizontal drop down ones soon. Regarding the last css rule, I was just experimenting with presentation and was wondering if I could make the second level of menus have a different hover background colour than that of the initial menu. Is it just something I've got wrong with the selector (#navbar li:hover li:hover)? The 2nd, more puzzling thing, is that you can see in the first menu, only the text comes up as a hyperlink (or clickable). In the second level menus, the whole area of the li (being an a element displayed in block mode) is clickable. I am pretty sure this is a result of setting the position property of the the li elements to relative. I have set the li elements to static (default) in the second menu, and as noted, they work fine (or more desirably). Why does changing the position property of the li to relative suddenly stop it from being clickable? The relative positioning is needed to correctly position the second level uls (menus), unless there is another way to do that. BTW Currently looking at it with ie7 at the moment. What's going on here? Lastly, I was hoping my a.dropmenu elements would let ie6 display the menu; sadly this doesn't seem to be happening. Again, any ideas what's gone wrong? Hi, I am hoping someone can help me please. I am looking for some code (CSS, PHP or otherwise) to be able to create a drop down menu (with flyout) on mouseover of some pre-existing pictures. I have tried to take some codes which "sort of" do what I need but I'm unable to modify them to do what I need them to. It seems like the varying widths of the PNGs is a sticking point. At the minute I have a navigation bar consisting of 5 PNGs of same height but different widths. I had intended it to work so that when you click on these top links you are given a page for that section, and along the top of that page are "sub links". However, I have changed my mind and would like to keep the current images, but on rollover have a drop down menu appear with the different "sub links" instead of having them on the top of each page. For example I have a PNG which says "About Clan Wars". I would like a mouseover to show a Dropdown with flyout like: >What Is Clan Wars? >What are the rules ----> D Class Rules ----> C Class Rules >Clan Wars 1 ----> Fight Card ----> Pictures ----> Videos >Clan Wars 2 ----> Fight Card ----> Pictures ----> Videos I hope that makes sense to whoever is reading. Thank you Sean Hi folks Looking for a pure css dropdown menu to replace my dhtml one, I do very much like the Adx menu, as compared with suckerfish, for reasons which include: covers select and flash items on the page can colorise the hover background color right across the menu, giving a sense of link hierarchy on a narrow page, the final menu will double back on itself, and also reposition itself vertically if needed I've managed to solve one issue that their code did not seem to, if anyone is interested - removing the space between li items which IE creates - feel free to use the code he http://ied.gospelcom.net/adxmenustest2.html (I've just chosen some garish colors for the moment, so I can see what is going on.) One thing I want to do is add drop shadows. Right hand is OK - just a background image. To achieve a bottom drop shadow, I've added a small li item with a background image. Problem is, adding this extra li item at the end of each menu extends the length of the UL container, considerably more than is needed. In FF, it looks OK, (though there are a few unnecessary pixels above the shadow li item, but in IE, it extends way down below where the drop shadow li item is! Any ideas for removing this extra depth, ie pushing the ul border up, or another way of putting in a drop shadow. I have tried other things as well as an end li item, but the effect is the same! I suppose I could cover it up instead, but a css solution to do it properly would be better! Thanks for your wisdom! Tony I've created my first attempt at a pure CSS drop-down menu using an AlistApart article as a guide. It works great in Firefox, but in IE the menu's are reloading the background image and the list bullet images each time you move to a new link in the drop down. The page is here Any ideas? Here is the CSS for the Menu (not cleaned up so pardon it's rag-tagness): Code: ul {
padding: 0;
margin: 0;
list-style: none;
}
/* First Level */
li {
float: left;
position: relative;
width: 10em;
}
li#first {
border-left-width: 2px;
}
li#last {
border-right-width: 2px;
}
/* Second Level -- Drop Downs */
li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: url(../images/backgroundvert.gif) bottom left no-repeat;
padding: 3px 0 3px 8px;
border-right: solid 1px #777777;
}
/* Reset for all non-IE Browswers*/
li > ul {
top: auto;
left: auto;
}
/* Show Second Level when First Level is Rolled Over */
li:hover ul, li.over ul{ display: block; }
a {
text-decoration: none;
}
a:link {
color: #080;
}
a:visited {
color: #790;
}
a:active {
color: red;
}
a:hover {
text-decoration: underline;
}
#nav a {
font-weight: bold;
color: #149AF1;
font-size:13px;
}
#nav a {
text-decoration: none;
}
/* Drop Down Menu Links */
#nav li li a {
display: block;
font-weight: normal;
color: #149AF1;
padding: 0.2em 10px 0 15px;
background-image:url(../images/bullet.gif);
background-repeat:no-repeat;
}
#nav li li a:hover {
padding: 0.2em 10px 0 15px;
background-image:url(../images/bullet2.gif);
background-repeat:no-repeat;
text-decoration: underline;
}
#navs {
border:1px 0 0 0;
border-right: 0;
width: 100%;
padding-left:4px;
height:20px;
padding-top:3px;
}
.nonlink {
font-weight: bold;
color: #149AF1;
font-size:13px;
cursor:default;
}
In today's Website Development world, which kind of Drop Down menus do the pro's prefer to use, pure CSS without Javascript or CSS with Javascript? And also, can pure CSS Drop Down menus be used in Dynamic Websites? Thank you. Hi there, I'm trying to integrate some SEO friendly dropdown menus into an existing website design. The trouble I'm experiencing so far is that the body of the design is aligned centre, and most of the examples I've seen thus far use absolute positioning of <div> elements (i.e. the design is left-aligned, so the designer knows to position the dropdown div X pixels). Is there a good reference I can use for positioning my divs properly? Thanks Im trying to make my site into a CSS layout with dropdown menus. The layout was fine untill i implemented the dropdown menu. Now the center window area is broken. 1. Why is this happening and whats the solution? 2. How can I make the navigation bar extend across the full length of my page area? http://www.nevertap.com/float/ Hi I would like to know where should I go to get an easy, small script so that I can use multi-level drop down menus in my website? I googled and came up with a supposed menu framework.. it looked easy but when I tried it, it didnt work.. I've got a client that wants me to do a website for him. He wants his links to have other links appear on rollover...I'm sure I can use CSS to do this, and if not that then JS, but what is the best way to do this?? Should I use images?? Text with shading behind it??? I'm not new to web design, but I've never needed to this before and am a little at a loss as to how to start out on this one... So I've been doing dropdown menus my "own" way for a while now, but I know it's not the best way. Basically, if I have a row of main links with dropdowns, I put the hidden DIVs in a final cell at the end of the row, and then use negative positioning to move them back over to the left. This almost always works, because IE, Firefox, and even Safari seem to be on the same page as far as how wide the previous cells to the left get pushed based on the text inside them. So they always line up pretty perfectly underneath where I want them. But I know there's a "better" way, because I have to define to the exact pixel how much I should move the hidden DIVs to the left. CMS's, of course, drop the links underneath automatically. In my previous attempts to do this, by say, putting the hidden DIVs inside the table cells that contained the top most link, the spacing always got funky, especially between browser types. Can someone give me the most dumbed-down, simplest version of a drop down menu that is created using best practices? Here's my version, FYI, that works, but of course requires you to specify how much to move each dropdown DIV to the left: Code:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><div id="about_button" style="height: 35px; padding: 0px 26px 0px 26px; text-align:center; cursor:pointer" onMouseOver="this.style.backgroundImage='url(images/links_back_h.gif)';document.getElementById('about_menu').style.visibility='visible'" onMouseOut="this.style.backgroundImage='';document.getElementById('about_menu').style.visibility='hidden'" onClick="window.location='about.php'"><div style="padding-top: 8px"><a href="history.php" class="links">About Us</a></div></div></td>
<td><div id="news_button" style="height: 35px; padding: 0px 26px 0px 26px; text-align:center; cursor:pointer" onMouseOver="this.style.backgroundImage='url(images/links_back_h.gif)';document.getElementById('news_menu').style.visibility='visible'" onMouseOut="this.style.backgroundImage='';document.getElementById('news_menu').style.visibility='hidden'" onClick="window.location='news.php'"><div style="padding-top: 8px"><a href="news.php" class="links">News</a></div></div></td>
<td>
<nobr>
<div style="position: relative; z-index: 500; font-family: 'Trebuchet MS'; font-size: 13px">
<div style="color: #ffffff; position: absolute; visibility: hidden; z-index: 500; left: -634px; top: 17px; cursor: pointer; cursor: hand; font-family:'Trebuchet MS'; font-size: 12px; font-weight: bold; text-align: left" id="about_menu" onMouseOut="javascript: getElementById('about_menu').style.visibility='hidden'; document.getElementById('about_button').style.backgroundImage=''" onMouseOver="javascript: getElementById('about_menu').style.visibility='visible'; document.getElementById('about_button').style.backgroundImage='url(images/links_back_h.gif)'">
<div style="width: 180px; padding-left: 12px; padding-bottom: 5px; padding-top: 9px; padding-right: 12px; background-color:#013E66; text-align: left" onClick="window.location='history.php'" onMouseOver="this.style.backgroundColor='#012841'" onMouseOut="this.style.backgroundColor='#013E66'">Our History</div>
<div style="width: 180px; height: 1px; padding-left: 12px; padding-right: 12px; background-image:url(images/divider.gif); background-position: top; background-repeat:repeat-x; text-align: center"><img src="images/spacer.gif"></div>
<div style="width: 180px; padding-left: 12px; padding-bottom: 5px; padding-top: 5px; padding-right: 12px; background-color:#013E66; text-align: left" onClick="window.location='people.php'" onMouseOver="this.style.backgroundColor='#012841'" onMouseOut="this.style.backgroundColor='#013E66'">Directors/Delegates</div>
<div style="width: 180px; height: 1px; padding-left: 12px; padding-right: 12px; background-image:url(images/divider.gif); background-position: top; background-repeat:repeat-x; text-align: center"><img src="images/spacer.gif"></div>
<div style="width: 180px; padding-left: 12px; padding-bottom: 5px; padding-top: 5px; padding-right: 12px; background-color:#013E66; text-align: left" onClick="window.location='sponsorship.php'" onMouseOver="this.style.backgroundColor='#012841'" onMouseOut="this.style.backgroundColor='#013E66'">Corporate Sponsorship Program</div>
<div style="width: 180px; height: 1px; padding-left: 12px; padding-right: 12px; background-image:url(images/divider.gif); background-position: top; background-repeat:repeat-x; text-align: center"><img src="images/spacer.gif"></div>
<div style="width: 180px; padding-left: 12px; padding-bottom: 5px; padding-top: 5px; padding-right: 12px; background-color:#013E66; text-align: left" onClick="window.location='contact.php'" onMouseOver="this.style.backgroundColor='#012841'" onMouseOut="this.style.backgroundColor='#013E66'">Contact Us</div>
</div>
</div>
<div style="position: relative; z-index: 500; font-family: 'Trebuchet MS'; font-size: 13px">
<div style="color: #ffffff; position: absolute; visibility: hidden; z-index: 500; left: -524px; top: 17px; cursor: pointer; cursor: hand; font-family:'Trebuchet MS'; font-size: 12px; font-weight: bold; text-align: left" id="news_menu" onMouseOut="javascript: getElementById('news_menu').style.visibility='hidden'; document.getElementById('news_button').style.backgroundImage=''" onMouseOver="javascript: getElementById('news_menu').style.visibility='visible'; document.getElementById('news_button').style.backgroundImage='url(images/links_back_h.gif)'">
<div style="width: 130px; padding-left: 12px; padding-bottom: 5px; padding-top: 9px; padding-right: 12px; background-color:#013E66; text-align: left" onClick="window.location='whoweare.php'" onMouseOver="this.style.backgroundColor='#012841'" onMouseOut="this.style.backgroundColor='#013E66'">Congress</div>
<div style="width: 130px; height: 1px; padding-left: 12px; padding-right: 12px; background-image:url(images/divider.gif); background-position: top; background-repeat:repeat-x; text-align: center"><img src="images/spacer.gif"></div>
<div style="width: 130px; padding-left: 12px; padding-bottom: 5px; padding-top: 5px; padding-right: 12px; background-color:#013E66; text-align: left" onClick="window.location='whatwedo.php'" onMouseOver="this.style.backgroundColor='#012841'" onMouseOut="this.style.backgroundColor='#013E66'">Department of Justice</div>
<div style="width: 130px; height: 1px; padding-left: 12px; padding-right: 12px; background-image:url(images/divider.gif); background-position: top; background-repeat:repeat-x; text-align: center"><img src="images/spacer.gif"></div>
<div style="width: 130px; padding-left: 12px; padding-bottom: 5px; padding-top: 5px; padding-right: 12px; background-color:#013E66; text-align: left" onClick="window.location='contact.php'" onMouseOver="this.style.backgroundColor='#012841'" onMouseOut="this.style.backgroundColor='#013E66'">Federal Employees</div>
</div>
</div>
</nobr>
</td>
</tr>
</table>
This could be a tough one... I have trawled the search engines for a solution, but I don't think I'll find one. What I want to know is is it possible to create a dropdown navigation menu without using Javascript? I've seen an example of how it can be done with CSS, but the author said that it will not validate. Thanks in advance Andy I would first like to start out by stating that I hope I put this in the right forum. If it is a problem with my html, then obviously I am trying to fix the wrong things. I also hope that I am using the proper terminology or something close enough that you can understand. Anyway, here is my problem. I have created a website for a dog rescue group with no spare money. So they picked me to create a website. I knew nothing about how to do it so I have been teaching myself along the way. The woman in charge of the group decided that she wanted a flyout in the left navigation and tasked me with creating it. So after a lot of research I thought I had it. Alas, I did not. That brings me to you guys. Firefox Problems: The flyouts are not big enough. They do not expand to fix the words. It looks much like text wrapping. I can't figure this out because it works in IE When I add lists in the main portion of the page and add a third tier to it, a flyout box appears at the top of the page instead of the list. Also on the lists, clicking on a something linked, stretches a "you clicked on me" box across the entire length of the page. (sorry for a lousy description. I don't know the actual term.) IE Problems: The colored boxes that surround the two links that have the flyouts, have an extra line of color below the link. I am not sure what is causing this. On one flyout are two links. The top one is cut off immediately after the word even though the one below it is not. It has the same problem with the third tier of lists being in a flyout at the top of the screen that Firefox has. If this isn't the correct area of code let me know. Oh, and I validated both the XHTML and CSS. CSS: PHP Code: #nav ul { margin:10px 0 10px 5px; padding:0 0 0 0; background:transparent; } #nav li { list-style-type: none; position: relative; background:#B7D7AF; color: #daa520; border:1px solid #7DB26E; text-align:left; padding:0 0 0 0; margin-bottom:6px; vertical-align: bottom; } #nav li a { color: #ffffff; font-weight:bold; text-decoration: none; display: block; padding:2px 0 2px 5px; } #nav li a:hover { background:#ffffff; color: #7F9BC5; } #nav li a:hover:after { background:#ffffff; color: #7F9BC5; content: url(img/square.gif) } #active a { display: block; color: #FFF; background-color: #99CCFF; width: 15.65em; padding: .2em .8em; text-decoration: none; } .navholder { width: 8em; float: left; display: inline; margin: 15px 20px 5px 20px; } ul a { display: block; padding: 5px 10px; vertical-align: bottom; text-align: left; text-decoration: none; color: #552; } ul ul { position: absolute; left: -3000px; background: #fed; } li:hover {background: #ddf;} ul li:hover ul { left: 10em; top: 2px; } ul a:hover {text-decoration: underline;} /* \*/ /*/ ul li ul {position: static;} /* */ XHTML: PHP Code: <div class="wrapper"> <div class="navholder"> <div class="leftcontent" id="nav"> <img alt="bg image" src="img/left_bg_top.gif" /> <ul> <li id="active"><a href="index.html">Home</a></li> <li><a href="about_us.html">About Us</a></li> <li><a href="our_team.html">The Team</a></li> <li style="z-index: 10;"><a href="adoption_process.html">Adoption Process</a> <ul> <li><a href="our_dogs.html">Our Dogs</a></li> <li><a href="special_needs_dogs.html">Special Needs Dogs</a></li> </ul> </li> <li style="z-index: 9;"><a href="how_to_help.html">How To Help Us</a> <ul> <li><a href="how_to_help_volunteer.html">Volunteer</a></li> <li><a href="how_to_help_foster.html">Foster</a></li> <li><a href="how_to_help_other.html">Other Ways To Help</a></li> </ul> </li> <li><a href="helpful_information.html">Helpful Information</a></li> <li><a href="contact_us.html">Contact Us</a></li> </ul> I have screenshots I may be able to post later, in case I am not explaining the problem correctly or so you can see what it looks like on my computer. I am new so I am restricted until 5 posts. I am not sure if you can look on my homepage in my profile (which is the same one I am talking about here). It is test.html and doctors_office.css Any help would be great. If someone knows and easier way of do this would (if I took the long/hard way), that would be great, also. Thanks in advance from someone new at this. Hello, everyone. I'm a relative newcomer to CSS, and I decided I'd try and add a neat flyout menu to the new site I'm developing: www.mindwallpictures.com. As you'll notice, it works great in Firefox, but doesn't work at all in IE. Here is the CSS code from my site: Code:
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at (URL address blocked: See forum rules)
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.menu {
height:150px;
font-size:90%;
/* this page only */
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
position:relative;
z-index:500;
padding:0;
margin:0;
list-style-type:none;
width:150px;
}
/* style the list items */
.menu li {
background:#6b6b6b url(images/button.gif);
height:26px;
/* for IE7 */
float:left;
}
.menu li.sub {background:#6b6b6b url no-repeat right center;}
/* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}
/* style the links */
.menu a, .menu a:visited {
display:block;
text-decoration:none;
height:25px;
line-height:25px;
width:149px;
color:#FFF;
text-indent:5px;
border:1px solid #6b6b6b;
border-width:1px 1px 1px 1px;
}
/* hack for IE5.5 */
* html .menu a, * html .menu a:visited {width:150px;}
/* style the link hover */
* html .menu a:hover {color:#adbaad; background:#888d88; position:relative;}
.menu li:hover {position:relative;}
/* For accessibility of the top level menu when tabbing */
.menu a:active, .menu a:focus {color:#adbaad; background:#888d88;}
/* retain the hover colors for each sublevel IE7 and Firefox etc */
.menu li:hover > a {color:#adbaad; background:#888d88;}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu li ul {
visibility:hidden;
position:absolute;
top:-30px;
/* set up the overlap (minus the overrun) */
left:100px;
/* set up the overrun area */
padding:30px;
/* this is for IE to make it interpret the overrrun padding */
background:transparent url(transparent.gif);
}
/* for browsers that understand this is all you need for the flyouts */
.menu li:hover > ul {visibility:visible;}
/* make the second level visible when hover on first level link */
.menu ul a:hover ul {
visibility:visible;
}
</style>
and here is the html that goes with it: Code:
<div class="menu">
<ul>
<li><a href="index.html">MindWall Home</a></li>
<li class="sub"><a href="#nogo">News</a>
<ul>
<li><a href="news/recent/index.html">Recent News</a></li>
<li><a href="news/archives/index.html">News Archives</a></li>
</ul>
</li>
<li class="sub"><a href="#nogo">Films</a>
<ul>
<li><a href="films/rendezvous/index.html"><i>A Dreamer's Rendezvous</i></a></li>
<li><a href="films/millberg/index.html"><i>Millberg Apartments</i></a></li>
<li><a href="films/musicvids/index.html">Music Videos</a></li>
<li><a href="films/upcoming/index.html">Upcoming Projects</a></li>
</ul>
</li>
<li class="sub"><a href="#nogo">Links</a>
<ul>
<li><a href="http://www.mooseheadfilms.com">Moosehead Studios</a></li>
<li class="sub"><a href="#nogo">Purdue</a>
<ul>
<li><a href="http://www.purdue.edu">University Home Page</a></li>
<li><a href="http://www.cla.purdue.edu/film-studies/">Film Studies Program</a></li>
<li><a href="http://purduefvsnewsletter.blogspot.com/">FVS Newsletter</a></li>
</ul>
</li>
<li><a href="http://www.imdb.com">Internet Movie Database</a></li>
</ul>
</li>
<li class="sub"><a href="#nogo">About Us</a>
<ul>
<li><a href="about/mindwall/index.html">About MindWall Pictures</a></li>
<li><a href="about/awards/index.html">Awards & Recognition</a></li>
<li><a href="about/crewbio/index.html">Crew Biography</a></li>
</ul>
</li>
<li class="sub"><a href="#nogo">Contact Us</a>
<ul>
<li><a href="contact/mindwall/index.html">Contact MindWall</a></li>
<li><a href="contact/crew/index.html">Contact film crew</a></li>
</ul>
</li>
</ul>
</div>
It has been altered (by myself, the n00b) from the original code found at CSSplay: http://www.cssplay.co.uk/menus/flyout_4level.html It's bugging the crap out of me, and the guy wants the site done as early as next week. This is the one thing holding me back, since people...actually...use IE. -_- Poor souls. Any help would be greatly appreciated! Thanks. the following code works in opera and i think mozilla, but in ie only the top menu flies-out. the other two (a div in a table, and a table in a div) don't work. Any idea how to amend the css so they do work. I have tried setting the z-index to various things, so i dont think that's it. ...waiting to fly Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
--><HTML>
<HEAD>
<TITLE> New Document </TITLE>
<link rel="stylesheet" media="all" type="text/css" href="css/flyout2.css" />
<!--[if lte IE 6]>
<style>
.nav-head ul li a.hide, .nav-head ul li a:visited.hide {display:none;}
.nav-head ul li a:hover ul li a.hide {display:none;}
.nav-head ul li a:hover {color:#fcf; background:#36f;}
.nav-head ul li a:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;z-index:99;overflow:visible;}
.nav-head ul li a:hover ul li a.sub {background:#6a3; color:#fff;}
.nav-head ul li a:hover ul li a {display:fixed; background:#22e; color:#000;}
.nav-head ul li a:hover ul li a ul {visibility:hidden;}
.nav-head ul li a:hover ul li a:hover {background:#cc0; color:#0a0;}
.nav-head ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#955;}
</style>
<![endif]-->
</HEAD>
<BODY>
From code at <A HREF="http://www.cssplay.co.uk/menus/flyoutt.html">this site</A><BR>
<div class="nav-head">
<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>
<!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a>
<!--[if lte IE 6]>
<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK >
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
</div>
<!-- end 1 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1 -->
<TABLE width='30%' bgcolor='red'>
<TR>
<TD>
<div class="nav-head">
<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>
<!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a>
<!--[if lte IE 6]>
<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK >
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
</div>
</TD>
</TR>
</TABLE>
<!-- end 2 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1 -->
<div class="nav-head">
<TABLE bgcolor='yellow' width='250%' height='250%'>
<TR>
<TD>
<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>
<!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a>
<!--[if lte IE 6]>
<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK >
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
</TD>
</TR>
</TABLE>
</div>
</BODY>
</HTML>
I changed over all my CSS flyout menus from the CSSPlay method to the whatever:hover method. It's working great. I've just got a minor, but annoying, problem that occurs in IE (6 & 7 tested). URL 1 URL 2 Check out the left-side navigation menus on those two pages. Obviously they're different files, but the code is exactly the same for the menus (except the path for the links, of course). The pages even use the same stylesheet. So why, then, does the menu flutter when you hover over the "Our Dogs" <li> on the base level menu, but not move a pixel on the /dogs/ level menu? Here's the path to the stylesheet: Stylesheet 1 I have a vertical flyout menu setup on the left side of the page with the associated links arranged in vertical columns next to each menu selection. It is working fine 99% of the time but I am getting some reports that the vertical columns do not touch the main selection column so that when the user moves the cursor to the right to go to the selection list there is a break between the columns and the column disappears before a selection can be made. I have not been able to duplicate this on my IE8 and it works fine with Firefox. This makes it rather hard to trouble shoot so I am hoping someone else has had this problem and know what I am talking about. It seems to only happen to users with IE7 and IE8 but not most IE8 users. Is there perhaps some code I need to add to the CSS file that will solve this problem? THX Hello I hope somebody can help me. I have a newly designed home page for my website, which looks fine now in pretty well all browsers - but I've just started getting feedback from people looking at the site with ie, and they say that the flyout menu on the left of the page is obscured by the content in the centre column when it does its flying out thing. I've tried giving the menu elements z-index:100; but it doesn't seem to have made any difference. I would be really appreciative if anyone can help - it is even more difficult to work out as I don't have access to a machine with ie as a browser, and remote screen shots don't show up the problem... This is the page: http://www.independentliving.co.uk/index.shtml And this is the part of the style sheet for the menu: .menu { width:150px; position:relative; margin:0; font-size:11px; margin:0px 0; z-index:100; } .menu ul li a, .menu ul li a:visited { display:block; text-decoration:none; color:#003366; width:150px; height:25px; text-align:center; border:1px solid #fff; border-width:1px 1px 0 0; background:#003366 url(nav.gif); line-height:19px; font-size:11px; z-index:100; } .menu ul { padding:0; margin:0; list-style-type: none; z-index:100; } .menu ul li { float:left; margin-right:1px; position:relative; z-index:100; } .menu ul li ul { display:none; } /* specific to non IE browsers */ .menu ul li:hover a { color:#996600; background:#cccccc; font-size:11px; text-decoration:none; z-index:100; } .menu ul li:hover ul { display:block; position:absolute; top:0; left:150px; width:150px; z-index:100; } .menu ul li:hover ul li a.hide { background:#ffffff; color:#003366; font-size:11px; text-decoration:none; } .menu ul li:hover ul li:hover a.hide { width:150px; font-size:11px; text-decoration:none; } .menu ul li:hover ul li ul { display: none; } .menu ul li:hover ul li a { display:block; background:#cccccc; color:#996600; width:200px; font-size:11px; text-decoration:none; z-index:100; } .menu ul li:hover ul li a:hover { background:#dfc184; color:#666666; font-size:11px; text-decoration:none; z-index:100; } .menu ul li:hover ul li:hover ul { display:block; position:absolute; left:151px; top:0; color:#003366; font-size:11px; text-decoration:none; z-index:100; } .menu ul li:hover ul li:hover ul li a { display:block; width:200px; background:#dfc184; color:#003366; font-size:11px; text-decoration:none; z-index:100; } .menu ul li:hover ul li:hover ul li a:hover { background:#bd8d5e; color:#fff; font-size:11px; text-decoration:none; z-index:100; } Any ideas gratefully received! Thanks Frances I was wondering if anyone knows of any tutorials or resources for creating a menu system using css. The problem I have is that when I change the submenu's which are divs to display, they pop into place. I want to change this aspect and assume there is a javascript solution to make the display slow down, but have not been able to find one on this forum or using google. Perhaps a pointer or two? |
|||||||