SitePoint Sponsor

User Tag List

Results 1 to 15 of 15

Thread: Sub Menus

  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sub Menus

    This is what I have from a ListMatic menu: ("Horizontal Button")

    I'm trying to ad subMenus to a few of these but can't seen to find an example.

    Also - will the subMenus inherit the css formatting from the main menu item?

    Code:
    <div id="navcontainer"> <!-- From ListMatic "Horizontal Buttons"-->
     	<ul id="navlist">
     	<li id="active"><a href="index.html" id="current">HOME PAGE</a></li>
     	<li><a href="#">PAST NEWSLETTERS</a></li>
     	<li><a href="#">SEARCH FOR HOMES</a></li>
     	<li><a href="#">IMPORTANT DATA</a></li>
     	<li><a href="#">FOR SELLERS</a></li>
     	<li><a href="#">FOR BUYERS</a></li>
     	<li><a href="#">PRICE HISTORY</a></li>
        <li><a href="#">MEDIAN SALE PRICES</a></li>
     	</ul>
     	</div>
    </div><!--end of navigation div -->
    Thanks Rick

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,109
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Use the example here as your model:

    Horizontal Drop Down Menus

    Just view source to get the whole code.

    Yes, rules are inherited unless you are careful, but you can easily get around that.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Questions:

    Is JavaScript compatible across most browsers?

    The menu I'm working on now does not have JavaScript. It's strictly html and css.

    Which is most compatible across browsers?

    Thanks Ralph.

    Rick

  4. #4
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,139
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    If you can get away without using JavaScript, then don't use it. The simplest of drop downs does not require JavaScript except for an IE6 work around due to lack of support for hover on anything besides an anchor.
    The only code I hate more than my own is everyone else's.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,109
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    Is JavaScript compatible across most browsers?

    The menu I'm working on now does not have JavaScript. It's strictly html and css.

    Which is most compatible across browsers?
    Most browsers support JS, but even if using that, it's important to make sure the menu works without it. As oddz said, the only browsers that needs it is IE6, to make the hover work. All the same, JS is often recommended for dropdowns, as it can make life easier for some people who have difficulty maneuvering around the screen (with a delay on the appearance and disappearance of the sub menus, for example, in case the mouse strays). I'm not so sure dropdaowns are a good idea anyway. All the same, the example I linked to above is a CSS dropdown and is very reliable.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  6. #6
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    This is so frustrating!

    Please see Properties With Style Orange County Real Esate

    If I place the menu below the <div id="outer"> it prevents changes in some of the menu structures as width, alignment etc.

    If I place the menu under the outer div and above the <h1 class="tang"> my h1 text loses all of the @font-face formatting and displays in block characters.

    If I place it under the <h1 class="tang"> then my menu is to far from the top of the page.

    This is just unbelievable.

    Html and css have far too many idiosyncrasies. There is nothing about it that's happy!

    How doI fix this.

    thanks . . . rick

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,109
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Anything is hard if you don't know what you're doing. I'd rather learn CSS and HTML than the ins and outs of real estate.

    What's the problem with the menu as it is now?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  8. #8
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i'm just real frustrated.

    If you can see the menu on my site it's fine with me as it is except I will need drop down submenus on a few of the main items.

    Also as I said my <h1 class="tang"> is not formatted.

    It also seem that my menu is aligned more to the left than the center.

    Can't seem to fix this.

    Here is my current css. when I look at this I probably only understand about 50 percent of it. In playing with it is where I lose control of what is already working.

    Code:
    @charset "utf-8";  /* CSS Document */
    /* Generated by Font Squirrel (http://www.fontsquirrel.com) on July 28, 2011 12:15:00 AM America/New_York */
    /* 7/31/2011 */
    
    
    @font-face {
        font-family: 'TangerineRegular';
        src: url('fonts/Tangerine_Regular-webfont.eot');
    	src: local("☺"),
       	scr: url('fonts/Tangerine_Regular-webfont.eot?#iefix') format('embedded-opentype'),
             url('fonts/Tangerine_Regular-webfont.woff') format('woff'),
             url('fonts/Tangerine_Regular-webfont.ttf') format('truetype'),
             url('fonts/Tangerine_Regular-webfont.svg#TangerineRegular') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }
    
    .tang	{font-family:'TangerineRegular', arial, san-serif;
    		 font-size:460%;
    		 color:#6CF;
             font-weight:normal;
    		 text-align: right;
    		 font-weight: normal;
        	 font-style: normal;
    }
    
    h1 br 	 {display:none;}
    
    h1 small {display:block; font-size:50%; font-weight:normal;}
    
    html, body	{color:#000;
    			 background-image: url(images/blinds1.png);
    			 background-attachment:fixed;
    			 font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    			 margin-top:1%;
    			 margin-right:1%;
    			 margin-bottom:1%;
    			 margin-left:1%;
    			 margin:0;
    }
    
    #outer		{width:96%;
    			 margin:auto;
    			 max-width:1200;
    			 min-width:600;
    			 margin-right:2%;
    			 margin-left:2%;
    
    }
    
    1
    .floated_element {float:right;
    				  width: 900px;
    				  margin:5px;
    				  display: inline; /*IE6 workaround */
    }				  
    
    /* NAVIGATION STARTS HERE: FROM LISTMATIC */
    #navcontainer
     {
     background: #FFF  /*#f0e7d7; */
     margin: 0 auto;
     padding: 1em 0 0 0;
     font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
     text-transform: capitalize;
     text-align:center; /*aligns text only */
     
     }
    
     /* to stretch the container div to contain floated list */
     #navcontainer:after
     {
     content: ".";
     display: block;
     line-height: 1px;
     font-size: 1px;
     clear: both;
     }
    
     ul#navlist
     {
     list-style: none;
     padding: 0;
     margin: 0 auto;
     width: 100%;
     font-size: 0.7em;
     
     }
    
     ul#navlist li
     {
     display: block;
     float: left;
     width: 12%;
     margin: 0;
     padding: 0;
     }
    
     ul#navlist li a
     {
     display: block;
     width: 100%;
     padding: 0.5em;
     border-width: 1px;
     border-color: #006 #333;
     border-style: solid;
     color: #777;
     text-decoration: none;
     background: transparent;  /*#021A68  #f7f2ea; */
     }
    
     #navcontainer>ul#navlist li a { width: auto; }
    
     ul#navlist li#active a
     {
     background: transparent;
     color: #0FF; /* #800000; */
     }
    
    /* HOVER borders around each block button - text color indise block */
     ul#navlist li a:hover, ul#navlist li#active a:hover
     {
     color: #0FF;
     background: transparent;
     border-color: #aaab9c #fff #fff #ccc;
     }
    
    /* END OF NAVIGATION LIST  */
    
    #p			{font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    			 line-height: 1.2; 
    			 color: #6CF; 
    			 float:right;
    			 text-align: justify;
    			 
    }
    
    #content p	{font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    			 line-height: 1.2; 
    			 color:#6CF; 
    			 text-align:right;
    }
    
    #branding	{text-align: right;}
    
    .image img	{float:right;}
    
    p.image 	{overflow: hidden;}
    
    #disclaim 	{font-size: 70%;}
    
    #disclaim p	{padding:0; margin:.5em 0;}
    
    #footer   	{font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    			 font-size:68%;
    			 font-style:normal
    			 line-height: 120%; 
    			 color:#6CF; 
    			 text-align: justify;
    			 width:94%;
    			 margin-right:2%;
    			 margin-left:2%;
    }
    
    
    /* eND css*/
    Thanks Ralph . . .

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,109
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    my <h1 class="tang"> is not formatted.
    Hmm, not sure why @font-face isn't working. Was it working before, and if so, what did you change?

    It also seem that my menu is aligned more to the left than the center.
    Fix that by changing the code in red:

    Code:
    ul#navlist li {
      display: block;
      float: left;
      margin: 0;
      padding: 0;
      width: 12.5%;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  10. #10
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something is really wrong.

    The <p> content is way out of bounds.

    NO CHANGES I make to any css call has a new result.

    your suggestion regarding the width to 12.5 made no change.

    For fun I reset the css outer to max-width:900 from 1200 - NO CHANGE at all!

    Some container or something is all of a sudden very wrong and nothing allows any change.

    The footer however is working perfectly.

    css footer:
    Code:
    #footer   	{font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    			 font-size:68%;
    			 font-style:normal
    			 line-height: 120%; 
    			 color:#6CF; 
    			 text-align: justify;
    			 width:94%;
    			 margin-right:2%;
    			 margin-left:2%;
    }
    Should I try making the css outer the same settings as the footer?

    I don't want to have to start over again.

    signed frustrated (rick)

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,109
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    your suggestion regarding the width to 12.5 made no change.
    Did you change it? The style sheet hasn't been changed. It will work if you try it.

    For fun I reset the css outer to max-width:900 from 1200
    What's the "CSS outer"?

    The footer however is working perfectly.
    It's off center for me. Why not use margin: 0 auto? Although, you'd be better off containing your content in a wrapper and putting some bounds on all this.

    Are you really going to leave that bg image repeating like that?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  12. #12
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much Ralph.

    I gotta stop before I pop a blood vessel.

    In my frantic state of mind I removed the <div id="outer"> from the html page. WHAT!

    I'm losing it Ralph.

    I'll start up again tomorrow.

    Thanks again Ralph.

    rick

  13. #13
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Some serious advice -- learn to indent properly. No joke, you're closing more DIV than you open, I suspect you're closing a div (#outer) prematurely after the IMG tag -- which from the looks of things is a presentational image and as such has no business even being in the html. You line up all your openings and closings, you'll see "hey, I'm closing here when I shouldn't be".

    Given your site appearance there is NO reason for there to be an extra DIV around your UL... you've got line-breaks (BR) doing what looks padding's job... and it all adds up to why you've got 12 validation errors.

    Even your comment placement (yes comments!) could be tripping IE rendering bugs. Putting the comment after the closing tag could result in it being wedged between floats, explaining why here in IE6 and 7 large sections of your content fails to even show up on the page.

    ... and I know it's frustrating -- trust me, we all start somewhere.

  14. #14
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not so sure dropdaowns are a good idea anyway. All the same, the example I linked to above is a CSS dropdown and is very reliable.
    Can you expand on this for me please.

    Why are dropdowns not good idea?

    As I'm starting out fresh what would suggest for a cross browser compatible menu?

    Thanks . . .

    Rick

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,109
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    Why are dropdowns not good idea?
    Not everyone browses the web with a mouse; and even if they do, some people will have motor difficulties that make it tricky to do all that hovering and following the links proberly. Much nicer to give them a simple link to click on and drill down into the site.

    there there are those on touch devices, where the hover effect probably won't work, so the dropdown is useless anyway. And if the dropdown provides the only way to get to sub pages, they are 'up the creek', as we say here.

    And if someone is navigating via a keyboard, they may not be able to tab through all the links easily, unless you have set it up properly. And as most web designers don't have a clue about this, most dropdowns are a disaster from this point of view.

    And then there are screen readers. How much fun is it for blind users to have to find their way through all those links? Etc. Etc.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •