...

View Full Version : CSS vertical menu/flyout help



chevy_ls_6
12-21-2010, 08:03 PM
I currently have a pure css horizontal menu, but my vertical menu is js backed, so I'm trying to switch it over to just css...but I'm struggling. I plucked this code from the same place I got my horizontal menu.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>

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

<style type="text/css">
.clearit {
margin: 0;
padding: 0;
height: 0;
clear: both;
}

/* BUBBLE PLASTIC VERTICAL MENU */

.bubplastic.vertical {
width: 125px;
margin: 0px;
padding: 0px;
display: block;
}
.bubplastic.vertical ul {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
.bubplastic.vertical ul li {
display: block;
float: left;
width: 100%;
margin: 0;
padding: 0;
background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat;
}

.bubplastic.vertical ul li a {
display: block;
margin: 0;
width: 100%;
padding-left: 35px;
text-transform: uppercase;
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 70%;
color: #FFFFFF;
text-decoration: none;
background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat;
}

.bubplastic.vertical ul li a span.menu_ar {
display: block;
margin: 0;
width: 100%;
height: 22px;
padding-top: 5px;
padding-right: 35px;
background: transparent url(images/bg-bubplastic-button.gif) top right no-repeat;
cursor: pointer;
}
/* END BUBBLE PLASTIC VERTICAL MENU */

/* GRAY HOVER */
.bubplastic.gray ul li a:hover,
.bubplastic.gray ul li.highlight a {
background: transparent url(images/bg-bubplastic-h-gray.gif) top left no-repeat;
}
.bubplastic.gray ul li a:hover span.menu_ar,
.bubplastic.gray ul li.highlight a span.menu_ar {
background: transparent url(images/bg-bubplastic-h-gray.gif) top right no-repeat;
}
</style>
</head>
<body>
<div class="menu bubplastic vertical gray">
<ul>
<li><span class="menu_r"><a href="http://oneschoolstreet.com/calendar.php?school_id=164&amp;yearID=2010&amp;monthID=12"><span class="menu_ar">Events Calendar</span></a></span></li>
<li><span class="menu_r"><a href="http://partnerpage.google.com/alton.k12.mo.us"><span class="menu_ar">Staff Email Login</span></a></span></li>
<li><span class="menu_r"><a href=" " ><span class="menu_ar">Plans and Policies</span></a></span>
<ul>
<li><span class="menu_r"><a href="http://policy.msbanet.org/alton/"><span class="menu_ar">School Board Policies</span></a></span></li>
<li><span class="menu_r"><a href="http://alton.k12.mo.us/school%20choice.pdf">Public School Choice</a></li>
<li><span class="menu_r"><a href="http://alton.k12.mo.us/SES.pdf">Supplemental Educational Services</a></li>
<li><span class="menu_r"><a href="http://alton.k12.mo.us/4th%20Cycle%20CSIP%2007.doc">Comprehensive School Improvement Plan</a></li>
<li><span class="menu_r"><a href="http://alton.k12.mo.us/4th%20Cycle%20CSIP%20Goals%20and%20Objectives.doc">Comprehensive School Improvement Goals</a></li>
<li><span class="menu_r"><a href="http://alton.k12.mo.us/techplan06-09.doc">Technology Plan</a></li>
</ul></li>
<li><span class="menu_r"><a href=" "><span class="menu_ar">Directories</span></a></span>
<ul>
<li><span class="menu_r"><a href="http://alton.k12.mo.us/elemfaculty.htm">Elementary Administration and Faculty</a></li>
<li><span class="menu_r"><a href="http://alton.k12.mo.us/hsfaculty.htm">High School Administration and Faculty</a></li>
</ul></li>
<li><span class="menu_r"><a href="#"><span class="menu_ar">Handbooks</span></a></span>
<ul>
<li><span class="menu_r"><a href="http://alton.k12.mo.us/elmhandbook.pdf">Elementary Handbook</a></li>
<li><span class="menu_r"><a href="http://alton.k12.mo.us/hshandbook.pdf">Jr. &amp; Sr. High Handbook</a></li>
</ul></li>
<li><span class="menu_r"><a href="#" ><span class="menu_ar">Calendars and Menus</span></a></span>
<ul>
<li><span class="menu_r"><a href="http://alton.k12.mo.us/calendar 2010-11.pdf">2010-2011 School Calendar</a></li>
<li><span class="menu_r"><a href="http://alton.k12.mo.us/Elementary/elem_menu.html">Elementary Menu</a></li>
<li><span class="menu_r"><a href="http://alton.k12.mo.us/Jr.Sr.High/hs_menu.html">Jr. &amp; Sr. High Menu</a></li>
</ul></li>
<li><span class="menu_r"><a href="#" ><span class="menu_ar">Resources</span></a></span>
<ul>
<li><span class="menu_r"><a href="http://alton.k12.mo.us/teacher%20pages.htm">Teacher's Web Pages</span></a></span></li>
<li><span class="menu_r"><a href="http://alton.k12.mo.us/Teacher%20Resources.html">Teacher Resources</span></a></span></li>
</ul></li>
<li><span class="menu_r"><a href="#" ><span class="menu_ar">Applications</span></a></span>
<ul>
<li><span class="menu_r"><a href="http://alton.k12.mo.us/cert.pdf">Certified Staff</span></a></span></li>
<li><span class="menu_r"><a href="http://alton.k12.mo.us/noncert.pdf">Non-Certifed Staff</span></a></span></li>
</ul></li>
<li><span class="menu_r"><a href="http://oneschoolstreet.com/calendar.php?school_id=164&amp;yearID=2010&amp;monthID=12"><span class="menu_ar">Community Tornado Shelter</span></a></span>
<ul>
<li><span class="menu_r"><a href="http://alton.k12.mo.us/communityletter.pdf"><span class="menu_ar">Community Letter</span></a></span></li>
<li><span class="menu_r"><a href="http://alton.k12.mo.us/specialneeds.pdf"><span class="menu_ar">Special Needs Form</span></a></span></li>
</ul></li>
<li><span class="menu_r"><a href="http://dese.mo.gov/planning/profile/075087.html"><span class="menu_ar">District Report Card</span></a></span></li>
<li><span class="menu_r"><a href="http://eatonline.missouri.edu/Userlogin.aspx?ReturnUrl=/default.aspx"><span class="menu_ar">EAT Online</span></a></span></li>
</ul>
<br class="clearit">
</div>
</body></html>

Excavator
12-21-2010, 09:33 PM
Hello chevy_ls-6,
That is invalid code. Incomplete DocType and you don't close your spans. Could make a difference...

chevy_ls_6
12-22-2010, 03:07 PM
After some cleaning up, let me try this again...


<!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=iso-8859-1" />
<title>test</title>
<style type="text/css">

.clearit {
margin: 0;
padding: 0;
height: 0;
clear: both;
}

/* BUBBLE PLASTIC VERTICAL MENU */

.bubplastic.vertical {
width: 125px;
margin: 0px;
padding: 0px;
display: block;
}

.bubplastic.vertical ul {
display: block;
list-style: none;
margin: 0;
padding: 0;
}

.bubplastic.vertical ul li {
display: block;
float: left;
width: 100%;
margin: 0;
padding: 0;
background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat;
}

.bubplastic.vertical ul li a {
display: block;
margin: 0;
width: 100%;
padding-left: 35px;
text-transform: uppercase;
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 70%;
color: #FFFFFF;
text-decoration: none;
background: transparent url(images/bg-bubplastic-button.gif) top left no-repeat;
}

.bubplastic.vertical ul li a span.menu_ar {
display: block;
margin: 0;
width: 100%;
height: 22px;
padding-top: 5px;
padding-right: 35px;
background: transparent url(images/bg-bubplastic-button.gif) top right no-repeat;
cursor: pointer;
}
/* END BUBBLE PLASTIC VERTICAL MENU */

/* GRAY HOVER */
.bubplastic.gray ul li a:hover,
.bubplastic.gray ul li.highlight a {
background: transparent url(images/bg-bubplastic-h-gray.gif) top left no-repeat;
}

.bubplastic.gray ul li a:hover span.menu_ar,
.bubplastic.gray ul li.highlight a span.menu_ar {
background: transparent url(images/bg-bubplastic-h-gray.gif) top right no-repeat;
}
</style>
</head>

<body>
<div class="menu bubplastic vertical gray">
<ul>
<li><span class="menu_r"><a href="http://oneschoolstreet.com/calendar.php?school_id=164&amp;yearID=2010&amp;monthID=12"><span class="menu_ar">Events Calendar</span></a></span></li>
<li><span class="menu_r"><a href="http://partnerpage.google.com/alton.k12.mo.us"><span class="menu_ar">Staff Email Login</span></a></span></li>
<li><span class="menu_r"><a href=" " ><span class="menu_ar">Plans and Policies</span></a></span>
<ul>
<li><span class="menu_r"><a href="http://policy.msbanet.org/alton/"><span class="menu_ar">School Board Policies</span></a></span></li>
<li><span class="menu_r"><a href="http://alton.k12.mo.us/school%20choice.pdf"><span class="menu_ar">Public School Choice</span></a></span></li>
<li><span class="menu_r"><a href="http://alton.k12.mo.us/SES.pdf"><span class="menu_ar">Supplemental Educational Services</span></a></span></li>
<li><span class="menu_r"><a href="http://alton.k12.mo.us/4th%20Cycle%20CSIP%2007.doc"><span class="menu_ar">Comprehensive School Improvement Plan</span></a></span></li>
<li><span class="menu_r"><a href="http://alton.k12.mo.us/4th%20Cycle%20CSIP%20Goals%20and%20Objectives.doc"><span class="menu_ar">Comprehensive School Improvement Goals</span></a></span></li>
<li><span class="menu_r"><a href="http://alton.k12.mo.us/techplan06-09.doc"><span class="menu_ar">Technology Plan</span></a></span></li>
</ul>
</li>
<li><span class="menu_r"><a href=" "><span class="menu_ar">Directories</span></a></span>
<ul>
<li><span class="menu_r"><a href="http://alton.k12.mo.us/elemfaculty.htm"><span class="menu_ar">Elementary Administration and Faculty</span></a></span></li>
<li><span class="menu_r"><a href="http://alton.k12.mo.us/hsfaculty.htm"><span class="menu_ar">High School Administration and Faculty</span></a></span></li>
</ul>
</li>
<li><span class="menu_r"><a href="#"><span class="menu_ar">Handbooks</span></a></span>
<ul>
<li><span class="menu_r"><a href="http://alton.k12.mo.us/elmhandbook.pdf"><span class="menu_ar">Elementary Handbook</span></a></span></li>
<li><span class="menu_r"><a href="http://alton.k12.mo.us/hshandbook.pdf"><span class="menu_ar">Jr. &amp; Sr. High Handbook</span></a></span></li>
</ul>
</li>
<li><span class="menu_r"><a href="#" ><span class="menu_ar">Calendars and Menus</span></a></span>
<ul>
<li><span class="menu_r"><a href="http://alton.k12.mo.us/calendar 2010-11.pdf"><span class="menu_ar">2010-2011 School Calendar</span></a></span></li>
<li><span class="menu_r"><a href="http://alton.k12.mo.us/Elementary/elem_menu.html"><span class="menu_ar">Elementary Menu</span></a></span></li>
<li><span class="menu_r"><a href="http://alton.k12.mo.us/Jr.Sr.High/hs_menu.html"><span class="menu_ar">Jr. &amp; Sr. High Menu</span></a></span></li>
</ul>
</li>
<li><span class="menu_r"><a href="#" ><span class="menu_ar">Resources</span></a></span>
<ul>
<li><span class="menu_r"><a href="http://alton.k12.mo.us/teacher%20pages.htm"><span class="menu_ar">Teacher's Web Pages</span></a></span></li>
<li><span class="menu_r"><a href="http://alton.k12.mo.us/Teacher%20Resources.html"><span class="menu_ar">Teacher Resources</span></a></span></li>
</ul>
</li>
<li><span class="menu_r"><a href="#" ><span class="menu_ar">Applications</span></a></span>
<ul>
<li><span class="menu_r"><a href="http://alton.k12.mo.us/cert.pdf"><span class="menu_ar">Certified Staff</span></a></span></li>
<li><span class="menu_r"><a href="http://alton.k12.mo.us/noncert.pdf"><span class="menu_ar">Non-Certifed Staff</span></a></span></li>
</ul>
</li>
<li><span class="menu_r"><a href="http://oneschoolstreet.com/calendar.php?school_id=164&amp;yearID=2010&amp;monthID=12"><span class="menu_ar">Community Tornado Shelter</span></a></span>
<ul>
<li><span class="menu_r"><a href="http://alton.k12.mo.us/communityletter.pdf"><span class="menu_ar">Community Letter</span></a></span></li>
<li><span class="menu_r"><a href="http://alton.k12.mo.us/specialneeds.pdf"><span class="menu_ar">Special Needs Form</span></a></span></li>
</ul>
</li>
<li><span class="menu_r"><a href="http://dese.mo.gov/planning/profile/075087.html"><span class="menu_ar">District Report Card</span></a></span></li>
<li><span class="menu_r"><a href="http://eatonline.missouri.edu/Userlogin.aspx?ReturnUrl=/default.aspx"><span class="menu_ar">EAT Online</span></a></span></li>
</ul>
<br class="clearit" />
</div>
</body>
</html>

Excavator
12-22-2010, 03:34 PM
Good morning chevy_ls_6,
Good job on closing those spans and anchors... it's still not valid though.
Make the top of your document look like this -

<!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>Untitled Document</title>
<style type="text/css">

.clearit {
margin: 0;
padding: 0;
height: 0;
clear: both;
}


Looking over your CSS it looks like this is either not a flyout menu at all or it is missing some critical CSS. I see nothing that would hide a flyout ul nor anything that would make it appear on hover.
Where is the tutorial you were following to make this menu?

Also, it would be easier to work on if we had the images. Can you link us to the test site?

SB65
12-22-2010, 03:34 PM
I can't see any css in there that would hide/display a submenu to give you the flyouts. Here's (http://www.simonbattersby.com/blog/building-a-css-vertical-expanding-menu-with-flyouts-stage-1/) a tutorial for a vertical menu with flyouts if that's any use to you.

Edit:Ah, looks like I agree with Excavator on the absence of appropriate css....:D

chevy_ls_6
12-22-2010, 04:56 PM
I can't see any css in there that would hide/display a submenu to give you the flyouts. Here's (http://www.simonbattersby.com/blog/building-a-css-vertical-expanding-menu-with-flyouts-stage-1/) a tutorial for a vertical menu with flyouts if that's any use to you.

Edit:Ah, looks like I agree with Excavator on the absence of appropriate css....:D
Many thanks for that link! I'm so close I can smell it, but a couple of the flyouts won't scroll down past the first link? It validates, but only the first flyout works as it should...

URL: http://yenko.net/R4/index.html

chevy_ls_6
12-22-2010, 05:23 PM
Nevermind, it appears to be working as it should now...?

chevy_ls_6
12-22-2010, 06:02 PM
One last question: how do I center the main vertical menu within it's particular div (sidenav)?

SB65
12-22-2010, 06:42 PM
Give the ul a width, and assign margin:0 auto.

chevy_ls_6
12-24-2010, 04:52 PM
Give the ul a width, and assign margin:0 auto.
Nailed it, as usual!

How come my "Story 1" container is sitting a few pixels farther to the left than the rest of my story containers? They all call the H1 style, and other than their name are styled exactly the same?? It only does it in IE...???

http://yenko.net/R4/index.html

SB65
12-24-2010, 06:39 PM
That looks like a hasLayout (http://www.satzansatz.de/cssd/onhavinglayout.html) issue, which affects IE7 and under. hasLayout is an IE specific property driven by other properties on an element, the absence of which can cause problems. Here the hasLayout property is absent on #content.

You can fix this by adding height:1% to #content. MS ditched hasLayout after IE7 which is why the page is OK in IE8.

chevy_ls_6
12-24-2010, 06:40 PM
Also, on my Tp2, and viewing the page in Opera Mini, the header is screwed up [double images?] and pushed up above the page container...any guess as to why?

Here's a screenshot from the simulator, which mimics my phone...

chevy_ls_6
12-24-2010, 06:43 PM
That looks like a hasLayout (http://www.satzansatz.de/cssd/onhavinglayout.html) issue, which affects IE7 and under. hasLayout is an IE specific property driven by other properties on an element, the absence of which can cause problems. Here the hasLayout property is absent on #content.

You can fix this by adding height:1% to #content. MS ditched hasLayout after IE7 which is why the page is OK in IE8.
Looks like we posted @ the same time...but that fixed it. MANY THANKS!!!! :thumbsup:

chevy_ls_6
12-27-2010, 08:23 PM
Anyone have any thoughts on my above post (http://www.codingforums.com/showpost.php?p=1031688&postcount=12)? It's not a deal breaker, because I can't imagine too many poor souls [like myself :p] are gonna be viewing the page on Opera Mobile, but it would be nice if it looked somewhat close.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum