Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts

    CSS vertical menu/flyout help

    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.

    Code:
    <!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>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello chevy_ls-6,
    That is invalid code. Incomplete DocType and you don't close your spans. Could make a difference...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    chevy_ls_6 (01-24-2011)

  • #3
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts
    After some cleaning up, let me try this again...

    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">
    <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>
    Last edited by chevy_ls_6; 12-22-2010 at 03:23 PM.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 -
    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">
    <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?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    chevy_ls_6 (01-24-2011)

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    I can't see any css in there that would hide/display a submenu to give you the flyouts. Here's 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....

  • Users who have thanked SB65 for this post:

    chevy_ls_6 (01-24-2011)

  • #6
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by SB65 View Post
    I can't see any css in there that would hide/display a submenu to give you the flyouts. Here's 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....
    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

  • #7
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts
    Nevermind, it appears to be working as it should now...?

  • #8
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts
    One last question: how do I center the main vertical menu within it's particular div (sidenav)?

  • #9
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Give the ul a width, and assign margin:0 auto.

  • Users who have thanked SB65 for this post:

    chevy_ls_6 (01-24-2011)

  • #10
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by SB65 View Post
    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

  • #11
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    That looks like a hasLayout 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.

  • Users who have thanked SB65 for this post:

    chevy_ls_6 (01-24-2011)

  • #12
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts

    Now, how to deal with Opera Mini?

    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...
    Attached Thumbnails Attached Thumbnails CSS vertical menu/flyout help-screen_capture_01.gif  

  • #13
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by SB65 View Post
    That looks like a hasLayout 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!!!!

  • #14
    Regular Coder
    Join Date
    Aug 2009
    Posts
    160
    Thanks
    42
    Thanked 2 Times in 2 Posts
    Anyone have any thoughts on my above post? It's not a deal breaker, because I can't imagine too many poor souls [like myself ] are gonna be viewing the page on Opera Mobile, but it would be nice if it looked somewhat close.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •