Newbie looking for help with vertical accordion navigation menu

[marcy84]

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

[marcy84]

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?

 /* 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