1. Hello Guest! You are browsing the forums as a guest; you will have limited permissions as a guest so we advise registering to enjoy the forums fully. Remember: we are a Christian ONLY site - any user who is not Christian will not be approved. Blessings, Christian Forum Site Staff
    Dismiss Notice

Need CSS Help

Discussion in 'Technology and Internet' started by revlynn, Sep 3, 2011.

  1. I am trying to create a vertical menu which will slide down on hover to reveal sub-menu items. Because of space restrictions, it is important that it slide down rather than sticking out to the side. I can create the basic menu using nested ULs and CSS, and I understand that it is possible to create the slide down effect also with CSS. I would prefer this to using Javascript. However, my CSS knowledge is very limited. Can anyone tell me how to do this?

    Also, can anyone tell me how to make the menu pick up the theme colours of the page where it appears? (I want to use it on a blog that changes themes for various pages.)

    Any help will be greatly appreciated.

    blessings,

    Lynn
     
  2. Hi Lynn,

    Here's a website I have used frequently for coding help. They actually provide the code for you. Perhaps you can find what your looking for here. Look in the Menus & Navigation under Script Categories.

    http://www.dynamicdrive.com/
     
  3. Thanks guys. I had a look, but the only one they have that allows for sub-menu items flies out to the side, rather than sliding down.

    blessings,

    Lynn
     
  4. To get an idea what I'm looking for, take a look at the menu on our site at http://glorytotheking.net/about/
    The sub-menu is currently static, which means I have to have a separate menu file for each area of the site. What I would like is to be able to telescope the sub-menus up into the main menu, with the sub-menus only sliding down when someone hovers the mouse over the main menu item. Hope that makes sense. I'm sure there is a correct technical way of saying it, but I've taught myself this stuff and don't always have the correct terms.

    blessings,

    Lynn
     
  5. I might be mistaken and haven't been to the site in a while but I believe most allow you to have sub-menus. I've used both styles and the reason I had them was because I needed sub-menu items. I try not to use Javascript either. Now I will say that you may need to add the code in but you basically follow the same format as what's already there but I'll check it out a little further and get back to you as soon as I can. Can't promise when that will be however. Perhaps today, maybe tomorrow, maybe later in the week.
     
  6. One further place to look on the same site is here: http://www.dynamicdrive.com/dynamicindex1/indexb.html

    This is a mix of horizontal and vertical but they have sliding vertical menu's which have sub-menus. I'll still check further but this is a starting point.
     
  7. Thanks Nik. I think it's probably just a couple of lines I need to add to the code I already have on the site, but I've hunted everywhere and so far not been able to find something that works.

    blessings,

    Lynn
     
  8. Sorry Lynn I should have checked this earlier, I could have saved you a lot of time and bother, here is link to working example I have coded for you, I think this is what you want, http://tlims.co.uk/revlyn/menu1.html

    Let me explain how it works. First you need a seperate container for the navigation, this is given the id of Menu Container, in this case it is a DIV box. I have set the width to 300 pixels. This is important as to how the navigation will be displayed, it needs something to limit its width and so on.

    Create your navigation as unordered lists with the UL tag and giving id or class names. Please note that an ID can only be used ONCE ONLY in the html on the page, if you want to use the styling for that item more than once then use CLASS . IN CSS the class is denoted by a . , .class or # for an id, #this_is_id.

    Basically you nest your sub menu list after the main top level link in between the <li> </li> tags, and set the CSS not to display this list until its parent menu is hovered on. you can continue to add as many sub menus as you like using this method.

    The trick to the effect you want is all in the relationship of using correct display and position properties of the sub menus etc, also not forgetting to remove list styling and all other default margin and border settings which are used by browsers to push the sub lists over.


    Anyway Here is the CSS and HTML, i hope you do not have too many problems modifying and incorprating this. I have made a few comments in the CSS so you know what parts do what.

    Any questions do not hesitate to ask!

    HTML:
    
    
    <div id="menu_container">
    <ul id="main_nav">
    <li><a href="#">About Us</a>
        <ul class="sub_menu">
            <li><a href="#">Background</a></li>
            <li><a href="#"> Vision</a></li>
            <li><a href="#">Satement of Faith</a><li>
                <li><a href="#">Contact Us</a><li>
            </ul>
        </li>
        
    <li><a href="#">Church</a>
        <ul class="sub_menu">
            <li><a href="#">Worship</a></li>
            <li><a href="#"> Community</a></li>
            <li><a href="#">Prayer</a><li>
            </ul>
        </li>
        
        
        <li><a href="#">Missions</a>
        <ul class="sub_menu">
            <li><a href="#">About</a></li>
            <li><a href="#">Pastor</a></li>
            <li><a href="#">Child</a><li>
            </ul>
        </li>
    </ul>    
      
    </div>
    
    The CSS

    HTML:
        #menu_container {
        width: 300px;
    }
    #main_nav {
    
          display: block;
        font-size: 0.9em;
        list-style: none outside none;
        margin: 0;
        padding-left: 0;
    }
    #main_nav li{
        width : 100%;
    
    }
    /* first navigation menu level styling */
    #main_nav li a {
        background: none repeat scroll 0 0 #F6ECCA;
        border-bottom: 1px solid #FFFFFF;
        border-left: 4px solid #EEDA9C;
        border-top: 1px solid #FFFFFF;
        color: #172F41;
        display: block;
        padding: 2px;
        text-decoration: none;
        width: 138px;
    }
    
    #main_nav li a:link {
        background: none repeat scroll 0 0 #F6ECCA;
        color: #172F41;
        text-decoration: none;
        width: 138px;
    }
    #main_nav li a:visited {
        background: none repeat scroll 0 0 #F6ECCA;
        color: #172F41;
        text-decoration: none;
    }
    #main_nav li a:hover {
        background: none repeat scroll 0 0 #EDC751;
        border-left: 4px solid #9B8339;
        color: #172F41;
        text-decoration: none;
    }
    
    /*END First Layer Nav Style */
    
    /*this bit hides the sub menu lists */
    ul#main_nav li ul {
        display: none;
    
        margin : 0px;
        padding :  0px;
    }
    /* this displays the sub lists when its parent is hovered on */
    ul#main_nav li:hover ul {
        display: block;
        list-style: none;
        position: relative;
        margin : none;
        padding: 0px;
    
    /*SUb Menu Styling */
    }#main_nav li ul li a {
        background: none repeat scroll 0 0 #773c00;
        border-bottom: 1px solid #FFFFFF;
        border-left: 4px solid #EEDA9C;
        border-top: 1px solid #FFFFFF;
        color: #172F41;
        display: block;
        padding: 2px;
        text-decoration: none;
        width: 138px;
    }
    
    #main_nav li ul li a:link {
        background: none repeat scroll 0 0 #dd4800;
        color: #172F41;
        text-decoration: none;
        width: 138px;
    }
    #main_nav li ul li a:visited {
        background: none repeat scroll 0 0 #dd4800;
        color: #172F41;
        text-decoration: none;
    }
    #main_nav li ul li a:hover {
        background: none repeat scroll 0 0 #773c00;
        border-left: 4px solid #9B8339;
        color: #172F41;
        text-decoration: none;
    }
    
     
  9. I made a mistake in the CSS but the time to edit has expired, basically its the width values for the styling, all instances of width : 138px should be changed to width : 100% This will enable you to control the width using the container width in top line of the CSS, #menu_container { width : 300px.

    When you change this width then all the other widths will automatically change with it, rather than having to go through and change dozen odd values. Hope you understand this!
     
  10. Lynn,

    Did Agricola's code help you at all. I haven't had a chance to get into this further yet but still plan too if you still need help.
     
  11. Thanks guys. My computer died last Wednesday night, and I have only just got it back this morning, so haven't had a chance to play with this yet, but Agricola's demo sure looks like what I want. The ul is basically what I have now, so it will just be a matter of playing with the CSS.

    blessings,

    Lynn
     
  12. lynn you need
    Lyn in order for the css to work properly, the Lists and items have to be structured exactly how I have it, with each sub menu List section has to be part of the higher level list item
     
  13. Thanks Agricola. The menu currently on the site has them just as a standard ul, but in the stuff I have been playing around with I have nested them as you say. I want to make some changes to the site over all, so I will wait till that is finished before I put the new menu up. Thanks so much for your help.

    blessings,

    Lynn
     

Share This Page