Кот

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Кот » Фишки и примочки » CSS - навигации


CSS - навигации

Сообщений 21 страница 30 из 31

21

http://uploads.ru/i/c/H/E/cHELb.png
HTML, где хотите видеть само меню

Код:
<table cellspacing="0"> 
<tr> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td>
</tr> 
 
</table>

Цвета style_cs.css

Код:
a.menu:link, a.menu:visited, a.menu:active{text-decoration: none;

background: #4874bc;
width: 90px;
font-family: arial black;
font-size: 15px;
text-decoration: none;
color: #97beff;
display: block;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
border-bottom: 7px solid #4874bc;
text-align: center;
text-transform: uppercase;
padding-top: 10px;
padding-bottom: 10px;
}
a.menu:hover {
border-bottom: 7px solid #336699;
color: #4284c5;
}

0

22

http://s59.radikal.ru/i164/1206/7a/cbee7bedbc06.png
HTML

Код:
<table cellspacing="0"> 
<tr> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> </tr> 
<tr> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> </tr> 
<tr> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> </tr> 
<tr> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> </tr> 
<tr> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> 
</tr> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> 
</tr> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> 
</tr> 
 
</table>

CSS

Код:
a.menu:link, a.menu:visited, a.menu:active {
text-decoration:none;
font-family:Calibri;
font-size:13px;
color:#790000;
display:block;
text-align:center;
width:130px;
background-color:#000000;
font-weight:normal;
-moz-border-radius:3px;
}

a.menu:hover {
background-image:url('http://soundofmydreams.ru/img/cssmenu9.jpg');
-moz-border-radius:10px;
cursor:crosshair;
font-weight:bold;
}

0

23

http://s019.radikal.ru/i629/1206/12/9dbaa2be3aa1.png
HTML

Код:
<table cellspacing="0"> 
<tr> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td>
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> 
</tr> 
 
</table>

CSS

Код:
a.menu:link, a.menu:visited, a.menu:active{text-decoration: none;

background: grey;
width: 70px;
padding-top: 20px;
padding-bottom: 20px; 
font-family: century gothic;
font-size: 12px;
text-decoration: none;
color: #800000;
opacity: 1.0;filter: alpha(opacity=100); -moz-opacity: 0.5;
display:block;
text-align:center;
}
a.menu:hover {
font-style: italic;
opacity: 0.3;filter: alpha(opacity=100); -moz-opacity: 1.0;
}

0

24

http://s017.radikal.ru/i434/1206/28/df6a6f501425.png
HTML

Код:
<table cellspacing="0"> 
<tr> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td>
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> 
</tr> 
 
</table>

CSS

Код:
a.menu:link, a.menu:visited, a.menu:active{text-decoration: none;
background: white;
padding-top:20px;
padding-bottom:20px;
font-family: verdana;
font-size: 12px;
text-decoration: none;
color: grey;
border-left: 5px solid white;
border-right: 5px solid white; 
text-align:center;
width:70px;
display:block;
}
a.menu:hover {
border-left: 5px solid black;
border-right: 5px solid black; }

0

25

http://s017.radikal.ru/i420/1206/c2/b56954c54855.png
HTML

Код:
<table cellspacing="0"> 
<tr> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> </tr> 
<tr> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> </tr> 
<tr> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> </tr> 
<tr> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> </tr> 
<tr> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> 
</tr> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> 
</tr> 
<td> <a class="menu" href="http://soundofmydreams.ru/">link</a></td> 
</tr> 
 
</table>

CSS

Код:
a.menu:link, a.menu:visited, a.menu:active{text-decoration: none;
 
background: white;
width: 50px;
padding-left: 20px;
padding-right: 20px;
border-bottom: 3px dotted white;
font-family: verdana;
font-size: 12px;
text-decoration: none;
color: black;
}
a.menu:hover {
background: #c0c0c0;
border-bottom: 3px dotted black;}

0

26

http://s45.radikal.ru/i107/1206/b5/05f992b0cdf1.png
HTML

Код:
<div class='cssmenu'>
<ul>
   <li class='active '><a href='#'><span>Home</span></a></li>
   <li><a href='#'><span>Products</span></a></li>
   <li><a href='#'><span>Company</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

CSS

Код:
.cssmenu {
	width: 200px;
	border-style: solid solid none solid;
	border-color: #0e69be;
	border-size: 1px;
	border-width: 1px;
	}

.cssmenu ul{
	list-style:none;
	margin:0px;
	padding:0px;
	}
.cssmenu li a {
	height: 32px;
  	height: 24px;
	text-decoration: none;
	font-weight:normal;
	}	
	
.cssmenu li a:link, 
.cssmenu li a:visited {
	color: #0e69be;
	display: block;
	background: url(http://s004.radikal.ru/i206/1206/f2/11ddb1ec69dc.jpg);
	background-repeat:no-repeat;
	padding: 8px 0 0 10px;
	}
	
.cssmenu li a:hover {
	color: #0e69be;
	background: url(http://s004.radikal.ru/i206/1206/f2/11ddb1ec69dc.jpg) 0 -32px;
	background-repeat:no-repeat;
	padding: 8px 0 0 10px;
	}
	
.cssmenu li a:active {
	color: #0e69be;
	background: url(http://s004.radikal.ru/i206/1206/f2/11ddb1ec69dc.jpg) 0 -64px;
	background-repeat:no-repeat;
	padding: 8px 0 0 10px;
	}

0

27

http://s53.radikal.ru/i140/1206/83/5666ae54ec07.png
HTML

Код:
<div class='cssmenu'>
<ul>
   <li class='active '><a href='#'><span>Home</span></a></li>
   <li><a href='#'><span>Products</span></a></li>
   <li><a href='#'><span>Company</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

CSS

Код:
.cssmenu {
	margin: 0;
	padding: 0;
	font-family: Verdana, Helvetica, Arial, sans-serif;
}
.cssmenu{
	width: 193px;
}
.cssmenu ul{
	list-style: none;
	text-indent: 0px;
}
.cssmenu li{
	margin-top: 3px;
}
.cssmenu a{
	font: 12px Verdana;
	padding: 4px;
	color: #646464;
	display:block;
	padding: 6px 30px;
	height: 20px;
	text-decoration: none;
	background: url('http://s019.radikal.ru/i635/1206/c9/bfba13a0da64.gif');
}
.cssmenu a:hover{
	background: url('http://s58.radikal.ru/i159/1206/e9/819e90c3a0b4.gif') no-repeat right;
	padding: 6px 40px;
}

0

28

http://s019.radikal.ru/i608/1206/1b/e04caf76d6a7.png
HTML

Код:
<div class='cssmenu'>
<ul>
   <li class='active '><a href='#'><span>Home</span></a></li>
   <li><a href='#'><span>Products</span></a></li>
   <li><a href='#'><span>Company</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

CSS

Код:
.cssmenu {
list-style: none;
width: 150px;
padding-top: 35px;
mine-height: 125px;
padding-left: 50px;
background: url(http://i081.radikal.ru/1206/56/08ab8868e2fa.png) no-repeat;
}
.cssmenu ul{
	list-style: none;
	margin: 0px;
	padding: 0px;
}

.cssmenu a:link{
color: #b8b8b8;
font-family: Trebuchet MS;
font-size: 14px;
height: 23px;
display:block;
text-decoration: none;
padding: 8px 0 0 0px;
font-weight:normal;
}

.cssmenu a:visited{
text-decoration: line-through;
}

.cssmenu a:hover{
color: #595959;
}

.cssmenu a:active{
color: #dbdbdb;
}

0

29

http://s54.radikal.ru/i144/1206/10/a541bdd8c623.png
HTML

Код:
<div class='cssmenu'>
<ul>
   <li class='active '><a href='#'><span>Home</span></a></li>
   <li><a href='#'><span>Products</span></a></li>
   <li><a href='#'><span>Company</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

CSS

Код:
.cssmenu {
	background: #333;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 12em;
}
.cssmenu li {
	font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}
.cssmenu a {
	background: #333;
	border-bottom: 1px solid #393939;
	color: #ccc;
	display: block;
	margin: 0;
	padding: 8px 12px;
	text-decoration: none;
	font-weight:normal;
}
.cssmenu a:hover {
	background: #2580a2 url('http://s018.radikal.ru/i522/1206/c5/b696de44e36b.gif') left center no-repeat;
	color: #fff;
	padding-bottom: 8px;
}

0

30

Горизонтальное черное выпадающее, двухуровневое меню
http://www.nizckod.ru/_ld/54/13974240.png

Разметка меню:

Код:
<ul class="dark_menu"> 
  <li><a href="#" class="selected">NIZCKOD</a></li> 
  <li> 
  <a href="www.nizckod.ru">NIZCKOD</a> 
  <!-- Sub Menu Begin --> 
  <ul> 
  <li><a href="#">NIZCKOD</a></li> 
  <li><a href="#">NIZCKOD</a></li> 
  <li><a href="#">NIZCKOD</a></li> 
  <li><a href="#">NIZCKOD</a></li> 
  </ul> 
  <!-- Sub Menu End --> 
  </li> 
  <li> 
  <a href="#">NIZCKOD</a> 
  <!-- Sub Menu Begin --> 
  <ul> 
  <li><a href="#">NIZCKOD</a></li> 
  <li><a href="#">NIZCKOD</a></li> 
  <li><a href="#">NIZCKOD</a></li> 
  <li><a href="#">NIZCKOD</a></li> 
  </ul> 
  <!-- Sub Menu End --> 
  </li> 
  <li><a href="#">NIZCKOD</a></li> 
  </ul>

Стиль:

Код:
/* Main Dark Menu Unordered List First Level Style */ 
  ul.dark_menu { 
  list-style: none; 
  padding: 0; 
  font-family: Arial; 
  font-size: 14px; 
  line-height: 14px; 
  } 

  /* Clears all floated List Items */ 
  ul.dark_menu:after { 
  content: ""; 
  clear: both; 
  display: block; 
  overflow: hidden; 
  visibility: hidden; 
  width: 0; 
  height: 0; 
  } 

  /* First Level List Items Style */ 
  ul.dark_menu li { 
  float: left; 
  margin: 0 0 0 10px; 
  position: relative; 
  } 

  /* First List Item in First Level Style */ 
  ul.dark_menu li:first-child { 
  margin: 0; 
  } 

  /* List Items Links Style */ 
  ul.dark_menu li a, ul.dark_menu li a:link { 
  color: #161312; 
  text-decoration: none; 
  display: block; 
  padding: 10px 26px; 
   
  /* Text Shadow */ 
  text-shadow: 0 1px 0 #4b433e; 
   
  /* Gradient Background */ 
  background: #362f2c; /* Old browsers */ 
  background: -moz-linear-gradient(top, #362f2c 0%, #282321 100%); /* FF3.6+ */ 
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#362f2c), color-stop(100%,#282321)); /* Chrome,Safari4+ */ 
  background: -webkit-linear-gradient(top, #362f2c 0%,#282321 100%); /* Chrome10+,Safari5.1+ */ 
  background: -o-linear-gradient(top, #362f2c 0%,#282321 100%); /* Opera11.10+ */ 
  background: -ms-linear-gradient(top, #362f2c 0%,#282321 100%); /* IE10+ */ 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#362f2c', endColorstr='#282321',GradientType=0 ); /* IE6-9 */ 
  background: linear-gradient(top, #362f2c 0%,#282321 100%); /* W3C */ 

  /* Border Radius */ 
  -webkit-border-radius: 4px; 
  -moz-border-radius: 4px; 
  border-radius: 4px; 

  /* Box Shadows */ 
  -webkit-box-shadow: inset 0 1px 0 #564b46, 
  0 1px 1px #181514; 
  -moz-box-shadow: inset 0 1px 0 #564b46, 
  0 1px 1px #181514; 
  box-shadow: inset 0 1px 0 #564b46, 
  0 1px 1px #181514; 

  /* Transition Effect */ 
  -webkit-transition: all 1s ease; 
  -moz-transition: all 1s ease; 
  -o-transition: all 1s ease; 
  -ms-transition: all 1s ease; 
  transition: all 1s ease; 
  } 

  /* List Items Links Hover State Style */ 
  ul.dark_menu li a:hover { 
  color: #73635e; 

  /* Text Shadow */ 
  text-shadow: 0 1px 1px #000; 

  /* Gradient Background */ 
  background: #282321; /* Old browsers */ 
  background: -moz-linear-gradient(top, #282321 0%, #362f2c 99%, #362f2c 100%); /* FF3.6+ */ 
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#282321), color-stop(99%,#362f2c), color-stop(100%,#362f2c)); /* Chrome,Safari4+ */ 
  background: -webkit-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); /* Chrome10+,Safari5.1+ */ 
  background: -o-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); /* Opera11.10+ */ 
  background: -ms-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); /* IE10+ */ 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#282321', endColorstr='#362f2c',GradientType=0 ); /* IE6-9 */ 
  background: linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); /* W3C */ 

  /* Transition Effect */ 
  -webkit-transition: all 1s ease; 
  -moz-transition: all 1s ease; 
  -o-transition: all 1s ease; 
  -ms-transition: all 1s ease; 
  transition: all 1s ease; 
  } 

  /* List Items Links Active and Selected State Style */ 
  ul.dark_menu li a.selected, ul.dark_menu li a:active { 
  color: #73635e; 
  background: #282321; 

  /* Text Shadow */ 
  text-shadow: 0 1px 1px #000; 

  /* Box Shadows */ 
  -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6), 
  0 1px 0 #5e524f; 
  -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6), 
  0 1px 0 #5e524f; 
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6), 
  0 1px 0 #5e524f; 
   
  /* Transition Effect */ 
  -webkit-transition: all 1s ease; 
  -moz-transition: all 1s ease; 
  -o-transition: all 1s ease; 
  -ms-transition: all 1s ease; 
  transition: all 1s ease; 
  } 

  /* Sub Menu Unordered List Second Level Style */ 
  ul.dark_menu li ul { 
  display: none; 
  } 

  /* Before Second Level Unordered List Style */ 
  ul.dark_menu li ul:before { 
  content: " "; 
  position: absolute; 
  display: block; 
  z-index: 1500; 
  left: 0; 
  top: -10px; 
  height: 10px; 
  width: 100%; 
  } 

  /* Sub Menu Unordered List Second Level Style 
  When Parent List Item is Hovered */ 
  ul.dark_menu li:hover ul { 
  position: absolute; 
  display: block; 
  z-index: 1000; 
  left: 0; 
  top: 44px; 
  padding: 5px 0; 
  list-style: none; 
  background: #282321; 

  /* Box Shadows */ 
  -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6), 
  0 1px 0 #5e524f; 
  -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6), 
  0 1px 0 #5e524f; 
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6), 
  0 1px 0 #5e524f; 

  /* Border Radius */ 
  -webkit-border-radius: 4px; 
  -moz-border-radius: 4px; 
  border-radius: 4px; 
  } 

  /* Second Level Menu List Items Style */ 
  ul.dark_menu li ul li { 
  float: none; 
  margin: 0 10px;  
  border-bottom: 1px solid #191614; 
  border-top: 1px solid #3a3230; 
  } 

  /* First List Item in Second Level Menu Style */ 
  ul.dark_menu li ul li:first-child { 
  margin: 0 10px; 
  border-top: 0 none; 
  } 

  /* Last List Item in Second Level Menu Style */ 
  ul.dark_menu li ul li:last-child { 
  border-bottom: 0 none; 
  } 

  /* Second Level List Items Links Style */ 
  ul.dark_menu li ul li a, ul.dark_menu li ul li a:link { 
  color: #73635e; 
  display: block; 
  background: transparent none; 
  padding: 10px 20px 10px 5px; 
  white-space: nowrap; 

  /* Text Shadow */ 
  text-shadow: 0 1px 2px #000; 
   
  /* Box Shadows */ 
  -webkit-box-shadow: 0 0 0 rgba(0,0,0,0); 
  -moz-box-shadow: 0 0 0 rgba(0,0,0,0); 
  box-shadow: 0 0 0 rgba(0,0,0,0); 

  /* Border Radius */ 
  -webkit-border-radius: 0px; 
  -moz-border-radius: 0px; 
  border-radius: 0px; 
  } 

  /* Second Level List Items Links Hover State Style */ 
  ul.dark_menu li ul li a:hover { 
  text-decoration: underline; 
  background: #2a2523; 
  }

Источник: колорфорум

0


Вы здесь » Кот » Фишки и примочки » CSS - навигации


Рейтинг форумов | Создать форум бесплатно © 2007–2016 «QuadroSystems» LLC