"My_Blog"
green is my favorite color^^
Selasa, 05 Juni 2018
Minggu, 12 Oktober 2014
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
<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
Sabtu, 11 Oktober 2014
Tab menu 1
HTML code
<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="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
<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="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
Langganan:
Postingan (Atom)