24/08/15 Открыта запись на обучение вёрстки для майбба - ссылка на тему

Избранные уроки Photoshop


Вверх
Вниз

COLOR MATE

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

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


Вы здесь » COLOR MATE » Каталог CSS|JS » CSS NAVIGATIONS


CSS NAVIGATIONS

Сообщений 1 страница 20 из 20

1

СБОР РАЗНЫХ ЦСС НАВИГАЦИЙ.

http://savepic.ru/2917417.png
cs.css

Код:
a.tvm, a.tvm:active, a.tvm:link, a.tvm:visited {
color : #dbd9d8;
background : #ff5400;
font-size : 17px;
text-decoration : none;
font-family: georgia;
line-height: 30px;
font-weight: normal;
text-transform: lowercase;
border: 0px;
text-align : center;
margin : 2px;
padding : 5px;
-moz-border-radius:10%;
letter-spacing: -2px;
font-style:italic;
}

a.tvm:hover {
color : #ff5400;
background : #dbd9d8;
font-size : 17px;
text-decoration : none;
font-family: georgia;
line-height: 30px;
font-weight: normal;
text-transform: lowercase;
border: 0px;
text-align : center;
margin : 2px;
padding : 5px;
-moz-border-radius:10%;
letter-spacing: -2px;
font-style:italic;
	}

HTML

Код:
<a href="http://thevioletmaniac.narod.ru/" class="tvm" target="">the</a>
<a href="http://thevioletmaniac.narod.ru/" class="tvm" target="">violet</a>
<a href="http://thevioletmaniac.narod.ru/" class="tvm" target="">maniac</a>

http://savepic.net/1747303.png
cs.css

Код:
a.tvm, a.tvm:active, a.tvm:link, a.tvm:visited {
color : #ffffff;
background : #000000;
font-size : 13px;
text-decoration : none;
font-family:century gothic;
font-weight: normal;
border: 0px;
margin-top:7px;
padding-left:7px;
padding-right:7px;
padding-top:22px;
padding-bottom:22px;
text-align:center;
font-style:normal;
display:block;
width:60px;
border:0px solid #;
text-transform:lowcase; 
margin-bottom: 0px; 
margin-top: 0px; 
letter-spacing:1px;
line-height: 18px;
}

a.tvm:hover {
color : #000000;
background : #e8000b;
font-size : 13px;
text-decoration : none;
font-family:century gothic;
font-weight: normal;
border: 0px;
margin-top:7px;
padding-left:7px;
padding-right:7px;
padding-top:22px;
padding-bottom:22px;
text-align:center;
font-style:normal;
display:block;
width:60px;
border:0px solid #;
text-transform:lowcase; 
margin-bottom: 0px; 
margin-top: 0px; 
letter-spacing:1px;
line-height: 18px;
	}






a.tvm2, a.tvm2:active, a.tvm2:link, a.tvm2:visited {
color : #ffffff;
background : #000000;
font-size : 13px;
text-decoration : none;
font-family:century gothic;
font-weight: normal;
border: 0px;
margin-top:7px;
padding-left:7px;
padding-right:7px;
padding-top:22px;
padding-bottom:22px;
text-align:center;
font-style:normal;
display:block;
width:60px;
border:0px solid #;
text-transform:lowcase; 
margin-bottom: 0px; 
margin-top: 0px; 
letter-spacing:1px;
line-height: 18px;
}

a.tvm2:hover {
color : #000000;
background : #ffff08;
font-size : 13px;
text-decoration : none;
font-family:century gothic;
font-weight: normal;
border: 0px;
margin-top:7px;
padding-left:7px;
padding-right:7px;
padding-top:22px;
padding-bottom:22px;
text-align:center;
font-style:normal;
display:block;
width:60px;
border:0px solid #;
text-transform:lowcase; 
margin-bottom: 0px; 
margin-top: 0px; 
letter-spacing:1px;
line-height: 18px;
	}






a.tvm3, a.tvm3:active, a.tvm3:link, a.tvm3:visited {
color : #ffffff;
background : #000000;
font-size : 13px;
text-decoration : none;
font-family:century gothic;
font-weight: normal;
border: 0px;
margin-top:7px;
padding-left:7px;
padding-right:7px;
padding-top:22px;
padding-bottom:22px;
text-align:center;
font-style:normal;
display:block;
width:60px;
border:0px solid #;
text-transform:lowcase; 
margin-bottom: 0px; 
margin-top: 0px; 
letter-spacing:1px;
line-height: 18px;
}

a.tvm3:hover {
color : #000000;
background : #ff00ff;
font-size : 13px;
text-decoration : none;
font-family:century gothic;
font-weight: normal;
border: 0px;
margin-top:7px;
padding-left:7px;
padding-right:7px;
padding-top:22px;
padding-bottom:22px;
text-align:center;
font-style:normal;
display:block;
width:60px;
border:0px solid #;
text-transform:lowcase; 
margin-bottom: 0px; 
margin-top: 0px; 
letter-spacing:1px;
line-height: 18px;
	}

HTML

Код:
<table><tr><td>
<a href="http://thevioletmaniac.narod.ru/" class="tvm" target="">index</a></td>
<td>
<a href="http://thevioletmaniac.narod.ru/" class="tvm2" target="">index</a></td>

<td>
<a href="http://thevioletmaniac.narod.ru/" class="tvm3" target="">index</a></td>


</tr>





<tr><td>
<a href="http://thevioletmaniac.narod.ru/" class="tvm3" target="">index</a></td>
<td>
<a href="http://thevioletmaniac.narod.ru/" class="tvm" target="">index</a></td>

<td>
<a href="http://thevioletmaniac.narod.ru/" class="tvm2" target="">index</a></td>


</tr>


<tr><td>
<a href="http://thevioletmaniac.narod.ru/" class="tvm2" target="">index</a></td>
<td>
<a href="http://thevioletmaniac.narod.ru/" class="tvm3" target="">index</a></td>

<td>
<a href="http://thevioletmaniac.narod.ru/" class="tvm" target="">index</a></td>


</tr>




</table>

0

2

http://savepic.net/1707367.png
cs.css

Код:
A.navi:link, A.navi:active, A.navi:visited {background:#000000;font-family: small fonts;padding:10px;font-size: 7px;text-align:left;line-height: 7px;letter-spacing: 2px;color:#ffffff;text-transform: uppercase;display:block;width:160px;margin:1px;font-style:normal;}

A.navi:hover {background-image:url('http://s45.radikal.ru/i109/1008/c9/99903e342ce1.jpg');font-family: small fonts;padding:10px;font-size: 7px;text-align:right;line-height: 7px;letter-spacing: 2px;color:#f0f0f0;text-transform: uppercase;display:block;width:160px;margin:1px; text-decoration: none; font-style:normal;font-weight:normal;}

HTML

Код:
<a href="#" class="navi" target="frame">home page</a>
<a href="#" class="navi" target="frame">links</a>
<a href="#" class="navi" target="frame">contact</a>
<a href="#" class="navi" target="frame">content</a>
<a href="#" class="navi" target="frame">chat-box</a>

thevioletmaniac

0

3

http://savepic.ru/2905129.jpg

cs.css

Код:
a.tvm, a.tvm:active, a.tvm:link, a.tvm:visited {
font-family: tahoma;
font-size: 11px;
background-color:#832480;
color: #dcd3dc; 
font-weight: normal;
text-align:center;
display: block;
margin: 1px;
text-decoration: none;
border-left-style: solid;
border-left-color: #dcd3dc;
border-left-width: 5px;
width:200px;
}

a.tvm:hover {
font-family: tahoma;
font-size: 11px;
color: #832480; 
background-color:#dcd3dc;
display: block;
font-weight: bold;
text-align:center;
cursor:crosshair; 
text-decoration: none;
border-left-style: solid;
border-left-color: #832480;
border-left-width: 5px;
width:200px;
}

HTML

Код:
<a href="http://thevioletmaniac.narod.ru/" class="tvm" target="">каждый </a>
<a href="http://thevioletmaniac.narod.ru/" class="tvm" target="">охотник</a>
<a href="http://thevioletmaniac.narod.ru/" class="tvm" target="">желает</a>
<a href="http://thevioletmaniac.narod.ru/" class="tvm" target="">знать</a>
<a href="http://thevioletmaniac.narod.ru/" class="tvm" target="">где </a>
<a href="http://thevioletmaniac.narod.ru/" class="tvm" target="">сидит</a>
<a href="http://thevioletmaniac.narod.ru/" class="tvm" target="">фазан</a>

+2

4

http://savepic.ru/2891816.jpg
cs.css

Код:
a.menu:link, a.menu:visited, a.menu:active{text-decoration: none;
 
background-color: grey;
font:normal 7pt century gothic;
color: #ffffff;
line-height: 14pt;
text-transform: uppercase; 
text-align: center;
display:block;
width:120px;
border-bottom: 2px solid  grey;
}
a.menu:hover {
background-color:#666666;
color:  #FFFFFF ;
border-bottom :2px solid  #ffffff;}

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>

+1

5

http://savepic.net/1739128.jpg
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;
border-top: 3px solid #800000;
font-family: verdana;
font-size: 12px;
text-decoration: none;
font-style: italic;
color: #800000;
border-bottom: 3px solid grey;
display:block;
text-align:center;
}
a.menu:hover {
background: #c0c0c0;
border-top: 3px solid #c0c0c0;
border-bottom: 3px solid #800000; }

0

6

http://savepic.ru/2934827.png

HTML:

Код:
<table bgcolor="#000000"> 
<tr> 
<td> <a class="men" href="http://soundofmydreams.ru/" title="�����" >link</a></td> 
<td> <a class="men" href="http://soundofmydreams.ru/" title="�����" >link</a></td> 
<td> <a class="men" href="http://soundofmydreams.ru/" title="�����" >link</a></td> 
<td> <a class="men" href="http://soundofmydreams.ru/" title="�����" >link</a></td> 
<td> <a class="men" href="http://soundofmydreams.ru/" title="�����" >link</a></td> 
</tr> 
 
</table>

CSS:

Код:
a.men:link, a.men:visited, a.men:active{
text-decoration: none;
background: #000000;
width: 85px;
padding-top: 5px;
padding-bottom: 5px; 
font-family: Verdana;
font-size: 12px;
color: #FFFFFF;
display: block;
-moz-border-radius: 7px;
border-radius:7px;
text-align:center;
}
a.men:hover {
background: #c0c0c0;
-moz-border-radius: 7px;
border-radius:7px;
cursor: default;
}

soundofmydreams

+2

7

Pure CSS3 Vertial Animated Menu
http://uploads.ru/i/O/n/y/OnyJH.jpg
HTML верх

Код:
<div class="container">
  <ul class="nice-menu">
    <li class="orange">
      <a href="">Home</a>
    </li>
    <li class="red">
      <a href="">About</a>
    </li>
    <li class="green">
      <a href="">Portfolio</a>
    </li>
    <li class="blue">
      <a href="">Blog</a>
    </li>
    <li class="bright">
      <a href="">Contact</a>
    </li>
    <li class="red">
      <a href="">What not?</a>
    </li>
  </ul>
</div>

Цвета style_cs.css

Код:
/**
 * Name: Nice Menu
 * Version: 0.1
 * Author: Marcell Jusztin - http://www.marcelljusztin.com
 * Description: A simple, elegant, colorful, CSS3 animated menu
 * Tags: css3, animation, menu, simple, elegant, colourful
 * License: http://creativecommons.org/licenses/by-sa/3.0/
**/

ul.nice-menu {
  list-style: none;
  margin-top: 30px;
  width: 300px;
}

@-moz-keyframes expand {  
  0% {
    width: 5px;
    padding-left: 0px;
  }
  
  100% {
    width: 200px;
    padding-left: 20px;
  }
}

@-moz-keyframes expand-bounce {
  0% {
    width: 5px;
    padding-left: 0px;
  }
  
  50% {
    width: 200px;
  }
  
  70% {
    width: 170px;
  }
  
  80% {
    width: 200px;
  }
  
  90% {
    width: 190px;
  }
  
  100% {
    width: 200px;
    padding-left: 20px;
  }
}

@-webkit-keyframes expand {  
  0% {
    width: 5px;
    padding-left: 0px;
  }
  
  100% {
    width: 200px;
    padding-left: 20px;
  }
}

@-webkit-keyframes expand-bounce {  
  0% {
    width: 5px;
    padding-left: 0px;
  }
  
  50% {
    width: 200px;
  }
  
  70% {
    width: 170px;
  }
  
  80% {
    width: 200px;
  }
  
  90% {
    width: 190px;
  }
  
  100% {
    width: 200px;
    padding-left: 20px;
  }
}

@-moz-keyframes shrink {
  
  0% {
    width: 200px;
    padding-left: 20px;
  }
  
  100% {
    width: 5px;
    padding-left: 0px;
  }
}

@-moz-keyframes shrink-bounce {
  
  0% {
    width: 200px;
    padding-left: 20px;
  }
  
  50% {
    width: 5px;
  }
  
  70% {
    width: 35px;
  }
  
  80% {
    width: 5px;
  }
  
  90% {
    width: 15px;
  }
  
  100% {
    width: 5px;
    padding-left: 0px;
  }
}

@-webkit-keyframes shrink {
  
  0% {
    width: 200px;
    padding-left: 20px;
  }
  
  100% {
    width: 5px;
    padding-left: 0px;
  }
}

@-webkit-keyframes shrink-bounce {
  
  0% {
    width: 200px;
    padding-left: 20px;
  }
  
  50% {
    width: 5px;
  }
  
  70% {
    width: 35px;
  }
  
  80% {
    width: 5px;
  }
  
  90% {
    width: 15px;
  }
  
  100% {
    width: 5px;
    padding-left: 0px;
  }
}

ul.nice-menu li {
  width: 5px;
  height: 30px;
  line-height: 20px;
  padding: 0px 0px 0px 0px;
  margin-top: 3px;
  background: transparent;
  width: 5px;
}

ul.nice-menu.tight li {
  margin-top: 0 !important;
}

ul.nice-menu li {
  -moz-animation-name: shrink;
  -moz-animation-duration: 0.5s;
  -moz-animation-timing-function: ease-in-out;
  -webkit-animation-name: shrink;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-timing-function: ease-in-out;
}

ul.nice-menu.bounce li {
  -moz-animation-name: shrink-bounce;
  -moz-animation-duration: 0.5s;
  -moz-animation-timing-function: ease-in-out;
  -webkit-animation-name: shrink-bounce;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-timing-function: ease-in-out;
}

ul.nice-menu li:hover {
  width: 200px;
  padding-left: 20px;
  -moz-animation-name: expand;
  -moz-animation-duration: 0.5s;
  -moz-animation-timing-function: ease-in-out;
  -webkit-animation-name: expand;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-timing-function: ease-in-out;
}

ul.nice-menu.bounce li:hover {
  -moz-animation-name: expand-bounce;
  -moz-animation-duration: 0.5s;
  -moz-animation-timing-function: ease-in-out;
  -webkit-animation-name: expand-bounce;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-timing-function: ease-in-out;
}

ul.nice-menu a {
  width: 200px;
  text-decoration: none;
  font-size: 14px;
  color: #FFF;
  text-shadow: 0px 0px 3px #333;
  font-weight: bold;
  position: absolute;
  padding: 5px 0px;
  padding-left: 20px;
}

ul.nice-menu li.green {
  background: rgb(107,186,112);
}

ul.nice-menu li.blue {
  background: rgb(78,92,127);
}

ul.nice-menu li.orange {
  background: rgb(216,121,40);
}

ul.nice-menu li.dark {
  background: rgb(42,32,30);
} 

ul.nice-menu li.red {
  background: rgb(178,59,30);
}


ul.nice-menu li.bright {
  background: rgb(241,249,210);
}

0

8

http://uploads.ru/i/o/Q/f/oQfwb.png
HTML, где хотите видеть само меню

Код:
<table cellspacing="0"> 
<tr> 
<td> <a class="menu1" href="#">menu</a></td> 
<td> <a class="menu2" href="#">menu</a></td> 
<td> <a class="menu2" href="#">menu</a></td> 
<td> <a class="menu2" href="#">menu</a></td> 
<td> <a class="menu2" href="#">menu</a></td> 
<td> <a class="menu2" href="#">menu</a></td> 
<td> <a class="menu2" href="#">menu</a></td>
</tr></table>

Цвета style_cs.css

Код:
a.menu1:link, a.menu1:visited, a.menu1:active{
background-color: #e8dfc8;
font:normal 7pt Georgia;
color: #554855;
line-height: 14pt;
text-decoration: none;
text-transform:lowercase; 
border-bottom:2px solid  #b0b9c9;
border-top :5px solid  #c6d9c3;
text-align: center;
display:block;
width:70px;}
a.menu1:hover {
background-color:#dbcab3;
color:  #554855 ;
border-bottom:2px solid  #c6d9c3;
border-top:5px solid  #e8dfc8;}


a.menu2:link, a.menu2:visited, a.menu2:active{text-decoration: none;

background-color: #e8dfc8;
font:normal 7pt arial;
color: #554855;
line-height: 14pt;
text-transform:lowercase; 
text-align: center;
display:block;
width:70px;
border-bottom :2px solid  #c6d9c3;
border-top:5px solid  #b0b9c9;
}
a.menu2:hover {
background-color:#dbcab3;
color:  #554855 ;
width:70px;
border-top:5px solid  #c6d9c3;
border-bottom :2px solid  #e8dfc8;}

+1

9

http://uploads.ru/i/t/9/7/t975O.png
HTML, где хотите видеть само меню

Код:
<a class="menu" href="#">menu</a>
<a class="menu" href="#">menu</a>
<a class="menu" href="#">menu</a>
<a class="menu" href="#">menu</a>
<a class="menu" href="#">menu</a>

Цвета style_cs.css

Код:
a.menu:link, a.menu:visited, a.menu:active{
color: #ffffff;
font: normal 20px arial black ;
letter-spacing: -3px ;
line-height: 90% ;
text-transform: uppercase;
text-align: center; 
padding: 40px 17px 43px 17px;
width: 100px; 
height:90px;
background: #d44aaf;
text-decoration: none;
}



a.menu:hover {
color: #d44aaf;
font: normal 20px arial black ;
letter-spacing: -3px ;
line-height: 90% ;
text-transform: uppercase;
text-align: center; 
padding: 40px 17px 43px 17px;
width: 100px; 
height:90px;
background: #ffffff;
text-decoration: none;

}

0

10

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

Код:
<a class="men" href="#">menu</a> 
<a class="men" href="#">menu</a>
<a class="men" href="#">menu</a>
<a class="men" href="#">menu</a> 
<a class="men" href="#">menu</a> 
<a class="men" href="#">menu</a>

Цвета style_cs.css

Код:
a.men:link, a.men:visited, a.men:active{text-decoration: none;
background-color: #000000;
font-family: tahoma, arial;
font-size: 6pt;
color: #ffffff;
height:2px;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
text-align: center;
display:block;
width:130px;
border-bottom:2px solid  #e9e9e9;
margin: 20px;
padding: 2px 2px 2px 2px;
line-height: 300%;
-webkit-border-radius:20px;
-moz-border-radius:20px;
}
a.men:hover {
background-color:#E9E9E9;
color:#59ccdd;
border-bottom:2px solid  #000000;

}

0

11

http://uploads.ru/i/e/g/8/eg8TD.png
HTML, где хотите видеть само меню

Код:
<div class="urbangreymenu">
<ul class="submenu"> 
<li><a href="#">menu</a><a href="#">menu</a><a href="#">menu</a>  </li>  
<li><a href="#">menu</a><a href="#">menu</a><a href="#">menu</a>  </li> 
<li><a href="#">menu</a><a href="#">menu</a><a href="#">menu</a>  </li> 
<li><a href="#">menu</a><a href="#">menu</a><a href="#">menu</a>  </li> 
<li><a href="#">menu</a><a href="#">menu</a><a href="#">menu</a>  </li> 
<li><a href="#">menu</a><a href="#">menu</a><a href="#">menu</a>  </li> 
<li><a href="#">menu</a><a href="#">menu</a><a href="#">menu</a>  </li> 
</ul> 
</div>

Цвета style_cs.css

Код:
.urbangreymenu{width:400px;}
.urbangreymenu ul{list-style-type: none;margin:5 px ;padding: 0;margin-bottom: 0;}
.urbangreymenu ul li{padding-bottom:0px; }
.urbangreymenu ul li a{
font-family:times new roman ;
font-size: 40px;
font-weight: bold;
line-height: 30px;
margin: 0px;
padding-left: 5px;
text-decoration: none ;
text-transform: lowercase;
color: #ffffff;
background: #222222;
display:inline-block;;
width:120 px;
font-style: italic;
letter-spacing: -5px;
padding: 5px 0;
line-height: 17px;
padding-left: 8px;
text-decoration: none;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
.urbangreymenu ul li a:hover{color:#ffffff;background:#444444;}

0

12

http://uploads.ru/i/O/j/b/OjbAE.png
HTML, где хотите видеть само меню

Код:
<a class="m" href="#">menu</a>
<a class="m" href="#">menu</a>
<a class="m" href="#">menu</a><br>
<a class="m" href="#">menu</a>
<a class="m" href="#">menu</a>
<a class="m" href="#">menu</a><br>
<a class="m" href="#">menu</a>
<a class="m" href="#">menu</a>
<a class="m" href="#">menu</a><br>

Цвета style_cs.css

Код:
a.m:link, a.m:visited, a.m:active{
color: #000000;
background: #f4005b;
font: bold 30px Arial Narrow;
letter-spacing: -3px ;
line-height: 90% ;
text-transform: uppercase;
text-align: center; 
padding: 20px 0px 0px 0px;
margin-top: 20px;
display:inline-block;
width:100px;
border-bottom: 2px solid #000000;
text-decoration: none;
}



a.m:hover {
background: #000000;
color: #ffffff;
border-bottom: 2px solid #f4005b;
padding: 40px 0px 0px 0px;
margin-top: 0px;
text-decoration: none;
}

0

13

http://uploads.ru/i/z/u/e/zue6O.png
HTML, где хотите видеть само меню

Код:
<table cellspacing="0" class="menu3"> 
<tr> 
<td> <a class="menu2" href="#">menu</a></td> 
<td> <a class="menu2" href="#">menu</a></td> 
<td> <a class="menu2" href="#">menu</a></td> 
<td> <a class="menu2" href="#">menu</a></td> 
</tr></table>

Цвета style_cs.css

Код:
a.menu2:link, a.menu2:visited, a.menu2:active{text-decoration: none;
background-color: #242424;
text-align: center;width:70px;display: block;
color: #CF1A45;font-family: garamond;font-size: 20pt;font-style: italic;font-weight: normal;
letter-spacing: -1px;padding:3px;
-webkit-border-radius:3px;-moz-border-radius:3px;
text-transform: lowercase;}
a.menu2:hover {background-color: #000000;color: #871f37;}
.menu3{background-color: #242424; -webkit-border-radius:10px;-moz-border-radius:10px;
padding-left:20px;padding-right:20px;padding-top:5px;padding-bottom:5px;}
.menu3:hover{background-color: #000000;}

0

14

http://uploads.ru/i/C/V/R/CVR4M.png
HTML, где хотите видеть само меню

Код:
<a class="menu2" href="#">menu</a>
<a class="menu2" href="#">menu</a>
<a class="menu2" href="#">menu</a> 
<a class="menu2" href="#">menu</a>

Цвета style_cs.css

Код:
a.menu2:link, a.menu2:visited, a.menu2:active{
background-color:#414141;
color:#3e0a54;
width:120px;
font-family: garamond;
font-size: 30pt;
font-style: italic;
font-weight: normal;
display: block;
text-align: center;
text-decoration: none;
letter-spacing: -1px;
padding:3px;
-webkit-border-radius:15px;
-moz-border-radius:15px;
text-transform: lowercase;
border-left:60px dotted #2f2f2f;
padding: 0px 0px -50px 0px;
}
a.menu2:hover {background-color: #444444;color: #7a13a3;}

0

15

http://uploads.ru/i/q/w/l/qwlke.png
HTML, где хотите видеть само меню

Код:
<table cellspacing="0"> 
<tr> 
<td> <a class="men" 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>

Цвета style_cs.css

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

background: #DFDFDF;
width: 50px;
padding-top: 10px;
padding-bottom: 10px; 
font-family: garamond;
font-size: 12px;
text-decoration: none;
color: black;
opacity: 0.3;filter: alpha(opacity=100); -moz-opacity: 0.5;
-moz-border-radius: 5px;
text-align:center;
display:block;
}
a.menu:hover {
background: #F27DBC;
opacity: 1.0;filter: alpha(opacity=100); -moz-opacity: 1.0;
}

a.men:link, a.men:visited, a.men:active{text-decoration: none;

background: #F27DBC;
width: 50px;
padding-top: 10px;
padding-bottom: 10px; 
font-family: garamond;
font-size: 12px;
text-decoration: none;
color: black;
opacity: 0.3;filter: alpha(opacity=100); -moz-opacity: 0.5;
text-align:center;
display:block;
}
a.men:hover {
opacity: 1.0;filter: alpha(opacity=100); -moz-opacity: 1.0;
}

+1

16

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

17

http://uploads.ru/i/S/5/K/S5Kzh.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>

Цвета style_cs.css

Код:
a.menu:link, a.menu:visited, a.menu:active {
text-decoration:none;
font-family:Georgia;
font-style:italic;
font-size:19px;
color:#ffcfcf;
display:block;
text-align:center;
width:130px;
background-color:#edbebe;
font-weight:bold;
-moz-border-radius:7px;
border-radius:8px;
letter-spacing:1px;
}

a.menu:hover {
color:#ffcfcf;
background-color:#f2c1c1;
cursor:n-resize;
}

0

18

http://uploads.ru/i/M/g/1/Mg1dr.png
Очень красивый эффект при наведении

Цвета style_cs.css

Код:
a.sbla:link, a.sbla:visited {border-left: #454545 4px solid; display: block; margin-bottom: 1px; text-transform: lowercase; font-style: italic; font-family: georgia; font-size: 9px; letter-spacing: 1px; background: #121212; color: #454545; text-align: left; padding: 2px 2px 2px 10px;}
a.sbla:hover, a.sbla:active { -moz-transition: 1s ease; -webkit-transition: 1s ease; border-left: #491d58 12px solid; display: block; text-transform: lowercase; font-family: georgia; font-size: 9px; letter-spacing: 5px; background: #161616; text-decoration: none; color: #454545; text-align: center; padding: 2px 2px 2px 20px;}

HTML

Код:
<div style="padding: 6px; background: #080808; opacity: 0.8; -moz-border-radius: 0px 0px 0em 0em;width: 170px; margin: -1px 0px 0px 1px;">
<a href="http://thebeginning11.proboards.com/index.cgi?action=viewprofile&amp;user=admin" class="sbla">eliza</a>
<a href="http://thebeginning11.proboards.com/index.cgi?action=viewprofile&amp;user=sapphire" class="sbla">MISS V-LA</a>
<a href="http://thebeginning11.proboards.com/index.cgi?action=viewprofile&amp;user=sabrinita" class="sbla">MANDEE</a>
<a href="http://thebeginning11.proboards.com/index.cgi?action=viewprofile&amp;user=lathen" class="sbla">SAM</a> 
</div>

+2

19

Горизонтальное черное выпадающее,двух уровневое меню
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>

css:

Код:
/* 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

20

Меню выполнено на новом CSS3, поэтому не использует картинок и javascripts.
http://www.nizckod.ru/_ld/35/72900021.gif
В место где хотите видеть:

Код:
<section id="article">   
   <dl class="menu">   
   <dt class="btnRot">Закладки</dt>   
   <dd><a href="http://www.nizckod.ru">Шаблоны для uCoz</a></dd>   
   <dd><a href="Ваша ССЫЛКА">Закладка №3</a></dd>   
   <dd><a href="Ваша ССЫЛКА">Закладка №2</a></dd>   
   <dd><a href="Ваша ССЫЛКА">Закладка №1</a></dd>   
   </dl>   
   <div class="masque"></div>   
   <div class="ombre"></div>   
  </section>

Управление дизайном (CSS):

Код:
* {   
   margin: 0;   
   padding: 0;   
   border: none;   
   }   
   #article {   
   height: 360px;   
   width: 586px;   
   font-family: "TeXGyreReg",sans-serif;   
   font-size: 17px;   
   }   
   #article dl {   
   position: relative;   
   top: 15px;   
   left: 50%;   
   margin-left: -75px;   
   width: 150px;   
   height: 155px;   
   color: #324040;   
   text-align: center;   
   background: #04b3d2;   
   background: -moz-linear-gradient(top,#04b3d2,#48dfff);   
   background: -webkit-gradient(linear,left top,left bottom,from(#04b3d2),to(#48dfff));   
   -webkit-border-radius: 4px;   
   -moz-border-radius: 4px;   
   border-radius: 4px;   
   -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.7);   
   -moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.7);   
   box-shadow: 0px 0px 6px rgba(0,0,0,0.7);   
   -webkit-transform-origin: 50% 120px;   
   -moz-transform-origin: 50% 120px;   
   -o-transform-origin: 50% 120px;   
   -moz-transition: -moz-transform 0.7s ease-in-out;   
   -o-transition: -o-transform 0.7s ease-in-out;   
   -webkit-animation: bounceOut 0.7s ease-in-out;   
   }   
   #article dt {   
   position: absolute;   
   bottom: 0px;   
   width: 100%;   
   height: 27px;   
   padding-top: 5px;   
   }   
   #article dd {   
   -webkit-transform: rotate(180deg);   
   -moz-transform: rotate(180deg);   
   -o-transform: rotate(180deg);   
   }   
   #article dd a {   
   display: block;   
   height: 22px;   
   padding: 3px 0px;   
   color: #324040;   
   text-decoration: none;   
   }   
   #article dd a:hover {   
   background: rgba(255,255,255,0.1);   
   }   
   #article dl:hover {   
   -webkit-transform: rotate(-180deg);   
   -moz-transform: rotate(-180deg);   
   -o-transform: rotate(-180deg);   
   -moz-transition: -moz-transform 0.5s ease-in-out;   
   -o-transition: -o-transform 0.5s ease-in-out;   
   -webkit-animation: bounceIn 0.7s ease-in-out;   
   }   
   @-webkit-keyframes bounceIn {   
   from {-webkit-transform: rotate(0deg);}   
   75%{-webkit-transform: rotate(-200deg);}   
   90%{-webkit-transform: rotate(-175deg);}   
   to {-webkit-transform: rotate(-180deg);}   
   }   
   @-webkit-keyframes bounceOut {   
   from {-webkit-transform: rotate(-360deg);}   
   0% {-webkit-transform: rotate(-180deg);}   
   10%{-webkit-transform: rotate(-160deg);}   
   to {-webkit-transform: rotate(-360deg);}   
   }   
   #article .masque {   
   position: absolute;   
   z-index: 50;   
   width: 585px;   
   height: 135px;   
   top: 0;   
   left: 0;   
   background: #fff;   
   }   
   #article .ombre {   
   position: absolute;   
   z-index: 40;   
   width: 300px;   
   height: 6px;   
   top: 133px;   
   margin-top: -103px;   
   left: 142px;   
   -webkit-box-shadow: 0px 100px 3px black;   
   -moz-box-shadow: 0px 100px 3px black;   
   box-shadow: 0px 100px 3px black;   
   -webkit-border-radius: 75px 75px 75px 75px / 3px 3px 3px 3px;   
   -moz-border-radius: 75px 75px 75px 75px / 3px 3px 3px 3px;   
   border-radius: 75px 75px 75px 75px / 3px 3px 3px 3px;   
   }

+1


Вы здесь » COLOR MATE » Каталог CSS|JS » CSS NAVIGATIONS