SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Evangelist venkat6134's Avatar
    Join Date
    Jul 2010
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to add vertical hover navigation sub-menu?

    hi all,
    I am new to css and javascript programing.I want help regarding this...
    I have an horizontal menu,but the menu items all are in image format.when mouseover on it, it display another color means it is in active state.(this is also an image of another color to differentiate active or not).

    Now i want to add vertical sub-menu of diff levels to the already existed menu(i.e original menu is of image format). Is it possible to add the sub-menu items to the image menu? if possible, i want the solution for it.

    Format :::

    Home(image format) Example(image format) Download(image format)
    |
    Ex on php
    |
    Ex on MySql
    The sub-menu items will display only mouse over on the main menu.....

    Thanking you......
    venkat6134 is offline Reply With Quote

  2. #2
    SitePoint Addict Zarin Denatrose's Avatar
    Join Date
    Jan 2009
    Location
    Surrey BC, Canada
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Take a look at this nettuts tutorial: http://net.tutsplus.com/tutorials/de...vigation-menu/

    I think you'll find it helpful for what you're trying to do. It goes over building a multi-level menu entirely in CSS, with only IE6 needing some javascript to handle its inability to work well with some of the CSS techniques used.

  3. #3
    SitePoint Evangelist venkat6134's Avatar
    Join Date
    Jul 2010
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for reply me..
    but i have already images in horizontal menu.
    For that i will add sub-menu.
    but it shows all are with css/java script....
    Any other way for this???

  4. #4
    SitePoint Addict Zarin Denatrose's Avatar
    Join Date
    Jan 2009
    Location
    Surrey BC, Canada
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What you're saying doesn't make sense. Please be clearer and more precise in what you want to say.

  5. #5
    SitePoint Evangelist venkat6134's Avatar
    Join Date
    Jul 2010
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    for ex,
    i am using horizantal menu as of gif images for HOME,LOGIN,REGISTER. And also add mouseover effect to it like changing the color of that image(this is another image of diff color to identify it is highlighted)
    And i add href to it, to go to specific page when ever it clicked.

    Now i want to add sub-menu of it in a vertical fashion..

  6. #6
    SitePoint Addict Zarin Denatrose's Avatar
    Join Date
    Jan 2009
    Location
    Surrey BC, Canada
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How is your current menu structured? May I see the code?

  7. #7
    SitePoint Evangelist venkat6134's Avatar
    Join Date
    Jul 2010
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i use javascript::
    <script language="JavaScript">
    rollOver[8] = new Image()
    rollOver[8].src="/buttons/login_on.gif"
    rollOver[9] = new Image()
    rollOver[9].src="/buttons/register_on.gif"
    }
    function rollSwitch(name,m) {
    picSwap(name, rollOver[m])
    }
    function picSwap(i1,i2) {
    var temp = i1.src
    i1.src=i2.src
    i2.src=temp
    }
    </script>

    Adding images whereever we require:::

    <a href="http://sitename/login.html">
    <img border="0" onmouseover="rollSwitch(document.PROF8,8)"
    onmouseout="rollSwitch(document.PROF8,8)" name="PROF8" src="/buttons/login.gif"></a>

    <a href="http://sitename/reg.html">
    <img border="0" onmouseover="rollSwitch(document.PROF9,9)"
    onmouseout="rollSwitch(document.PROF9,9)" name="PROF9" src="/buttons/register.gif"></a>

  8. #8
    SitePoint Addict Zarin Denatrose's Avatar
    Join Date
    Jan 2009
    Location
    Surrey BC, Canada
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, that's all well and good but what I need is the structure of your navigation.
    Please tell me your nav section isn't just a bunch of <a> tags that are places close together in the document...

  9. #9
    SitePoint Evangelist venkat6134's Avatar
    Join Date
    Jul 2010
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes, by using only <a> tags.

  10. #10
    SitePoint Addict Zarin Denatrose's Avatar
    Join Date
    Jan 2009
    Location
    Surrey BC, Canada
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well now that's just wrong.

    If you want a dropdown menu, you really should follow the the tutorial I linked earlier. You can customize that once you've built it to use images if you choose, but you cannot expect to build a complicated menu using a loose collection of anchors. Go watch that tutorial again, it will go over building your navigation using unordered lists, which can have child lists as their sub menus. You can make your anchors contain images just like the ones you're using now using that method.

  11. #11
    SitePoint Evangelist venkat6134's Avatar
    Join Date
    Jul 2010
    Posts
    454
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    is there any another way to get sub-menu?

  12. #12
    SitePoint Addict Zarin Denatrose's Avatar
    Join Date
    Jan 2009
    Location
    Surrey BC, Canada
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not a pretty ways. Hacky ones, unclean ones, javascript heavy ones... The tutorial I sent you to is really one of the simplest ways to implement this, and if you don't care about IE6, it won't require any javascript.
    I STRONGLY recommend using the method in the tutorial. It will be faster and easier than using javascript to hack one into place.


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
  •