Horizontal menu 2

HTML code

 <div id="menu4">

     <ul>

         <li><a href="#">home</a></li>

            <li><a href="#">dress</a></li>

            <li><a href="#">shoes</a></li>

            <li><a href="#">about us</a></li>

            <li><a href="#">contact us</a></li>

            <li><a href="#">our gallery</a></li>

         <ul>

    </div>

CSS code

#cmenu{

 float:left;

 margin-left:350px;

 width:600px;

 height:40px;

 background-color:#666666;

 border-radius:30px;

}

#menu4{

 margin:0px;

 padding:0px;

 position:relative;

 height:50px;

 text-align:left;

 list-style-type:none;

}

#menu4 li{

 display:inline;

 padding:10px 20px 10px 20px;

 position:relative;

 left:-20px;

 border-right:1px #999999 solid;

 position:relative;

 top:-5px;

}

#menu4 li a{

 color:#FFFFFF;

 text-decoration:none;

}

#menu4 li a:hover{

 text-decoration:underline;

}

Result

Tab Menu2

Html code

<ul id="tabnav">
  <li class="tab1"><a href="#">home</a></li>
  <li class="tab2"><a href="#">product</a></li>
  <li class="tab3"><a href="#">gallery</a></li>
  <li class="tab4"><a href="#">contact</a></li>
</ul>

<div id="box"></div>

CSS code

ul#tabnav {
text-align: left; 
margin: 1em 0 1em 0; 
font: bold 11px verdana, arial, sans-serif; 
border-bottom: 1px solid #6c6;
list-style-type: none;
padding: 3px 10px 3px 10px; 
}

ul#tabnav li {
display: inline;
}

body#tab1 li.tab1, body#tab2 li.tab2, body#tab3 li.tab3, body#tab4 li.tab4 { 
border-bottom: 1px solid #fff; 
background-color: #fff;
}

body#tab1 li.tab1 a, body#tab2 li.tab2 a, body#tab3 li.tab3 a, body#tab4 li.tab4 a {
background-color: #fff; 
color: #000; 
position: relative;
top: 1px;
padding-top: 4px;
}

ul#tabnav li a {
padding: 3px 4px; 
border: 1px solid #6c6; 
color: #666;
margin-right: 0px;
text-decoration: none;
border-bottom: none;
}

ul#tabnav a:hover {
background: #fff;
}

#box{
width:auto;
height:500px;
border:1px #6c6 solid;
border-top:none;
color:#000000;
position:relative;
top:-10px;

}

Result

website : http://www.cssportal.com/horizontal-menus/unraveled.php

Tab menu 1

HTML code

 <div id="navbar">
  
  <div id="holder"> 

  <ul> 
   <li><a href="#" id="onlink">Home</a></li>
   <li><a href="#">Products</a></li>
   <li><a href="#">Services</a></li>
   <li><a href="#">Gallery</a></li>
   <li><a href="#">Contact</a></li>
  </ul> 

  </div>

  <div id="box">
  This is tab menuThis is tab menuThis is tab menuThis is tab menuThis is tab menuThis is tab menuThis is tab menuThis is tab menuThis is tab menuThis is tab menu
  </div>


 </div>

CSS code

#navbar {
  width:660px;
 } 

 #navbar #holder {
  /*horizontal line*/
  height:44px;/*tinggi line*/
  border-bottom:1px solid #000;/*line*/
  width:652px;/*panjang line*/
  padding-left:25px; 
 } 

 #navbar #holder ul {
  list-style:none;
  margin:0;
  padding:0; 
 } 

 #navbar #holder ul li a { 
  text-decoration:none;
  float:left;
  margin-right:5px;
  line-height:23px;
  font-family:"Arial Black", Gadget, sans-serif;
  color:#000;
  border:1px solid #000;
  border-bottom:none;
  padding:10px 20px 10px 20px;
  width:75px;
  text-align:center;
  display:block;
  background:#333333;
  border-radius:10px 10px 0px 0px;
 } 

 #navbar #holder ul li a:hover {
  background:#666666;
  color:#FFF;
  text-shadow:1px 1px 1px #000;
 }

 /*-------------------------------*/
  #holder ul li a#onlink {
  background:#999999;
  color:#000;
  border-bottom:1px solid #999999; 
 } 

 #holder ul li a#onlink:hover {
  background:#FFF;
  color:#333333;
  text-shadow:1px 1px 1px #000; 
 }

 #box{
  width:655px;
height:400px;
border:1px solid #000;
  border-top:none;
padding:10px;
background:#999999;


 }

Result

Horizontal menu 1

HTML code

<div id="cmenu">
<div id="menu4">
    <ul>
        <li><a href="#">home</a></li>
            <li><a href="#">dress</a></li>
            <li><a href="#">shoes</a></li>
            <li><a href="#">about us</a></li>
         <ul>
    </div>

 </div> 

CSS code

#cmenu{
float:left;
width:100%;
height:50px;
background-color:#666666;
}

#menu4{
margin:0px;
padding:0px;
position:relative;
height:50px;
text-align:left;
list-style-type:none;
}

#menu4 li{
display:inline;
padding:10px 20px 10px 20px;
position:relative;
left:-20px;
border-right:1px #999999 solid;
}

#menu4 li a{
color:#FFFFFF;
text-decoration:none;
}
#menu4 li a:hover{
text-decoration:underline;

}

Result

Vertical menu drop down right

HTML code

<div id="menu5">
    <ul>
        <li><a href="#">home</a></li>
            <li><a href="#">dress</a></li>
            <li><a href="#">shoes</a></li>
            <li><a href="#">about us</a>
                <ul>
                    <li><a href="#">contact us</a></li>
                    <li><a href="#">our social media</a></li>
                    <li><a href="#">our company</a></li>
                </ul>
            </li>
<ul>

 </div> 

CSS code

#menu5{
margin:0px;
padding:0px;


}
#menu5 ul{
float:right;
}

#menu5 li{
display:block;
list-style:none;
background:#404040;
border:#00CC00;
width:150px;
padding-top:10px;
padding-bottom:10px;
padding-left:30px;

}

#menu5 ul li:hover{
background:#7A7A7A;
}

#menu5 a{
text-decoration:none;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;

}

#menu5 ul ul{
display:none;
}
#menu5 ul li:hover ul{
display:block;
position:relative;
top:-34px;
left:-180px;

}
#menu5 ul ul li{
display:block;

}

Result

Vertical Menu Right

HTML code

<div id="s"></div>
<div id="menu4">
    <ul>
        <li><a href="#">home</a></li>
            <li><a href="#">dress</a></li>
            <li><a href="#">shoes</a></li>
            <li><a href="#">about us</a></li>
<ul>

 </div>

CSS code

#s{
float:left
width:800px;
height:400px;
}
#menu4{
float:right;
width:100px;
height:400px;
margin-top:50px;
margin:0px;
  padding:0px;
}
#menu4 ul{
list-style:none;
}

#menu4 ul li{
float:right;
margin-top:15px;
background-color:#333333;
width:160px;
padding-top:10px;
padding-bottom:10px;
border-radius:20px 0px 0px 20px;
padding-right:20px;
box-shadow:-3px 2px 10px black;
-webkit-transition:padding-right 0.6s;
-moz-transition:padding-right 0.6s;
}

#menu4 ul li:hover{
padding-right:50px;
background-color:#666666;
}

#menu4 a{
float:right;
color:#FFFFFF;
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;

}


Result

CSS Slider3

HTML code

<div class="slider">
<input type="radio" id="control1" name="controls" checked="checked" />
<label for="control1"></label>
<input type="radio" id="control2" name="controls" checked="checked" />
<label for="control2"></label>
<input type="radio" id="control3" name="controls" checked="checked" />
<label for="control3"></label>
<input type="radio" id="control4" name="controls" checked="checked" />
<label for="control4"></label>

<div class="sliderinner">
<ul>
<li><img src="image/B1.jpg" /></li>
<li><img src="image/B4.jpg" /></li>
<li><img src="image/B3.jpg" /></li>
<li><img src="image/B2.jpg" /></li>
</ul>
</div>

</div>

CSS code

.slider{
display:block;
height:390px;
max-width:870px;
margin: outo;
margin-left:10px;
position:relative;
}

.sliderinner{
width: 100%;
height: 100%;
overflow:hidden;
position:relative;
}
.sliderinner>ul{
list-style:none;
height:100%;
width:500%;
overflow:hidden;
position: relative;
left:0px;
-webkit-transition: left .8s cubic-bezier(0.77,0,175,1);
-moz-transition: left .8s cubic-bezier(0.77,0,0.75,1);
-o-transition: left .8s cubic-bezier(0.77,0,0.75,1);
transition: left .8s cubic-bezier(0.77,0,0.75,1);
}

.sliderinner>ul>li{
width:870px;
height:390px;
float:left;
position:relative;
}

.sliderinner>ul>li>img{
margin:auto;
height:390px;
width:870px;
}

.sliderinner  input[type=radio]{
position:relative;
bottom:15px;
z-index:100;
visibility:hidden;
}

.slide label{
position: absolute;
left: 50%;
z-index:100;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
cursor: pointer;
-webkit-box-shadow: 0px 0px 3px rgba (0,0,0,.8);
-moz-box-shadow:0px 0px 3px rgba (0,0,0,.8);
box-shadow: 0px 0px 3px rgba (0,0,0,.8);
-webkit-transition: background-color .2s;
-moz-transition: background-color .2s;
transition: background-color .2s;
}

.slider input[type=radio]#control1:checked~.sliderinner>ul { left: 0 }
.slider input[type=radio]#control2:checked~.sliderinner>ul { left: -910px }
.slider input[type=radio]#control3:checked~.sliderinner>ul { left: -1780px }

.slider input[type=radio]#control4:checked~.sliderinner>ul { left: -2650px }

Result

Image : http://mall.liveitgorgeous.com/marketplace-fashion/all-clothing/tops/tees.html

CSS Slider2

HTML code

<div class="slider-wrapper">
<table <border="2" style="border-collapse:collapse;">
<tr>
<td>
<div class="scroll">
<ul class="s-thumbs">

<li><center><a href="#slide-1"><img src="image/DT1.jpg" /></a></center></li>
<li><center><a href="#slide-2"><img src="image/DT2.jpg" /></a></center></li>
<li><center><a href="#slide-3"><img src="image/DT3.jpg" /></a></center></li>
<li><center><a href="#slide-4"><img src="image/DT4.jpg" /></a></center></li>
<li><center><a href="#slide-5"><img src="image/DT5.jpg" /></a></center></li>
<li><center><a href="#slide-6"><img src="image/DT6.jpg" /></a></center></li>

</ul>
</div>
</td>
<td>
<ul class="s-slides">
<li id="slide-1" class="slideLeft"><img src="image/D1.jpg" /></li>
<li id="slide-2" class="slideLeft"><img src="image/D2.jpg" /></li>
<li id="slide-3" class="slideLeft"><img src="image/D3.jpg" /></li>
<li id="slide-4" class="slideLeft"><img src="image/D4.jpg" /></li>
<li id="slide-5" class="slideLeft"><img src="image/D5.jpg" /></li>
<li id="slide-6" class="slideLeft"><img src="image/D6.jpg" /></li>
</ul>
</td>

</tr>
</table>

</div>

CSS code

.scroll {
    background-color: #bbb;
    width: 200px;
    height: 400px;
    overflow: scroll;

}

.slider-wrapper ul,
.slider-wrapper li,
.slider-wrapper div,
.slider-wrapper img,
.slider-wrapper a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    list-style: none;
}

.slider-wrapper {
    height: 1000px;
width:1000px;
    overflow: hidden;
}

ul.s-thumbs li {
    float: center;
}

ul.s-slides,
ul.s-slides li,
ul.s-slides a,
ul.s-slides img {
    width: 683px;
    height: 410px;
    position: relative;
padding-left:10px;
padding-right:50px;
}

ul.s-slides {
    overflow: hidden;
    clear: both;
}

ul.s-slides li {
    position: absolute;

    z-index: 50;

/* Slide Left */
@-webkit-keyframes 'slideLeft' {
    0% { left: -1500px; }
20% { left: -1200px; }
40% { left: -900px; }
60% { left: -600px; }
80% { left: -300px; }
    100% { left: 0; }
}
ul.s-slides li.slideLeft:target {
    z-index: 100;

    -webkit-animation-name: slideLeft;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
}

/* Slide Right */
@-webkit-keyframes 'slideRight' {
    0% { left: 1500px; }
20% { left: 1200px; }
40% { left: 900px; }
60% { left: 600px; }
80% { left: 300px; }
    100% { left: 0; }
}

ul.s-slides li.slideRight:target {
    z-index: 100;

    -webkit-animation-name: slideRight;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;

}

Result

image : red :http://www.slashdress.com/maxi-dresses/2011-casual-dresses-womens-dresses-cotton-beach-skirt-casual.html/attachment/casual-dress-aeecpa

CSS Slider 1

HTML code

<div class="accordian">

<ul>

<li>

<div class="image_title">

<a href="#">Banner1</a>

</div>

<a href="#"><img src="image/B1.jpg" /></a>

</li>

<li>

<div class="image_title">

<a href="#">Banner1</a>

</div>

<a href="#"><img src="image/B2.jpg" /></a>

</li>

<li>

<div class="image_title">

<a href="#">Banner1</a>

</div>

<a href="#"><img src="image/B3.jpg" /></a>

</li>

<li>

<div class="image_title">

<a href="#">Banner4</a>

</div>

<a href="#"><img src="image/B4.jpg" /></a>

</li>

</ul>

</div>

CSS code

* {

margin: 0; 

padding: 0;

}

body {

background: #ccc; 

font-family: arial, verdana, tahoma;

}

/*Time to apply widths for accordian to work

Width of image = 740px

total images = 4

so width of hovered image = 6740px

width of un-hovered image = 40px - you can set this to anything

so total container width = 740 + 40*3 = 860px;

default width = 860/5 = 215x;

*/

.accordian {

width: 865px; height: 320px;

overflow: hidden;

margin: 100px auto;

box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);

-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);

-moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);

}

.accordian ul {

width: 2000px;

}

.accordian li {

position: relative;

display: block;

width: 215px;

float: left;

border-left: 1px solid #888;

box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);

-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);

-moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);

transition: all 0.5s;

-webkit-transition: all 0.5s;

-moz-transition: all 0.5s;

}

.accordian ul:hover li {width: 40px;}

.accordian ul li:hover {width: 740px;}

.accordian li img {

display: block;

}

.image_title {

background: rgba(0, 0, 0, 0.5);

position: absolute;

left: 0; bottom: 0;

width: 740px;

}

.image_title a {

display: block;

color: #fff;

text-decoration: none;

padding: 20px;

font-size: 16px;

}

Result

image : http://mall.liveitgorgeous.com/marketplace-fashion/all-clothing/tops/tees.html

              http://emilyssanctuary.com/2013/05/20/life-at-lipsy/

              http://www.koopoi.com/Clothing/c1/index.html