PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Fri Aug 14, 2020 6:37 am

All times are UTC - 5 hours




Post new topic Reply to topic  [ 1 post ] 
Author Message
 Post subject: CSS Accordian Based Menu
PostPosted: Fri Jan 17, 2014 6:33 am 
Offline
Forum Newbie

Joined: Mon May 31, 2010 10:01 am
Posts: 11
Hi All,

I have this script for an accordian styled menu, however when adding sub-menu items you always end up with 3 sub-menu items, even if there is just one entry. I have also tried extending so that I can have 4 or more sub-menu items, but still only three are shown.

Here is the css:

Syntax: [ Download ] [ Hide ]
.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;
    min-width: 110px;
    padding: 0 10px 0 40px;
 
    color: #F0F0F0;
   font: bold 12px/32px Arial, sans-serif;
    text-decoration: none;
    text-shadow: 0px 1px 0px rgba(0,0,0, .35);
 
    background: #6c6e74;
   background: -moz-linear-gradient(top,  #6c6e74 0%, #4b4d51 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));
   background: -webkit-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
   background: -o-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
   background: -ms-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
   background: linear-gradient(top,  #6c6e74 0%,#4b4d51 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);
}

.accordion li > a span {
    display: block;
    position: absolute;
    top: 7px;
    right: 0;
    padding: 0 10px;
    margin-right: 10px;
 
    font: normal bold 12px/18px Arial, sans-serif;
    background: #404247;

    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
 
    -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
    -moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
    box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
}

.accordion > li > a:before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 24px;
    height: 24px;
    margin: 4px 8px;
 
    background-repeat: no-repeat;
    background-image: url(../img/icons.png);
    background-position: 0px 0px;
}

.accordion li.files > a:before { background-position: 0px 0px; }
.accordion li.files:hover > a:before,
.accordion li.files:target > a:before { background-position: 0px -24px; }
 
.accordion li.mail > a:before { background-position: -24px 0px; }
.accordion li.mail:hover > a:before,
.accordion li.mail:target > a:before { background-position: -24px -24px; }
 
.accordion li.cloud > a:before { background-position: -48px 0px; }
.accordion li.cloud:hover > a:before,
.accordion li.cloud:target > a:before { background-position: -48px -24px; }
 
.accordion li.sign > a:before { background-position: -72px 0px; }
.accordion li.sign:hover > a:before,
.accordion li.sign:target > a:before { background-position: -72px -24px; }

.sub-menu li a {
    color: #797979;
   text-shadow: 1px 1px 0px rgba(255,255,255, .2);
 
    background: #e5e5e5;
   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; }
 
.sub-menu li > a span {
    color: #797979;
   text-shadow: 1px 1px 0px rgba(255,255,255, .2);
    background: transparent;
    border: 1px solid #c9c9c9;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
 
.sub-menu em {
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 14px;
    color: #a6a6a6;
   font: normal 10px/32px Arial, sans-serif;
}


.accordion > li:hover > a,
.accordion > li:target > a {
    color: #3e5706;
   text-shadow: 1px 1px 1px rgba(255,255,255, .2);
 
    /*background: url(../img/active.png) repeat-x;*/
    background: #a5cd4e;
   background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
   background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
   background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
   background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
   background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
}
 
.accordion > li:hover > a span,
.accordion > li:target > a span {
    color: #fdfdfd;
   text-shadow: 0px 1px 0px rgba(0,0,0, .35);
    background: #3e5706;
}
 
.sub-menu li:hover a { background: #efefef; }


.accordion li > .sub-menu {
    height: 0;
    overflow: hidden;
 
    -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: 98px;
}
 


And the code on my PHP page to use the menu:

Syntax: [ Download ] [ Hide ]
<link rel="stylesheet" href="css/menu2.css">




<ul class="accordion">
 
    <li id="one" class="files"><a href="#one">My Files<span>495</span></a>
 
    <ul class="sub-menu">
 
        <li><a href="#"><em>01</em>Dropbox<span>42</span></a>
                <ul class="sub-menu">    </ul>
        <li><a href="#"><em>02</em>Skydrive<span>87</span></a>
       
                <li><a href="#"><em>01</em>Dropbox<span>42</span></a>
 
        <li><a href="#"><em>02</em>Skydrive<span>87</span></a>

 
    </ul>
 
</li>

 
    <li id="two" class="mail">
        <a href="#two">Mail<span>26</span></a>
        <ul class="sub-menu">
        <li><a href="#"><em>01</em>Test<span>42</span></a></li>
        </ul>
        </li>
 
    <li id="three" class="cloud"><a href="#three">Cloud<span>58</span></a></li>
 
    <li id="four" class="sign"><a href="#four">Sign Out</a></li>
 
</ul>
 


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 1 post ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 8 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
cron
Powered by phpBB® Forum Software © phpBB Group