» »

Вертикальное металлическое меню сайта на CSS3


Вертикальное металлическое меню сайта на CSS3

Такое ощущение что эта навигация создана на одних стилях. Но нет вертикальное металлическое меню сайта на CSS3. Кто видел его на демо, тот вам скажет что такое не много где видал. Но во первых это точно навигационный какой то пульт и весь сайт грамотно можно разместить в меню. Так же под каждый раздел идет картинка. Стили делают ему не только белый цвет, но с отблеском что очень шикарно видеться.
Ставим код ниже в блок:
Код
<ul id="nav">  
  <li><a href="#"><img src="/images/t1.png" /> Главная</a></li>  
  <li><a href="#" class="sub" tabindex="1"><img src="images/t2.png" />HTML/CSS</a><img src="/images/up.gif" alt="" />  
  <ul>  
  <li><a href="#"><img src="/images/empty.gif" />Ссылка 1</a></li>  
  <li><a href="#"><img src="/images/empty.gif" />Ссылка 2</a></li>  
  <li><a href="#"><img src="/images/empty.gif" />Ссылка 3</a></li>  
  <li><a href="#"><img src="/images/empty.gif" />Ссылка 4</a></li>  
  <li><a href="#"><img src="/images/empty.gif" />Ссылка 5</a></li>  
  </ul>  
  </li>  
  <li><a href="#" class="sub" tabindex="1"><img src="images/t3.png" />jQuery/JS</a><img src="/images/up.gif" alt="" />  
  <ul>  
  <li><a href="#"><img src="/images/empty.gif" />Ссылка 6</a></li>  
  <li><a href="#"><img src="/images/empty.gif" />Ссылка 7</a></li>  
  <li><a href="#"><img src="/images/empty.gif" />Ссылка 8</a></li>  
  </ul>  
  </li>  
  <li><a href="#"><img src="/images/t2.png" />PHP</a></li>  
  <li><a href="#"><img src="/images/t2.png" />MySQL</a></li>  
  <li><a href="#"><img src="/images/t2.png" />XSLT</a></li>  
  </ul>
<li><a href="#"><img src="/images/empty.gif" />Ссылка 9</a></li>  
  <li><a href="#"><img src="images/empty.gif" />Ссылка 10</a></li>

А это в CSS:
Код
#nav {  
  border:3px solid #3e4547;  

  box-shadow:2px 2px 8px #000000;  
  border-radius:3px;  
  -moz-border-radius:3px;  
  -webkit-border-radius:3px;  
  }  
  #nav, #nav ul {  
  list-style:none;  
  padding:0;  
  width:200px;  
  }  
  #nav ul {  
  position:relative;  
  z-index:-1;  
  }  
  #nav li {  
  position:relative;  
  z-index:100;  
  }  
  #nav ul li {  
  margin-top:-23px;  

  -moz-transition: 0.4s linear 0.4s;  
  -ms-transition: 0.4s linear 0.4s;  
  -o-transition: 0.4s linear 0.4s;  
  -webkit-transition: 0.4s linear 0.4s;  
  transition: 0.4s linear 0.4s;  
  }  
  #nav li a {  
  background-color:#d4d5d8;  
  color:#000;  
  display:block;  
  font-size:12px;  
  font-weight:bold;  
  line-height:28px;  
  outline:0;  
  padding-left:15px;  
  text-decoration:none;  
  }  
  #nav li a.sub {  
  background:#d4d5d8 url("../images/down.gif") no-repeat;  
  }  
  #nav li a + img {  
  cursor:pointer;  
  display:none;  
  height:28px;  
  left:0;  
  position:absolute;  
  top:0;  
  width:200px;  
  }  
  #nav li a img {  
  border-width:0px;  
  height:24px;  
  line-height:28px;  
  margin-right:8px;  
  vertical-align:middle;  
  width:24px;  
  }  
  #nav li a:hover {  
  background-color:#bcbdc1;  
  }  
  #nav ul li a {  
  background-color:#eee;  
  border-bottom:1px solid #ccc;  
  color:#000;  
  font-size:11px;  
  line-height:22px;  
  }  
  #nav ul li a:hover {  
  background-color:#ddd;  
  color:#444;  
  }  
  #nav ul li a img {  
  background: url("../images/bulb.png") no-repeat;  
  border-width:0px;  
  height:16px;  
  line-height:22px;  
  margin-right:5px;  
  vertical-align:middle;  
  width:16px;  
  }  
  #nav ul li:nth-child(odd) a img {  
  background:url("../images/bulb2.png") no-repeat;  
  }  
  #nav a.sub:focus {  
  background:#bcbdc1;  
  outline:0;  
  }  
  #nav a:focus ~ ul li {  
  margin-top:0;  

  -moz-transition: 0.4s linear;  
  -ms-transition: 0.4s linear;  
  -o-transition: 0.4s linears;  
  -webkit-transition: 0.4s linears;  
  transition: 0.4s linear;  
  }  
  #nav a:focus + img, #nav a:active + img {  
  display:block;  
  }  
  #nav a.sub:active {  
  background:#bcbdc1;  
  outline:0;  
  }  
  #nav a:active ~ ul li {  
  margin-top:0;  
  }  
  #nav ul:hover {  
  display:block;  
  }
15.07.2012 Просмотров: 1248 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Комментарий: 0
avatar