Results 1 to 6 of 6

Thread: Change vertical menu into horizontal, please help!

  1. #1
    Join Date
    Mar 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Change vertical menu into horizontal, please help!

    Hello there,

    I hope someone can help me with the following problem.
    I have took this menu

    http://www.dynamicdrive.com/style/cs...ocks-menu/P30/

    and I really appreciate it, but how can I simply change it into a horizontal menu? I tried a lot of things but nothing works so please help me out.

    Or maybe this would be even better, is it possible to make this menu into a dropdown-onclick menu?

    Thanks in advance

    Blueflame

  2. #2
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    I got it to work in FF, can't get it to work in IE. Sorry.
    Code:
    <style type="text/css">
    
    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */
    
    #blueblock{
    width: auto;
    border-right: 1px solid #000;
    padding: 10px;
    margin-bottom: 1em;
    font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
    font-size: 90%;
    background-color: #90bade;
    color: #333;
    }
    
    * html #blueblock{ /*IE 6 only */
    w\idth: 147px; /*Box model bug: 180px minus all left and right paddings for #blueblock */
    }
    #blueblock a{
    padding: 5px 5px 5px 8px;
    border-left: 10px solid #1958b7;
    border-right: 10px solid #508fc4;
    background-color: #2175bc;
    color: #fff;
    text-decoration: none;
    width: 900px;
    }
    
    html>body #blueblock a{ /*Non IE6 width*/
    width: auto;
    }
    
    #blueblock a:hover{
    border-left: 10px solid #1c64d1;
    border-right: 10px solid #5ba3e0;
    background-color: #2586d7;
    color: #fff;
    }
    
    </style>
    
    </style>
    <div id="blueblock">
    <a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
    <a href="http://www.cssdrive.com/">CSS Drive</a>
    <a href="http://www.dynamicdrive.com/forums/">Forums</a>
    <a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a>
    <a href="http://tools.dynamicdrive.com/favicon/">Favicon Creator</a>
    <a href="http://tools.dynamicdrive.com/button/">Button Maker</a>
    </div>
    Last edited by Nile; 03-30-2008 at 02:21 PM.
    Jeremy | jfein.net

  3. #3
    Join Date
    Mar 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks, I tried it and its just wider, the links and thinks are still vertical.
    I just want the original menu horizontal.

    so not like :

    aaaaaaaa
    bbbbbbbb
    cccccccc

    but more like this :

    aaaaaaaa bbbbbbbb cccccc

  4. #4
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    I told you it only works in FF, I can't figure out how to make it work in IE. :-(
    Jeremy | jfein.net

  5. #5
    Join Date
    Jan 2008
    Posts
    51
    Thanks
    46
    Thanked 1 Time in 1 Post

    Default

    Hi Bluefame...

    It's fairly easy to make it in a horizontal menu.

    You just need to delete some CSS.

    First, take out all the mentions of a "width". You're going to want your menu to span your page not be restricted to the 180px in the current version.

    Next, we need to tell the <li> elements to lay in-line with each other, instead of stack top to bottom. So, add display:inline to #blueblock li.

    After that, we'll need to tell the anchor elements to follow suit. So, remove display:block from the #blueblock li a decleration.

    Last, let's remove the light blue background because it looks messy -- remove background-color: #90bade; from #blueblock.

    That's it No need to mess with the HTML.
    If you want to remove the space between the menu items, add float:left to #blueblock li.

    Below are all the changes that I suggest. Deletions are in red...additions in green.


    Code:
    <style type="text/css">
    
    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */
    
    #blueblock{
    width: 180px;
    border-right: 1px solid #000;
    padding: 0 0 1em 0;
    margin-bottom: 1em;
    font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
    font-size: 90%;
    background-color: #90bade;
    color: #333;
    }
    
    * html #blueblock{ /*IE 6 only */
    w\idth: 147px; /*Box model bug: 180px minus all left and right paddings for #blueblock */
    }
    
    #blueblock ul{
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
    }
    
    #blueblock li {
    border-bottom: 1px solid #90bade;
    margin: 0;
    display:inline;
    float:left;  /* Optional.  Removes space between menu elements */
    }
    
    #blueblock li a{
    display: block;
    padding: 5px 5px 5px 8px;
    border-left: 10px solid #1958b7;
    border-right: 10px solid #508fc4;
    background-color: #2175bc;
    color: #fff;
    text-decoration: none;
    width: 100%;
    }
    
    html>body #blueblock li a{ /*Non IE6 width*/
    width: auto;
    }
    
    #blueblock li a:hover{
    border-left: 10px solid #1c64d1;
    border-right: 10px solid #5ba3e0;
    background-color: #2586d7;
    color: #fff;
    }
    </style>

  6. #6
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Ahh...the power of CSS

    Whenever you're trying to something like this, you need to figure out if the HTML is dictating layout. For example, which elements are nested within each other, etc.. etc..

    In this case, there is no inherent HTML coding that would dictate a vertical vs. horizontal menu.

    Of course, lists are, by design, supposed to be vertical. But that's nothing that CSS can't overcome.

    So, if the answer to the question is no -- focus on the CSS. Don't try to create messy workarounds with HTML.

    Just some friendly advice

    ReadytoLearn's CSS should work well for you, Bluefame_Desginer. If you're already invested in Nile's approach (though as I just got done explaining, I wouldn't recommend it), maybe removing the IE hack will make it work in IE

    Cheers

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
  •