Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Horizontal Multi Level Navigation Menu, with Rollover Images

    I am trying to create a Horizontal Multilevel Drop Down Navigation Menu, but instead of the css creating text i would like them to be images and when you hover over the links they rollover into a new image.

    I would really like your help on this been trying to do it for weeks now!!

    Cheers

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by strongbowunited View Post
    I am trying to create a Horizontal Multilevel Drop Down Navigation Menu, but instead of the css creating text i would like them to be images and when you hover over the links they rollover into a new image.

    I would really like your help on this been trying to do it for weeks now!!

    Cheers
    what did you have until now? post the code please.

    regards

  • #3
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is what i have so far!!

    <ul class="nav">
    <li><strong>Web Design</strong>
    <ul>
    <li>Web Hosting</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    </ul>
    </li>
    <li><strong>Graphic Design</strong>
    <ul>
    <li>Advertising</li>
    <li>Test</li>
    <li>Test2</li>
    <li>Test3</li>
    </ul>
    </li>
    <li>Login</li>
    </ul>


    And this is the CSS

    #nav, #nav ul{
    margin:0;
    padding:0;
    list-style-type:none;
    list-style-positionutside;
    position:relative;
    line-height:3.3em;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    }

    #nav a:link,
    #nav a:active,
    #nav a:visited{
    display:block;
    padding:0px 5px;
    border:1px solid #A3D7A0;
    color:#11147d;
    text-decoration:none;
    background-color:#A3D7A0;
    }

    #nav a:hover{
    background-color:#11147d;
    color:#A3D7A0;
    background-image: url(images/home_new1.gif);
    }

    #nav li{
    float:left;
    position:relative;
    }

    #nav ul {
    position:absolute;
    width:3.3;
    top:1.5em;
    display:none;
    }

    #nav li ul a{
    width:7em;
    float:left;
    }

    #nav ul ul{
    top:auto;
    }

    #nav li ul ul {
    left:12em;
    margin:0px 0 0 10px;
    }

    #nav li:hover ul ul,
    #nav li:hover ul ul ul,
    #nav li:hover ul ul ul ul
    {
    display:none;
    }
    #nav li:hover ul,
    #nav li li:hover ul,
    #nav li li li:hover ul,
    #nav li li li li:hover ul
    {
    display:block;
    }

  • #4
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by strongbowunited View Post
    This is what i have so far!!

    Code:
    <ul class="nav">
    <li><strong>Web Design</strong>
    	<ul>
    	<li>Web Hosting</li>
    	<li>...</li>
    	<li>...</li>
    	<li>...</li>
    	</ul>
    </li>
    <li><strong>Graphic Design</strong>
    	<ul>
    	<li>Advertising</li>
    	<li>Test</li>
    	<li>Test2</li>
    	<li>Test3</li>
    	</ul>
    </li>
    <li>Login</li>
    </ul>
    And this is the CSS
    Code:
    #nav, #nav ul{
    margin:0;
    padding:0;
    list-style-type:none;
    list-style-position:outside;
    position:relative;
    line-height:3.3em;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    }
    
    #nav a:link,
    #nav a:active,
    #nav a:visited{
    display:block;
    padding:0px 5px;
    border:1px solid #A3D7A0;
    color:#11147d;
    text-decoration:none;
    background-color:#A3D7A0;
    }
    
    #nav a:hover{
    background-color:#11147d;
    color:#A3D7A0;
    background-image: url(images/home_new1.gif);
    }
    
    #nav li{
    float:left;
    position:relative;
    }
    
    #nav ul {
    position:absolute;
    width:3.3;
    top:1.5em;
    display:none;
    }
    
    #nav li ul a{
    width:7em;
    float:left;
    }
    
    #nav ul ul{
    top:auto;
    }
    
    #nav li ul ul {
    left:12em;
    margin:0px 0 0 10px;
    }
    
    #nav li:hover ul ul,
    #nav li:hover ul ul ul,
    #nav li:hover ul ul ul ul
    {
    display:none;
    }
    #nav li:hover ul,
    #nav li li:hover ul,
    #nav li li li:hover ul,
    #nav li li li li:hover ul
    {
    display:block;
    }
    put your code between [ code] and [ /code] tags, please. You can edit your post for that. Thank you.
    try this way for menu:

    http://qrayg.com/learn/code/cssmenus

    replace the text with images. I think you need to use javascript for rollover images.

    regards

  • #5
    Senior Coder
    Join Date
    Apr 2007
    Location
    Quakertown PA USA
    Posts
    1,028
    Thanks
    1
    Thanked 125 Times in 123 Posts
    Quote Originally Posted by oesxyl View Post
    I think you need to use javascript for rollover images.
    Here's one example of a css-only menu using rollover images from CSSplay

  • Users who have thanked PappaJohn for this post:

    oesxyl (11-28-2008)


  •  

    Posting Permissions

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