CSS Navigations

Страница: 1

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

Поделиться105.07.14 21:08:46

Автор: chibi
мусюндере
Уважение: +170
Сообщений: 9402

Тема — сборник навигаций с форумов поддержки (colorforum.ru, koshart.ru), сайтов и т.д.
Каждый скрипт (в основном) делится на две части, первая из которых вставляется в свой стиль (второй окно), а вторая, соответственно, там, где желаете увидеть навигацию.

Поделиться205.07.14 21:11:38

Автор: chibi
мусюндере
Уважение: +170
Сообщений: 9402

DEMO

HTML-низ

Код:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script src="https://forumstatic.ru/files/000f/33/e7/54255.js" type="text/javascript"></script>
<script src="https://forumstatic.ru/files/000f/33/e7/88789.js" type="text/javascript"></script>

CSS

Код:

ul#nav {
	width: 700px; margin: 0 auto; text-align: center; overflow: hidden;
}
	ul#nav li {
    float: left; list-style: none; 
	}
    ul#nav li a {
    	display: block; width: 97px; height: 77px; 
    	padding: 72px 0 0 0; margin: 0 32px 0 32px;
    	font: bold 16px Helvetica, Arial, Sans-Serif; text-transform: uppercase;
    	color: #9c5959; text-shadow: 0 1px 3px #c4bda6; text-decoration: none;
    	
    	background: url(https://forumstatic.ru/files/000f/33/e7/60551.png) 0 -149px no-repeat; 
    }
    	ul#nav li a:hover {
        background: url(https://forumstatic.ru/files/000f/33/e7/60551.png) 0 0 no-repeat;
        color: #eee9d9; text-shadow: 0 2px 3px #4c2222;
    	}
    	
    	ul#nav li a.js:hover {
        background: url(https://forumstatic.ru/files/000f/33/e7/60551.png) 0 -149px no-repeat;
    	}

Ссылки

Код:

<div id="container">
 <ul id="nav">
  <li><a href="ссылка">Home</a></li>
  <li><a href="ссылка">About</a></li>
  <li><a href="ссылка">Work</a></li>
  <li><a href="ссылка">Contact</a></li>
 </ul>
</div>

Поделиться305.07.14 21:13:14

Автор: chibi
мусюндере
Уважение: +170
Сообщений: 9402

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;
	}

Ссылки

Код:

<a href="ссылка" class="tvm" target="">the</a>
<a href="ссылка" class="tvm" target="">violet</a>
<a href="ссылка" class="tvm" target="">maniac</a>

Поделиться405.07.14 21:14:45

Автор: chibi
мусюндере
Уважение: +170
Сообщений: 9402

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;}

Ссылки

Код:

<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>

Поделиться505.07.14 21:16:49

Автор: chibi
мусюндере
Уважение: +170
Сообщений: 9402

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;
}

Ссылки

Код:

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

Поделиться605.07.14 21:17:51

Автор: chibi
мусюндере
Уважение: +170
Сообщений: 9402

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;}

Ссылки

Код:

<table cellspacing="0"> 
<tr> 
<td> <a class="menu" href="ссылка">link</a></td> </tr> 
<tr> 
<td> <a class="menu" href="ссылка">link</a></td> </tr> 
<tr> 
<td> <a class="menu" href="ссылка">link</a></td> </tr> 
<tr> 
<td> <a class="menu" href="ссылка">link</a></td> </tr> 
<tr> 
<td> <a class="menu" href="ссылка">link</a></td> 
</tr> 
<td> <a class="menu" href="ссылка">link</a></td> 
</tr> 
<td> <a class="menu" href="ссылка">link</a></td> 
</tr> 
 
</table>

Поделиться705.07.14 21:19:07

Автор: chibi
мусюндере
Уважение: +170
Сообщений: 9402

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; }

Cсылки

Код:

<table cellspacing="0"> 
<tr> 
<td> <a class="menu" href="ссылка">link</a></td> 
<td> <a class="menu" href="ссылка">link</a></td> 
<td> <a class="menu" href="ссылка">link</a></td> 
<td> <a class="menu" href="ссылка">link</a></td> 
<td> <a class="menu" href="ссылка">link</a></td> 
<td> <a class="menu" href="ссылка">link</a></td> 
<td> <a class="menu" href="ссылка">link</a></td> 
</tr> 
 
</table>

Поделиться805.07.14 21:20:13

Автор: chibi
мусюндере
Уважение: +170
Сообщений: 9402

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);
}

Ссылки

Код:

<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>

Поделиться905.07.14 21:21:03

Автор: chibi
мусюндере
Уважение: +170
Сообщений: 9402

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;}

Ссылки

Код:

<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>

Поделиться1005.07.14 21:21:54

Автор: chibi
мусюндере
Уважение: +170
Сообщений: 9402

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;
}

Ссылки

Код:

<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>

Поделиться1105.07.14 21:23:15

Автор: chibi
мусюндере
Уважение: +170
Сообщений: 9402

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;   
   }

Ссылки

Код:

<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>

Поделиться1205.07.14 21:27:29

Автор: chibi
мусюндере
Уважение: +170
Сообщений: 9402

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;
}

Ссылки

Код:

<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>

Поделиться1305.07.14 21:28:07

Автор: chibi
мусюндере
Уважение: +170
Сообщений: 9402

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;
}

Ссылки

Код:

<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>

Поделиться1405.07.14 21:33:20

Автор: chibi
мусюндере
Уважение: +170
Сообщений: 9402

DEMO

CSS

Код:

.wrapper {
    width: 100%;
    height: 80px;
    background : #464646;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
    border-top: 2px solid #939393;
    position: relative;
    margin-bottom: 30px;
}

ul {
    margin: 0;
    padding: 0;
}
 
ul.menu {
    height: 80px;
    border-left: 1px solid rgba(0,0,0,0.3);
    border-right: 1px solid rgba(255,255,255,0.3);
    float:left;
}
 
ul.menu li {
    list-style: none;
    float:left;
    height: 79px;
    text-align: center;
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
    }
 
ul li a {
    display: block;
    padding: 0 20px;
    border-left: 1px solid rgba(255,255,255,0.1);
    border-right: 1px solid rgba(0,0,0,0.1);
    text-align: center;
    line-height: 79px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
    -webkit-transition-property: background;
    -webkit-transition-duration: 700ms;
    -moz-transition-property: background;
    -moz-transition-duration: 700ms;
    }
 
ul li a:hover {
    background: transparent none;
}
 
ul li.active a{
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}

Ссылки

Код:

<div class="wrapper">
<div class="container"><ul class="menu" rel="sam1">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li ><a href="#">Blog</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">Twitter @insic</a></li>
</ul>
</div>
</div>

Поделиться1505.07.14 21:44:01

Автор: chibi
мусюндере
Уважение: +170
Сообщений: 9402

CSS

Код:

#nav {padding:0;}

#nav li {display:inline; }

#nav li a {
font-family:Arial;
font-size:12px;
text-decoration: none;
float:left;
padding:10px;
background-color: #333333;
color:#ffffff;
border-bottom:1px;
border-bottom-color:#000000;
border-bottom-style:solid;}

#nav li a:hover {
background-color:#9B1C26;
padding-bottom:12px;
border-bottom:2px;
border-bottom-color:#000000;
border-bottom-style:solid;
margin:-1px;}

Cсылки

Код:

<ul id="nav" style="clear:both;">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

Поделиться1605.07.14 21:50:27

Автор: chibi
мусюндере
Уважение: +170
Сообщений: 9402

CSS

Код:

#pointermenu2{
margin: 0;
padding: 0;}

#pointermenu2 ul{
margin: 0;
margin-left: 15px; /*menu offset from left edge of window*/
float: left;
padding-left: 8px;
font: bold 13px Verdana;
background: #c00000 url(http://s011.radikal.ru/i318/1407/22/39f455cff924.gif) bottom left no-repeat; /*optional left round corner*/}

* html #pointermenu2 ul{ /*IE6 only rule. Decrease ul left margin and add 1em bottom margin*/
margin-bottom: 1em;
margin-left: 7px; /*menu offset from left edge of window in IE*/}

#pointermenu2 ul li{
display: inline;}

#pointermenu2 ul li a{
float: left;
color: white;
font-weight: bold;
padding: 7px 9px 7px 5px;
text-decoration: none;}

#pointermenu2 ul li a:visited{
color: white;}

#pointermenu2 ul li a:hover, #pointermenu2 ul li a#selected{ /*hover and selected link*/
color: lightyellow;
background: transparent url(http://s018.radikal.ru/i516/1407/52/c8431b6129dd.gif) bottom center no-repeat;}

#pointermenu2 ul li a#rightcorner{
padding-right: 0;
padding-left: 2px;
background: url(http://s013.radikal.ru/i325/1407/3b/75be4342d1d7.gif) bottom right no-repeat; /*optional right round corner*/}

Ссылки

Код:

<div id="pointermenu2">
<ul>
<li><a href="ссылка">Home</a></li>
<li><a href="ссылка">DHTML</a></li>
<li><a href="ссылка" id="selected">CSS</a></li>
<li><a href="ссылка">Forums</a></li>
<li><a href="ссылка">Gif Optimizer</a></li>
<li><a href="ссылка">Button Maker</a></li>
<li><a href="#" id="rightcorner">&nbsp;</a></li>
</ul>
<br style="clear: left" />

Страница: 1

Futura: каталог аниме форумов

Меню навигации

Пользовательские ссылки

Объявление

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

CSS Navigations

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

Поделиться105.07.14 21:08:46

Поделиться205.07.14 21:11:38

Поделиться305.07.14 21:13:14

Поделиться405.07.14 21:14:45

Поделиться505.07.14 21:16:49

Поделиться605.07.14 21:17:51

Поделиться705.07.14 21:19:07

Поделиться805.07.14 21:20:13

Поделиться905.07.14 21:21:03

Поделиться1005.07.14 21:21:54

Поделиться1105.07.14 21:23:15

Поделиться1205.07.14 21:27:29

Поделиться1305.07.14 21:28:07

Поделиться1405.07.14 21:33:20

Поделиться1505.07.14 21:44:01

Поделиться1605.07.14 21:50:27