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 15 of 15
  1. #1
    New Coder
    Join Date
    Apr 2012
    Location
    Canada
    Posts
    13
    Thanks
    0
    Thanked 1 Time in 1 Post

    Help with Nav Menu

    Hello, I'm fairly new to web coding so please bear with me and my blunders.

    I'm trying to create a new nab menu for my web site. What I'm trying to make is very similar to this except horizontal.

    I know it's not coded correctly but here is what I've made so far:
    HTML:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" rev="stylesheet" href="nav.css" type="text/css" media="screen" charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Menus with Transitions</title>
    </head>
    
    <body>
        <a id="first-menu" title="Home" href="#">Home</a>
        <a id="second-menu" title="Program Listing" href="#">Programs</a>
        <a id="third-menu" title="News" href="#">News</a>
        <a id="fourth-menu" title="Contact Us" href="#">Contact</a>
        <a id="fifth-menu" title="Frequently Asked Questions" href="#">FAQ</a>
        <a id="sixth-menu" title="Sitemap" href="#">Sitemap</a>
    </body>
    CSS:
    Code:
    #first-menu, #second-menu, #third-menu, #fourth-menu, #fifth-menu, #sixth-menu {
        font-family:Trebuchet MS;
        font-size: 23px;
        font-weight: bold;
        text-decoration: none;
        width: 5px;
        padding: 5px;
        padding-left: 1px;
        text-indent: 20px;
        margin-left: 100px;
        margin-top: 10px;
        position: fixed;
        -moz-transition-property: width, color;
        -moz-transition-duration: .3s;
        -webkit-transition-property: width, color;
        -webkit-transition-duration: .3s;
        -o-transition-property: width, color;
        -o-transition-duration: .3s;
    }
    
    #first-menu {
        color: #636393;
        left: 0px;
        background-color: #636393;
    }
    
    
    #second-menu {
        color: #0078FF;
        left: 150px;
        background-color: #0078FF;
    }
    
    
    #third-menu {
        color: #D4953C;
        left: 300px;
        background-color: #D4953C;
    }
    
    
    #fourth-menu {
        color: #609491;
        left: 450px;
        background-color: #609491;
    }
    
    
    #fifth-menu {
        color: #87A248;
        left: 600px;
        background-color: #87A248;
    }
    
    
    #sixth-menu { 
        color: #808080;
        left: 750px;
        background-color: #808080;
    }
    
    
    #first-menu:hover, #second-menu:hover, #third-menu:hover, #fourth-menu:hover, #fifth-menu:hover, #sixth-menu:hover {
        width: 140px;
        color: #FFFFFF;
    }
    
    #first-menu:active, #second-menu:active, #third-menu:active, #fourth-menu:active, #fifth-menu:active, #sixth-menu:active {
        box-shadow: inset 0px 0px 7px #666666;
    }
    This is what it looks like.

    Okay, so you get the idea.

    Now my question is what would be the proper way to code this? I know most menus are made with lists and such. Also would it be possible to make it so that it resizes according to screen size?

    Any help would be appreciated. Thanks.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,951
    Thanks
    9
    Thanked 724 Times in 718 Posts
    I'd do something like:

    Code:
    <ul id="menu">
        <li><a id="first-menu" title="Home" href="#">Home</a></li>
        <li><a id="second-menu" title="Program Listing" href="#">Programs</a></li>
        <li><a id="third-menu" title="News" href="#">News</a></li>
        <li><a id="fourth-menu" title="Contact Us" href="#">Contact</a></li>
        <li><a id="fifth-menu" title="Frequently Asked Questions" href="#">FAQ</a></li>
        <li><a id="sixth-menu" title="Sitemap" href="#">Sitemap</a></li>
    </ul>
    with

    Code:
    #menu{
    	padding:0;
    	margin:0;
    	list-style-type:none
    }
    #menu li{
    	float:left
    }
    #menu li a {
        font-family:Trebuchet MS;
        font-size: 23px;
        font-weight: bold;
        text-decoration: none;
        padding: 5px 20px;
        -moz-transition-property: width, color;
        -moz-transition-duration: .3s;
        -webkit-transition-property: width, color;
        -webkit-transition-duration: .3s;
        -o-transition-property: width, color;
        -o-transition-duration: .3s;
    }
    #first-menu {
        color: #636393;
    }
    #second-menu {
        color: #0078FF;
    }
    #third-menu {
        color: #D4953C;
    }
    #fourth-menu {
        color: #609491;
    }
    #fifth-menu {
        color: #87A248;
    }
    #sixth-menu { 
        color: #808080;
    }

  • #3
    New Coder
    Join Date
    Apr 2012
    Location
    Canada
    Posts
    13
    Thanks
    0
    Thanked 1 Time in 1 Post
    Thanks for your reply. I get the list part but I can't get the boxes to work. See the above link again (I fixed the hotlink protection).

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,951
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Don't know what you mean by boxes...

  • #5
    New Coder
    Join Date
    Apr 2012
    Location
    Canada
    Posts
    13
    Thanks
    0
    Thanked 1 Time in 1 Post
    Did you see the link? The bars become boxes on mouse over.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,951
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Yes, and they work OK in FF11...

  • #7
    New Coder
    Join Date
    Apr 2012
    Location
    Canada
    Posts
    13
    Thanks
    0
    Thanked 1 Time in 1 Post
    Sorry that's not what I meant. The nav menu from the link was made with the "bad" code, the code I first posted up, not yours.

    I can make boxes, but how do I get them to resize on mouseover without messing up the text and space between the menu items?

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,951
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Code:
    #menu{
    	padding:0;
    	margin:0;
    	list-style-type:none
    }
    #menu li{
    	float:left
    }
    #menu li a {
        font-family:Trebuchet MS;
        font-size: 23px;
        font-weight: bold;
        text-decoration: none;
        padding: 5px 10px;
    	width:0;
        -moz-transition-property: width, color;
        -moz-transition-duration: .3s;
        -webkit-transition-property: width, color;
        -webkit-transition-duration: .3s;
        -o-transition-property: width, color;
        -o-transition-duration: .3s;
    }
    #menu li a:hover{
    	color:white;
    	width:140px;
    }
    #first-menu {
        color: #636393;
    	border-left: 10px solid #636393
    }
    #first-menu:hover{
    	background-color: #636393;
    	
    }
    #second-menu {
        color: #0078FF;
    	border-left: 10px solid #0078FF;
    }
    #second-menu:hover{
    	background-color: #0078FF
    }
    #third-menu {
        color: #D4953C;
    	border-left:10px solid #D4953C;
    }
    #third-menu:hover{
    	background-color: #D4953C
    }
    #fourth-menu {
        color: #609491;
    	border-left:10px solid #609491;
    }
    #fourth-menu:hover{
    	background-color: #609491
    }
    #fifth-menu {
        color: #87A248;
    	border-left: 10px solid #87A248;
    }
    #fifth-menu:hover{
    	background-color: #87A248
    }
    #sixth-menu { 
        color: #808080;
    	border-left:10px solid #808080
    }
    #sixth-menu:hover{
    	background-color: #808080
    }
    Is that what you want?

  • #9
    New Coder
    Join Date
    Apr 2012
    Location
    Canada
    Posts
    13
    Thanks
    0
    Thanked 1 Time in 1 Post
    Yes, except I want it to "slide over", if you know what I mean.

  • #10
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,951
    Thanks
    9
    Thanked 724 Times in 718 Posts
    OK, try:

    Code:
    #menu{
    	padding:0;
    	margin:0;
    	list-style-type:none
    }
    #menu li{
    	float:left;
    	width:10px;
    	position:relative;
    	margin-right:130px;
    	padding:5px 0;
        -moz-transition-property: all;
        -moz-transition-duration: .3s;
        -webkit-transition-property: all;
        -webkit-transition-duration: .3s;
        -o-transition-property: all;
        -o-transition-duration: .3s;
    }
    #menu li a {
        font-family:Trebuchet MS;
        font-size: 23px;
        font-weight: bold;
        text-decoration: none;
        padding: 5px 20px;
        -moz-transition-property: all;
        -moz-transition-duration: .3s;
        -webkit-transition-property: width, color;
        -webkit-transition-duration: .3s;
        -o-transition-property: width, color;
        -o-transition-duration: .3s;
    }
    #menu li:hover{
    	width:140px;
    	margin-right:0
    }
    #menu li:hover a{
    	color:white;
    }
    
    #first-menu {
    	background-color: #636393;
    }
    #first-menu a{
        color: #636393;
    }
    #second-menu {
    	background-color: #0078FF
    }
    #second-menu a{
        color: #0078FF;
    }
    #third-menu {
    	background-color: #D4953C
    }
    #third-menu a{
        color: #D4953C;
    }
    #fourth-menu {
    	background-color: #609491
    }
    #fourth-menu a{
        color: #609491;
    }
    #fifth-menu {
    	background-color: #87A248
    }
    #fifth-menu a{
        color: #87A248;
    }
    #sixth-menu { 
    	background-color: #808080
    }
    #sixth-menu a{ 
        color: #808080;
    }
    with

    Code:
    <ul id="menu">
        <li id="first-menu"><a title="Home" href="#">Home</a></li>
        <li id="second-menu"><a title="Program Listing" href="#">Programs</a></li>
        <li id="third-menu"><a title="News" href="#">News</a></li>
        <li id="fourth-menu"><a title="Contact Us" href="#">Contact</a></li>
        <li id="fifth-menu"><a title="Frequently Asked Questions" href="#">FAQ</a></li>
        <li id="sixth-menu"><a title="Sitemap" href="#">Sitemap</a></li>
    </ul>
    Last edited by SB65; 04-12-2012 at 10:19 PM.

  • #11
    New Coder
    Join Date
    Apr 2012
    Location
    Canada
    Posts
    13
    Thanks
    0
    Thanked 1 Time in 1 Post
    No, sorry, it needs to be identical to the first link if possible and as much as possible.

    A bar on the left that transits into a rectangle that covers the text on mouseover.
    http://screencast.com/t/vBTkC4hcQ9
    Last edited by Otterblue; 04-12-2012 at 11:46 PM.

  • #12
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,951
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Isn't that what the code does:see here?
    Hm, that works fine in FF but not in Chrome.
    Last edited by SB65; 04-13-2012 at 01:54 PM.

  • #13
    New Coder
    Join Date
    Apr 2012
    Location
    Canada
    Posts
    13
    Thanks
    0
    Thanked 1 Time in 1 Post
    Yes! Perfect! The only problem is that it only works on Firefox. It flickers and does't display properly with Safari 5 and Chrome 19 (WebKit). I haven't tried IE yet.



    Safari 5.1.5:
    http://screencast.com/t/SJStrqVT

    Chrome 19.0.1084.15 beta:
    http://screencast.com/t/CtbX5W3TCWm9

    Do you have any idea of what might be causing that?
    Thanks for all your answers so far

  • #14
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,951
    Thanks
    9
    Thanked 724 Times in 718 Posts
    If you set the position of the li tags as absolute, in fact as you originally had them, then I suspect this would work in Chrome and Opera as well.
    EDIT: Yes, it does, see updated code on link as before.
    Last edited by SB65; 04-13-2012 at 02:38 PM.

  • #15
    New Coder
    Join Date
    Apr 2012
    Location
    Canada
    Posts
    13
    Thanks
    0
    Thanked 1 Time in 1 Post
    Great. I'll try updating my website with it and see how it goes.


  •  

    Tags for this Thread

    Posting Permissions

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