Results 1 to 6 of 6

Thread: CSS drop down menu, horiz. buttons

  1. #1
    Join Date
    Mar 2006
    Location
    United States, -7:00 GMT
    Posts
    1,790
    Mentioned
    2 Post(s)
    Quoted
    2 Post(s)

    Default CSS drop down menu, horiz. buttons

    So the buttons are like this...


    HTML Code:
    [Home][Facts][Contact]
    something of that sort, and I don't want to actually post the site. But anyway, I want to on mouse over the facts to create a vertical drop down of items in a nice looking way.

    I'm beginner to CSS and Javascript, but I think it shouldn't be super hard.

    Thanks.
    -Ejj

    hakuna matata ;)

  2. #2
    Join Date
    Apr 2007
    Posts
    3,152
    Mentioned
    3 Post(s)
    Quoted
    1 Post(s)

    Default

    Very googleable.

    For dropdown - http://javascript-array.com/scripts/...op_down_menu/#
    And afaik for the sideways menu you make an unordered list and do "float: left" to get it to be horzontal.
    SCAR Tutorials: The Form Tutorial | Types, Arrays, and Classes
    Programming Projects: NotePad | Tetris | Chess


  3. #3
    Join Date
    May 2007
    Location
    Seattle
    Posts
    1,069
    Mentioned
    0 Post(s)
    Quoted
    1 Post(s)

    Default

    Dude Javascript is for drop down menus. They are complex so dont bother. Use a premade one
    FORMERLY BORN2CODE | Play Internet Games
    http://img147.imageshack.us/img147/2084/sigg.png

  4. #4
    Join Date
    Dec 2008
    Posts
    41
    Mentioned
    0 Post(s)
    Quoted
    0 Post(s)

    Default

    Umm they are not complex?? thats like really basic nooby JS?

  5. #5
    Join Date
    Feb 2007
    Location
    Access Violation at 0x00000000
    Posts
    2,865
    Mentioned
    3 Post(s)
    Quoted
    18 Post(s)

    Default

    They are NOT COMPLEX AT ALL!
    Code:
    <html>
    <head>
    <script type="text/javascript">
    	function drop_down(item_number)
        {
            var obj = document.getElementById('item'+ item_number);
            if (obj.style.display == "block")
            {
                obj.style.display = "none";
            }
            else
            {
                obj.style.display = "block";
            }
        }
    </script>
    </head>
    <body>
    <div id="menu">
        <a href="javascript:drop_down('1');" onMouseOver="drop_down('1');" onClick="drop_down('1');">[mouse me over]</a>
        <div id="item1" style="display: none;" onMouseOut="drop_down('1');">
            <a href="#">Link 1</a><br />
            <a href="#">Link 2</a><br />
            <a href="#">Link 3</a><br />
            <a href="#">Link 4</a><br />
        </div>
    </div>
    </body>
    </html>
    Correct me if I'm wrong.
    Ce ne sont que des gueux


  6. #6
    Join Date
    Dec 2008
    Posts
    209
    Mentioned
    0 Post(s)
    Quoted
    0 Post(s)

    Default

    Sorry, this is bumping an old thread, but it's just so that if anyone else looks at it, then they'll have an answer.
    The best way to accomplish the _is_ to use javascript, but I would suggest using jQuery, search youtube for jQuery and then one of DetachedDesigns videos does exactly what you want ;]

    note: - I chose jQuery because of it's absolute ease, it's really cool
    Last edited by Craig`; 07-14-2009 at 02:25 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. Menu
    By my-p-hat in forum OSR Help
    Replies: 1
    Last Post: 11-22-2007, 04:42 PM
  2. Smithing Menu
    By Sir R. M8gic1an in forum RS has been updated.
    Replies: 0
    Last Post: 11-05-2007, 10:01 PM

Posting Permissions

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