SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Kent in Uk
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Turning css menu into drop down

    Hi,

    Over two years ago I created a css menu. Now my services are growing a little i need the menu to be drop down. but I am unsure how to do this. Can someone point me in the right direction with this. please bear in mind it is some time since I did css - I was bad then and even rustier now.

    The drop down would need to be under web writer.

    www.web-writer-articles.co.uk


    the css is as follows:

    Code:
    /* CSS Document */
    /* to get the secondaryNav the same as the main nav width you need to find out what 23% (it was 23% instead of 25% to give 2% gutter) of the content area is. You do this by dividing 23 by 75 and then multiplying by 100. For padding add in %. this may have to be a guess at first, but what ever you add in padding take away in overall width in %*/
    html,body{
    margin:0;
    padding:0;
    }
    body{
    background-color: #D7DFD8;
    padding:15px 0;
    }
    
    #wrapper{
    width:98%;
    margin:0 auto;
    border:ridge thick #666666;
    max-width:1150px;
    min-width:800px;}
    
    #header{
    float:left;
    width:100%;
    
    background-color:#FFFFFF;
    }
    
    
    #headleft{float:left; width:49%; }
    #headright{float:left; width:49%}
    /*--------------------------------------------menu------------------------------------------*/
    ul.menu {
        clear:both;
        margin:0 0 1px;
        padding:0 2%;
        list-style:none;
        line-height:28px;
        background: url(http://www.web-writer-articles.co.uk/myimages/menu_but.jpg) repeat;
        text-align:left;
        font-family:Arial, Helvetica, sans-serif;
    }
    ul.menu li {
        display:inline;
    }
    ul.menu a {
        text-decoration:none;
        line-height:28px;
        font-size:93%;
        color: #fff;
        outline:0;
        font-weight:bold;
        padding:0 20px;
    }
    ul.menu a:hover {
        color:#FFFF00;
    }
    /*---------------------------------------end menu------------------------------------------*/
    
    #mainContent{
    float:left;
    width:1000px;
    background-color:#ffffff;
    }
    
    
    
    
    
    .dept{float:left; width:33%; background-color:#ffffff; }
    .intro{float:left; background-color:#ffffff; margin-top:10px; }
    .service{float:left; background-color:#ffffff; margin-top:10px;}
    
    #footer{
    clear:both;
    background: #666666;
    }
    
    /*------------------------------------------pages-----------------------------------------*/
    #mainNav{
    float:left;
    width:15%;
    background-color:#99CC66;
    }
    
    #content{
    float:left;
    width:85%;
    background-color:#ffffff;
    margin-bottom:20px;
    
    }
    
    
    #mainContent{
    float:left;
    width:65%;
    background-color:#ffffff;
    padding-top:30px;
    padding-left:20px;
    padding-right:28px;
    }
    .maincontent{float:left; width:95%; background-color:#00CC66; font-size:16px; color:#ffffff; padding:3px; margin-bottom:20px;}
    .maincontent1{float:left; width:95%; background-color:#ffffff; font-size:14px; color:#333333; padding:17px; margin-bottom:20px;}
    .maincontent2{float:left; width:70%; background-color: #FDFEC5; color:#CEFCFF; padding:22px; margin-left:15%; margin-bottom:30px; border:medium outset #FF3300;}
    .maincontent3{float:left; width:90%; background-color: #FDFEC5; color:#CEFCFF; padding:17px; margin:15%; margin-bottom:10px; border:medium outset #FF3300;}
    .maincontent4{float:left; width:95%; background-color:#00CC66; font-size:16px; color:#ffffff; padding:8px; margin-bottom:20px; margin-left:20px;}
    .maincontent5{float:left; width:95%; background-color:#ffffff; border:medium outset #FF3300; font-size:14px; color:#333333; padding:17px; margin-top:30px; margin-bottom:20px;}
    .maincontent6{float:left; width:95%; background-color: #0099FF; font-size:16px; color:#ffffff; padding:8px; margin-bottom:20px; margin-left:20px;}
    .maincontent7{float:left; width:80%; background-color:#ffffff; border:medium outset #FF3300; font-size:14px; color:#333333; padding:17px; margin-left:70px; margin-top:30px; margin-bottom:20px;}
    
    .secondaryNav{
    float:right;
    width:28%;
    background-color:#FFFF99;
    padding-left:8px;
    padding-top:30px;
    }
    
    
    #contactform{width: 85%; margin-left:25px; height:900px; float:left;  border:medium outset #00cc66;}
    
    
    a.newlink:link{color:#ffffff; text-decoration:underline;}
    a.newlink:visited{color:#ffffff;text-decoration:underline}
    a.newlink:hover{ color:#FFFF00; text-decoration:underline;}
    
    a.general:link{color:#0099CC; text-decoration:none;}
    a.general:visited{color:#0099CC; text-decoration:none}
    a.general:hover{ color:#0033CC; text-decoration:underline;}
    
    .contacttext{padding:7px; color:#333333;}
    #textbody{float:left; width:95%; }
    And the html is as follows:

    Code:
    <body>
    <div id="wrapper">
    <div id="header"><div id="headleft"><img src="myimages/copywriter_redone.png" alt="Web writer  converts interest to sales and enhances traffic to your website" border="0" usemap="#Map4" title="web writer, web text and internet marketing. Web content at very reasonable prices. Ask me." />
    <map name="Map4" id="Map4"><area shape="rect" coords="781,101,936,133" href="http://www.web-writer-articles.co.uk/contact.php" />
    </map>
    
    </div><!--headleft-->
    
      <ul class="menu">
                <li><a href="index.php">Home</a></li>
                <li><a href="webcontentservices.php">Web Writer</a></li>						 					
    	    <li><a href="thisisme.php">About me </a></li>
                <li><a href="ghost_writer.php">Ghostwriter</a></li>
                <li><a href="http://www.web-writer-articles.co.uk/blog/"> SEO Guide</a></li>
                <li><a href="contact.php">Contact me</a></li>
        </ul>
    </div><!--header-->
    thanks for your help

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    Here's a simple example showing a method that will work, give the li elements position relative and use absolute positioning to show / hide the sub menus.
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>untitled</title>
    <style>
    .menu {
      background: black;
      list-style: none;
      text-align: center;
    }
    .menu a {
      color: white;
    }
    .menu > li {
      display: inline;
      position: relative;
    }
    .menu ul {
      position: absolute;
      background: black;
      position: absolute;
      padding: 0;
      margin: 0;
      left: 0;
      top: -9999px;
    }
    .menu ul li {
      display: block;
    }
    .menu > li:hover ul {
      top: 100%;
    }
    </style>
    </head>
    <body>
    <ul class="menu clearfix">
      <li><a href="index.php">Home</a></li>
      <li><a href="webcontentservices.php">Web Writer</a>
        <ul>
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="thisisme.php">About me </a></li>
      <li><a href="ghost_writer.php">Ghostwriter</a></li>
      <li><a href="http://www.web-writer-articles.co.uk/blog/"> SEO Guide</a></li>
      <li><a href="contact.php">Contact me</a></li>
    </ul>
    </body>
    </html>
    Hope it helps,

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2010
    Location
    India
    Posts
    52
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Cass27,

    I incorporated markbrown4's superb solution into your design. Here is the link: https://dl.dropbox.com/u/8600929/forum-help/cass27.htm

    The changes have been made in HTML and style.css.

    You just have to add this CSS after line number 55 in style.css

    Code:
    .menu ul {
      background: url(http://www.web-writer-articles.co.uk/myimages/menu_but.jpg) repeat-y;
      position: absolute;
      padding: 0;
      margin: 0;
      left: 15px;
      top: -9999px;
    }
    .menu ul li {
      display: block;
    }
    .menu > li:hover ul {
      top: 100%;
    }
    and open up a new ul li wherever you want submenus before the <li> for the parent menu closes. Like this:

    Code:
    <li><a href="http://www.web-writer-articles.co.uk/webcontentservices.php">Web Writer</a>
    			<!--add your submenu items here -->
    			<ul>
    			<li><a href="#">One</a></li>
    			<li><a href="#">Two</a></li>
    			<li><a href="#">Three</a></li>
    			<li><a href="#">Four</a></li>
    			</ul>
    			<!--submenu item addition end -->
    </li>
    That's all.

    Basically, what markbrown4's solution is doing is keeping the submenu ul out of the screen by absolutely positioning it and giving 'top: -9999px' and then putting it back to screen on hover by top: 100%.

    Also, the submenu li is made 'display:block' so that it displays vertically as opposed to horizontally, and the parent menu li is given a 'position:relative' so that the submenu ul is positioned according to the parent menu position.

    Any confusion, please feel free to ask here. :-)

  4. #4
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Kent in Uk
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is really great. and thanks for the explanation too -its making sense now.

    There are to problems I have and i wonder if there is anything I can do about this.

    1. the drop menu overlaps the main menu slightly when it appears. Is there any way it can be aligned do that it appears exactly below it?
    2. when I add text that is too long for the graphic it creates another graphic below it with the extra text below -as if it was another link. I take it really I just need to lengthen the original graphic a little to take into account the longest titles?

    thanks

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2010
    Location
    India
    Posts
    52
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    The solution to your first problem:

    1) Put a 'margin-top:6px;' in .menu ul (maybe line 59) and then a 'padding-bottom:6px;' in ul.menu a (line 44). Padding bottom is put to increase the hover area of the link. Otherwise it would close before one could navigate to sub menus.

    Let me figure out the second one and get back to you.

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2010
    Location
    India
    Posts
    52
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    the solution to your second problem:

    2) remove the '-y' from 'repeat-y' in the background property inside.menu ul (line 59) and add 'white-space: nowrap;' in the same.

    Post here if something doesn't work. I've updated the link with a long text: https://dl.dropbox.com/u/8600929/forum-help/cass27.htm

  7. #7
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Kent in Uk
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by akrimony View Post
    Hi,

    the solution to your second problem:

    2) remove the '-y' from 'repeat-y' in the background property inside.menu ul (line 59) and add 'white-space: nowrap;' in the same.

    Post here if something doesn't work. I've updated the link with a long text: https://dl.dropbox.com/u/8600929/forum-help/cass27.htm
    this is looking great. thanks Mark and Akrimony for your time on this. You have moved me on.

    Have a great day!

  8. #8
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Kent in Uk
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    its been a bit of time since i was helped out with this menu issue. due to other projects I was unable to put it into action. Now six months later I have and found an issue.

    The drop menu is created under the main menu (under "Web Content") but it only flashes on and off. It does not allow the user to move the cursor over the different bars.

    You can see this here:

    http://www.web-writer-articles.co.uk/testmenu2.php

    and

    http://www.web-writer-articles.co.uk/testmenu.css

    Can anyone tell me why this is not working properly?

    thank you

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Try removing the line in blue and add the bits in red:

    Code:
    .menu ul {
    background: url(http://www.web-writer-articles.co.uk/myimages/menu_but.jpg) repeat;
    position: absolute;
    padding: 0;
    margin-top: 6px;
    left: 15px;
    top: -9999px;
    white-space: nowrap;
    }
    
    ul.menu a {
    text-decoration: none;
    line-height: 28px;
    font-size: 93%;
    color: white;
    outline: 0;
    font-weight: bold;
    padding: 0 20px 6px;
    }
    
    ul.menu > li {
    display: inline;
    position: relative;
    padding-bottom: 6px;
    }

  10. #10
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Kent in Uk
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Try removing the line in blue and add the bits in red:

    Code:
    .menu ul {
    background: url(http://www.web-writer-articles.co.uk/myimages/menu_but.jpg) repeat;
    position: absolute;
    padding: 0;
    margin-top: 6px;
    left: 15px;
    top: -9999px;
    white-space: nowrap;
    }
    
    ul.menu a {
    text-decoration: none;
    line-height: 28px;
    font-size: 93%;
    color: white;
    outline: 0;
    font-weight: bold;
    padding: 0 20px 6px;
    }
    
    ul.menu > li {
    display: inline;
    position: relative;
    padding-bottom: 6px;
    }
    Hi Ralph,

    when i first saw your changes I thought - how can padding make the menu stay out and I was all ready to write back with a negative outcome.

    But it worked! Thanks! but why?

    however I need the margin -top as without it the drop-down goes up onto the parent menu.

    thanks again,

    Nick

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by cass27 View Post
    I need the margin -top as without it the drop-down goes up onto the parent menu.
    I'm unable to access your site at the moment, but I tested those styles and they were meant to look exactly as you had the menu before. Perhaps just refresh your browser/clear your cache to make sure to flush out the old styles.

    The reason you can't use margin-top is that it creates a space between the top level LI and the drop menu, and while your cursor is hovering over that space, the drop menu will disappear. So I put padding on the LI and its <a> as an alternative to push the drop menu down the same distance. As I say, it worked nicely for me in testing, so there could be some old cached styles getting in the way, or I need to test it in other browsers.

    Edit:

    OK, I finally managed to access your site, but the new styles aren't in place yet, so I can't check how the styles work in various browsers.

  12. #12
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Kent in Uk
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph,

    I have left the margin-top in for the moment for youi to see. I use chrome a lot and it is perfect in chrome but overlaps in IE. Any ideas?

    thanks,

    Nick

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by cass27 View Post
    Any ideas?
    You haven't followed my suggestion of also putting padding on the top level <li>, which should fix it:

    Code:
    ul.menu > li {
    display: inline;
    position: relative;
    padding-bottom: 6px;
    }
    Of course, remove the top margin of 6px on the sub ul, too.

  14. #14
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,521
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    I'd like to suggest a slightly different angle if Ralph's doesn't pan out.

    Based on the currently posted testmenu.css file:

    Code:
    ul.menu > li {
        display:inline-block;        /* was inline */
        position:relative;
    }
    
    .menu ul {
        background:url(http://www.web-writer-articles.co.uk/myimages/menu_but.jpg) repeat;
        position: absolute;
        padding: 0;
        margin-top:6px;          /* not needed */
    }
    
    .menu > li:hover ul {
        top: 100%;
        color:#FFFFFF;
        padding-bottom:6px;     /* not needed */
    }
    The bottom list item in the dropdown menu looks a little short in IE8. Don't know why. FF looks good.
    It's late and my cats want me to go to bed. Cheers.

  15. #15
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Kent in Uk
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You haven't followed my suggestion of also putting padding on the top level <li>, which should fix it:

    Code:
    ul.menu > li {
    display: inline;
    position: relative;
    padding-bottom: 6px;
    }
    Of course, remove the top margin of 6px on the sub ul, too.
    Hi Ralph. I dod sop but it still overlapped in IE. I took a look at Ronpats idea and this seems to have worked for both chrome and IE.

    Thanks for your help!

  16. #16
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Kent in Uk
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    I'd like to suggest a slightly different angle if Ralph's doesn't pan out.

    Based on the currently posted testmenu.css file:

    Code:
    ul.menu > li {
        display:inline-block;        /* was inline */
        position:relative;
    }
    
    .menu ul {
        background:url(http://www.web-writer-articles.co.uk/myimages/menu_but.jpg) repeat;
        position: absolute;
        padding: 0;
        margin-top:6px;          /* not needed */
    }
    
    .menu > li:hover ul {
        top: 100%;
        color:#FFFFFF;
        padding-bottom:6px;     /* not needed */
    }
    The bottom list item in the dropdown menu looks a little short in IE8. Don't know why. FF looks good.
    It's late and my cats want me to go to bed. Cheers.
    Hi ronpat,

    This idea worked just great. thanks.

    Cats rule ok

  17. #17
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Nice work, ronpat. Glad it's sorted.


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
  •