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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Newbie looking for help with vertical accordion navigation menu

    Hello,

    I'm in desperate need of help with inserting a vertical accordion navigation menu to my website. I've tried for months to do it myself but I only manage to mess the whole page up. My web host is Homestead.com and I'm using one of their templates, which is full of css which I barely know anything about. I only know html. I've also scoured through tutorials and forums but nothing is working for me.
    Here are a few accordion styles that I like just to give you an idea of what I'm looking for:

    http://www.queness.com/resources/htm...ion/index.html
    http://f-source.com/accordion-menu/iphone/

    I cannot afford to pay someone to do this for me right now, so I'm looking for someone who would be kind enough to help guide me in the right direction, or insert the code for me. My website address is:

    http://stores.homestead.com/springcr...StoreFront.bok

    If someone could please help me, I would be eternally grateful!
    Thanks,
    Marcy

  • #2
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Thumbs up UPDATE! I figured it out by myself

    Well, I guess my persistence finally paid off. I have a vertical accordion nav menu in place!

    The only issue I have now is not being able to click on a header to close it. It just stays open until I click on another header. Any suggestions on what I need to add/change in the code below to do this?

    Code:
     /* Left Navigtaion Column
    ----------------------------------------------- */
    
    .accordion,
    .accordion ul,
    .accordion li,
    .accordion a,
    .accordion span {
        margin: 0;
        padding: 0;
        border: none;
        outline: none;
    }
     
    .accordion li {
        list-style: none;
    }
    
    .accordion li > a {
        display: block;
        position: relative;
        width: 100%;
        padding: 0 15px 0 15px;
     
        color: #fdfdfd;
        font: bold 12px/28px Arial, sans-serif;
        text-decoration: none;
        text-shadow: 0px 1px 0px rgba(0,0,0, .35);
     
        background: #643401;
        background: -moz-linear-gradient(top,  #643401 0%, #271900 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#643401), color-stop(100%,#271900));
        background: -webkit-linear-gradient(top,  #643401 0%,#271900 100%);
        background: -o-linear-gradient(top,  #643401 0%,#271900 100%);
        background: -ms-linear-gradient(top,  #643401 0%,#271900 100%);
        background: linear-gradient(top,  #643401 0%,#271900 100%);
     
        -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
        -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
        box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    }
    
    
    .sub-menu li a {
        color: #404247;
        text-shadow: 1px 1px 0px rgba(255,255,255, .2);
     
        background: #ffffff;
        border-bottom: 1px solid #c9c9c9;
     
        -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
        -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
        box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    }
     
    .sub-menu li:last-child a { border: none; }
     
    
    .accordion > li:hover > a,
    .accordion > li:target > a,
    .accordion > li > a.active {
        color: #ffffff;
        text-shadow: 1px 1px 1px rgba(255,255,255, .2);
     
        
        background: #E4DDCC;
        background: -moz-linear-gradient(top,  #9BA45C 0%, #292B18 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9BA45C), color-stop(100%,#292B18));
        background: -webkit-linear-gradient(top,  #9BA45C 0%,#292B18 100%);
        background: -o-linear-gradient(top,  #9BA45C 0%,#292B18 100%);
        background: -ms-linear-gradient(top,  #9BA45C 0%,#292B18 100%);
        background: linear-gradient(top,  #9BA45C 0%,#292B18 100%);
    }
     
    .sub-menu li:hover a { background: #E4DDCC; }
    
    .accordion li > .sub-menu {
        display: none;
    }
    .accordion li:target > .sub-menu {
        display: block;
    }
    
    Source: http://designmodo.com/jquery-accordi...#ixzz2JCtQOI1F
    
    
    Source: http://designmodo.com/jquery-accordi...#ixzz2JCtCXGZm
    
     
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }
     
    .accordion li:target > .sub-menu {
        height: 100%;
    }
    Thanks, Marcy


  •  

    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
    •