| marcy84 |
01-28-2013 12:53 AM |
UPDATE! I figured it out by myself
Well, I guess my persistence finally paid off. I have a vertical accordion nav menu in place! :thumbsup:
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 |
