SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Thread: Pure CSS Menu

  1. #1
    SitePoint Wizard subnet_rx's Avatar
    Join Date
    Aug 2001
    Location
    Hattiesburg, MS
    Posts
    1,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pure CSS Menu

    I'm trying to do something that should be rather simple, but I can't get it to work. Basically, I want an expandable menu, but I don't want it to be dynamic. I'd like to have the sub-menu's load for every page, but if they are a part of the "closed" class to not display. If they have class="open", then display like normal. It's working on Firefox, but IE seems to have problems with the nested lists. Here is my code:

    Code:
    <ul class="navigation">
    <li><a href="">Academics</a></li>
    <ul class="closed">
    <li><a href="">Colleges and Schools</a></li>
    </ul>
    
    <li><a href="">Admissions</a></li>
    <ul class="opened">
    <li><a href="">Apply Now!</a></li>
    <li><a href="">Undergraduate Admissions</a></li>
    <li><a href="">Graduate Admissions</a></li>
    <li><a href="">International Admissions</a></li>
    </ul>
    
    
    <li><a href="">Financial Information</a></li>
    
    <li><a href="">Housing</a></li>
    
    <li><a href="">Campus Life</a></li>
    
    <li><a href="">Student Services</a></li>
    
    <li><a href="">First Year Experience</a></li>
    
    <li><a href="">About the University</a></li>
    
    </ul>
    The opened and closed classes basically contain display:block and display:none respectively.

  2. #2
    SitePoint Enthusiast Northern Star's Avatar
    Join Date
    Aug 2006
    Location
    Cheshire, UK
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you post your CSS as well please?

    Have you got a sample page we can look at so we can see the IE problem your trying to explain?
    "If it ain't broken, don't fix it!"
    ----
    Northern Star - Web design, stategy & development.

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I could be wrong but you have to wrap the drop-down menu in an <li> tag. Something like this:

    Code:
    <ul class="level1">
    		<li><a href="#">link</a></li>
    		<li class="submenu"><a href="#">link</a>
    			<ul class="level2"> <!-- drop down menu items -->
    				<li><a href="#">link</a></li>
    				<li><a href="#">link</a></li>
    				<li><a href="#">link</a></li>
    				<li><a href="#">link</a></li>
    			</ul>
    		</li>		
    		<li class="submenu"><a href="#">link</a>
    			<ul class="level2"> <!-- drop down menu items -->
    				<li><a href="#">link</a></li>
    				<li><a href="#">link</a></li>
    				<li><a href="#">link</a></li>
    				<li><a href="#">link</a></li>
    			</ul>
    		</li>		
    		<li class="submenu"><a href="#">link</a>
    			<ul class="level2"> <!-- drop down menu items -->
    				<li><a href="#">Link</a></li>
    				<li><a href="#">Link</a></li>
    			</ul>
    		</li>
    		<li><a href="#">link</a></li>
    	</ul>
    ...at least that's how I understand it to work.

  4. #4
    SitePoint Wizard subnet_rx's Avatar
    Join Date
    Aug 2001
    Location
    Hattiesburg, MS
    Posts
    1,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well, I've actually got it working now. My main problem at this poing is IE spacing. I'll post my code:

    Code:
    #navcontainer 
    { 
    	margin: 0px;
    	padding:0px; 
    	text-align:left;
    }
    
    #navcontainer ul
    {
    	list-style-type:none;
    	margin:0px;
    	margin-left: 10px;
    	padding:0px;
    }
    
    #navcontainer li 
    { 
    	margin: 0 0 1px 0; 
    	padding:0px;
    }
    
    #navcontainer a
    {
    	display: block;
    	margin:0px;
    	padding:0px;
    	color: #000;
    	text-decoration: none;
    	font-weight:bold;
    }
    
    #navcontainer ul ul li 
    { 
    	margin: 0 0 1px 0;
    	padding:0px; 
    }
    
    #navcontainer ul ul a
    {
    	display: block;
    	margin: 0px;
    	padding:0px;
    	color: #000;
    	text-decoration: none;
    	font-weight:normal;
    }
    
    .closed
    {
    	display:none;
    }
    
    .opened
    {
    	display:block;
    	margin:0px;
    	padding:0px;
    }
    Basically, I wrapped it all in a div called navcontainer. It's styled and working exactly how I want in in FF, but in IE, I have top and bottom padding/margins between each item that shouldn't be there.

  5. #5
    SitePoint Enthusiast Northern Star's Avatar
    Join Date
    Aug 2006
    Location
    Cheshire, UK
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I always start my CSS with...

    Code:
    * {
         margin: 0;
         padding: 0;
    }
    That way you can be sure that absolutely everything has it's margin/padding reset to 0. It means more work in styling up your content, but you can be sure to element browser quirks and ensures you pay attention to every element when you produce your CSS.

    See if it helps with your IE problem.
    "If it ain't broken, don't fix it!"
    ----
    Northern Star - Web design, stategy & development.

  6. #6
    SitePoint Wizard subnet_rx's Avatar
    Join Date
    Aug 2001
    Location
    Hattiesburg, MS
    Posts
    1,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Normally, that is what I do also. With this application though, which is a outsourced template from another vendor, my manager wants it to stay exactly the same. I basically talked him into lists for the navigation, instead of the nested table and cells they had there to begin with. So, I have to try to work with my menu alone and what is affecting it.

  7. #7
    SitePoint Evangelist
    Join Date
    Jul 2006
    Posts
    493
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Isn't the whitespace bug affecting your unordered list menu?

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try adding width: 100% to your anchor rule.
    Code:
    #navcontainer a
    {
    	display: block;
    	margin:0px;
    	padding:0px;
    	color: #000;
    	text-decoration: none;
    	font-weight:bold;
    	width: 100%;
    }

  9. #9
    SitePoint Wizard subnet_rx's Avatar
    Join Date
    Aug 2001
    Location
    Hattiesburg, MS
    Posts
    1,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz
    Try adding width: 100% to your anchor rule.
    Code:
    #navcontainer a
    {
    	display: block;
    	margin:0px;
    	padding:0px;
    	color: #000;
    	text-decoration: none;
    	font-weight:bold;
    	width: 100%;
    }
    Your a genius.

  10. #10
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's IE's layout bug. Adding a width (or height, depending on the need) will solve virtually all of IE's bugs without requiring the use of actual hacks.

  11. #11
    SitePoint Wizard subnet_rx's Avatar
    Join Date
    Aug 2001
    Location
    Hattiesburg, MS
    Posts
    1,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the tip, I constantly have problems with extra space in IE.

  12. #12
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not a problem.


Bookmarks

Posting Permissions

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