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
    Regular Coder
    Join Date
    Feb 2011
    Posts
    109
    Thanks
    6
    Thanked 1 Time in 1 Post

    Two quick questions about a menu

    1) I want my sub-menu to display vertically. However, they are scrolling horizontally. I can't figure it out.

    2) Another thing I can't figure out is how to have the menu maintain a colour if the user is on a specific page. I've been messing around with the pseudo-classes but to no avail.

    Any help would be appreciated

    The website is http://www.tirzah.ie/concrete5/index.php and the problem is located under the "About Us" section of the menu.

    Code:
    #header {
    float:left;
    margin-top:290px;
    width:730px;
    height:160px;
    display:block;
    }
    
    .nav-header {
    border:0;
    font-size:17px;
    font-weight:700;
    width:710px;
    margin:12px 0 23px;
    padding:0;
    }
    
    .nav-header ul {
    height:35px;
    list-style:none;
    margin:0;
    padding:0;
    }
    
    .nav-header li {
    float:left;
    padding:0;
    }
    
    .nav-header li a {
    color:#f1f1f1;
    display:block;
    font-weight:800;
    line-height:35px;
    text-align:center;
    text-decoration:none;
    margin:0;
    padding:0 20px;
    }
    
    .nav-header li a:hover,.menu ul li:hover a {
    color:#05bafc;
    text-decoration:none;
    background:#fff;
    }
    
    .nav-header li ul {
    background:none;
    display:none;
    height:auto;
    border:0;
    position:absolute;
    z-index:200;
    margin:0;
    padding:0;
    }
    
    .nav-header li:hover ul {
    display:block;
    }
    
    .nav-header li:hover li a {
    background:#C2C2C2;
    }
    
    .nav-header li ul a {
    display:block;
    height:35px;
    font-size:13px;
    font-style:normal;
    text-align:left;
    margin:0;
    padding:0 20px;
    color:#05bafc;
    }
    
    .nav-header li ul a:hover,.menu li ul li:hover a {
    border:0;
    color:#05bafc;
    text-decoration:none;
    }
    
    .nav-header p {
    clear:left;
    }
    Code:
            <div class="nav-header">
                <ul>
                        <li><a href="http://www.tirzah.ie/concrete5" target="_self" >Home</a>
                        </li>
                        <li><a href="http://www.tirzah.ie/concrete5/index.php/about/" target="_self" >About Us</a>
                              <ul>
                                    <li><a href="http://www.tirzah.ie/concrete5/index.php/about/trafficking/" target="_self">Human Trafficking</a></li>
                                    <li><a href="http://www.tirzah.ie/concrete5/index.php/about/contact-us/" target="_self">Contact Us</a></li>   
                              </ul>
                        </li>
                        <li><a href="http://www.tirzah.ie/concrete5/index.php/news/" target="_self" >News</a>
                        </li>
                        <li><a href="http://www.tirzah.ie/concrete5/index.php/get/" target="_self" >Get Involved</a>
                        </li>
                        <li><a href="http://www.tirzah.ie/concrete5/index.php/services/" target="_self" >Services</a>
    
                        </li>
                        <li><a href="http://www.tirzah.ie/concrete5/index.php/links/" target="_self" >Links &amp; Resources</a>
                        </li>
              	</ul>
             </div>

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    1. take the float: left; out

    Code:
    .nav-header li {
    float:left;
    padding:0;
    }
    2. you have to add them manually or with javascript

    for instance, make a "selected" class in which you change manually on each page

    Code:
    <ul>
     <li class="selected"></li>
     <li></li>
    </ul>
    then on the other page you would switch the li class.
    Last edited by Sammy12; 07-29-2011 at 09:18 PM.

  • #3
    Regular Coder
    Join Date
    Feb 2011
    Posts
    109
    Thanks
    6
    Thanked 1 Time in 1 Post
    If I take the float out they bunch together.

    I've played around and .nav-header ul li ul li{clear:both;} seems to work.

    Would you be able to expand on point two? Are you suggesting that I give all the menu <li> one class and then set the background of this?

    so something like .selected{background:red;}

    I'm still not seeing how that would work. (I don't yet know javascript so that's out for the moment)

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    you have home.html
    you have a contact us.html
    one nav bar for both

    Code:
    .selected { background-color: blue; }
    for home.html
    Code:
    <ul class="nav">
     <li class="selected"><a href="/">Home</a></li>
     <li><a href="#">contact us</a></li>
    </ul>
    for contactus.html
    Code:
    <ul class="nav">
     <li><a href="/">Home</a></li>
     <li class="selected">contact us</a></li>
    </ul>
    if your using <?php include ?> on your nav bar, then you'll need javascript.
    if your using php modes on your nav bar, then you'll need javascript

  • #5
    Regular Coder
    Join Date
    Feb 2011
    Posts
    109
    Thanks
    6
    Thanked 1 Time in 1 Post
    The site is built using PHP - something I know very little about. I'm guessing that I would then need javascript? If so this might be for down the line!


  •  

    Posting Permissions

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