Wapmaster MWb: menu arrow menawan css mywapblog

Thursday, July 25, 2013

menu arrow menawan css mywapblog

#navigation{
overflow: hidden;
width: 100%;
clear:both;margin: 0 auto;
  padding: 0; margin: 0 6px;
}
#navigation span{ 
float: left;
  margin: 0;
  padding: 0;
  list-style: none;
 margin-left: auto !important;
  margin-right: auto !important;
margin: 0 .5em 0 1em;
font-size: 13px;
}
#navigation a
{
padding: .7em 1em .7em 2em;
  float: left;
  position: relative;
text-decoration: none;
color: #fff; margin-right:4px;
}
#navigation a:hover{
background: #0f53b0;
}
#navigation a:before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-width: 1.5em 0 1.5em 1em;
border-style: solid;
border-color: #1478ff #1478ff #1478ff transparent;
left: -1em; z-index:1;
}

#navigation a:after{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
border-left: 1em solid #1478ff;
right: -1em; z-index:2;
}

#navigation span:nth-child(3) a, #navigation
span:nth-child(2) a, #navigation
span:nth-child(1) a {
text-align: right; text-transform:
capitalize;  margin-left: 12px;
padding: 4px 4px 8px 8px; background:#1478ff;}

#navigation span:first-child a{
  padding-left: 1em;
}

NOTE :
margin-left: 12px : ini buat mengatur jarak antar menu
sebagai catatan 1em > 12pt > 16px > 100%

Demikian dari itu Tambahan, kritik dan saran dipersilahkan :)

Wapmaster MWb

Pages

Thursday, July 25, 2013

menu arrow menawan css mywapblog

Baca Juga :

No comments:

Post a Comment