Member Avatar for ayesha789

Hi,I need to develop a menu like a Categories Menu in the link

  • 2 Contributors
  • 1 Reply
  • 80 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by peter_budo
Member Avatar for peter_budo

If you tried to view page you would found the whole code

/*	3. C A T E G O R I E S
*/

#categories{
position:fixed;
width:120px;
top:190px;
right:-120px;
z-index:120;
background-color:#222;
padding-bottom:16px;
}

#categories:hover{
right:0px;
}

#categories h4{
cursor:pointer;
background-color:#000000;
padding:10px;
color:#FFFFFF;
font-variant:small-caps;
text-align:center;
position:absolute;
left:-30px;
width:10px;
}

#categories ul, #categories h5{
margin:0px 16px;
}

#categories h5{
font-variant:small-caps;
color:#FFFFFF;
margin:16px 16px 0px 16px;
}

#categories ul li{
list-style:none;

}

#categories ul li a{
color:#999999;
text-decoration:none;
}



#categories ul li a span{
color:#999999;
width:18px;
display:block;
float:left;
text-align:left;
}



#categories ul li a:hover, #categories ul li a:hover span{
color:#fff;
}
<div id="categories">
    <h4>C<br />
      a<br />
      t<br />
      e<br />
      g<br />

      o<br />
      r<br />
      i<br />
      e<br />
      s </h4>
    <h5>Alphabetical</h5>

    <ul>
      <li><a href=""><span>A </span>&ndash; C</a></li>
      <li><a href=""><span>D </span>&ndash; G</a></li>
      <li><a href=""><span>H </span>&ndash; L</a></li>

      <li><a href=""><span>M </span>&ndash; Q</a></li>
      <li><a href=""><span>R </span>&ndash; Z</a></li>
    </ul>
    <h5>by Style</h5>
    <ul>

      <li><a href="">Serifs</a></li>
      <li><a href="">Non-Serifs</a></li>
      <li><a href="">Geometrical</a></li>
      <li><a href="">Calligraphical</a></li>
      <li><a href="">Post-Modern</a></li>
    </ul>

  </div>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.