css навигации

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

Поделиться129-10-2012 09:54:01

Автор: slastnicova
Участник
Зарегистрирован: 28-10-2012
Приглашений: 0
Сообщений: 10
Уважение: +3
Позитив: +0
Провел на форуме:
2 часа 31 минуту
Последний визит:
31-10-2012 07:56:29

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

Там где будет навигация

Код:

<a href="ссылка" class="tvm" target="">название</a>
<a href="ссылка" class="tvm" target="">название</a>
<a href="ссылка" class="tvm" target="">название</a>

Поделиться229-10-2012 09:58:48

Автор: slastnicova
Участник
Зарегистрирован: 28-10-2012
Приглашений: 0
Сообщений: 10
Уважение: +3
Позитив: +0
Провел на форуме:
2 часа 31 минуту
Последний визит:
31-10-2012 07:56:29

cs.css

Код:

a.nav, a.nav:active, a.nav: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.nav: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="http://thevioletmaniac.narod.ru/" class="nav" target="">каждый </a>
<a href="http://thevioletmaniac.narod.ru/" class="nav" target="">охотник</a>
<a href="http://thevioletmaniac.narod.ru/" class="nav" target="">желает</a>
<a href="http://thevioletmaniac.narod.ru/" class="nav" target="">знать</a>
<a href="http://thevioletmaniac.narod.ru/" class="nav" target="">где </a>
<a href="http://thevioletmaniac.narod.ru/" class="nav" target="">сидит</a>
<a href="http://thevioletmaniac.narod.ru/" class="nav" target="">фазан</a>

Поделиться329-10-2012 10:03:03

Автор: slastnicova
Участник
Зарегистрирован: 28-10-2012
Приглашений: 0
Сообщений: 10
Уважение: +3
Позитив: +0
Провел на форуме:
2 часа 31 минуту
Последний визит:
31-10-2012 07:56:29

Горизонтальное черное выпадающее,двух уровневое меню

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

Где будет меню

Код:

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

Поделиться429-10-2012 10:05:33

Автор: slastnicova
Участник
Зарегистрирован: 28-10-2012
Приглашений: 0
Сообщений: 10
Уважение: +3
Позитив: +0
Провел на форуме:
2 часа 31 минуту
Последний визит:
31-10-2012 07:56:29

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

Union Forum

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

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

Объявление

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

css навигации

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

Поделиться129-10-2012 09:54:01

Поделиться229-10-2012 09:58:48

Поделиться329-10-2012 10:03:03

Поделиться429-10-2012 10:05:33