29.08 Чиби пришла, чтобы проститься и передать свою корону в надежные руки урсы. Всех люблю и буду скучать, котики ♥

30.06 В связи с отсутствием Чибимун примерно до сентября, главной по тарелочкам пока будет урса (⁄ ⁄•⁄ω⁄•⁄ ⁄) Так что функционируем в обычном режиме, не забывая про тему исправлений!

12.01 С новым годом, ребятки! немного юбилеев, новых крутых дизайнов и мандаринок в ваш дом ヽ(・∀・)ノ

17.10 Чибимун тут болела серьезно, периодами училась и впадала в реальную жизнь, а на ролевых все так же ничего не меняется. Но вы не теряйте, котики!

27.08 Новый дизайн, спасибо великолепной полтергейст ♥

18.08 Чиби уходит в отпуск до 24 числа (даже заходить не будет возможности), так что не грустите и новые ролочки не делайте :")

07.05 Светло, розово (и немного непривычно), но все по-старому футурно, не переживайте! А за дизайн спасибо большое cannibals circus. Надеюсь, он растопит ваши холодные сердца и подарит чуточку тепла и весны вам, господа любители посплетничать ♥

02.04 Стряхну пыль с колонки новостей (тут должна быть шутка про то, что какая активность на аниме сообществе, такие и мы), напомню неравнодушным про тему исправления в каталоге, где Чибимун горячо желает видеть ссылки на новые форумы, поскольку сама не успевает все отслеживать. Спасибо, что остаетесь с нами, ребятки, даже в такие тяжелые времена. Всех люблю, не стесняйтесь писать, обращаться с вопросами и проявлять признаки жизни ♥
just one story
В городе начали происходить похищения и убийства людей, а преступника не могут поймать даже самые опытные офицеры полиции. По этому поводу городской совет решает вызвать команду детективов из ближайшего большого города, чтобы наконец закончить этот ад на земле.
ONCE IN MADRID
Добро пожаловать в Мадрид! Город, где кипят настоящие испанские страсти, строятся и рушатся судьбы, а самое главное, что вы лично сможете в этом поучаствовать.
Noster
Уже много лет люди, вампиры, оборотни и гаргульи сожительствуют бок о бок в мире и гармонии.
ЦОАР
Совсем юное микрогосудартсво в один город на берегах Мертвого мора (территория Израиля) в своей официальной и независимой регистрации – всего около 50 лет. Политический режим (официально): султанат, абсолютная монархия.
ЭНСК
В чёрном-чёрном городе на чёрной-чёрной улице стояло чёрное-чёрное здание. Многие из вас наверняка слышали подобную историю. На самом деле Энск вовсе не чёрный и пестрит множеством оттенков серого, от тёмных тонов побитого асфальта до белёсого смога металлургического завода. И чёрное-чёрное здание, в котором, кстати, располагается школа, тоже вовсе не чёрное, а посеревшее от времени некогда жёлтое.
Clockwork Heaven
Вот уже тринадцать лет, Таргар является основной точкой для добычи всевозможных материалов, которые могли бы вернуть в мир магию - пути, пролегающие в таинственное подземелье, были найдены именно здесь. Всё это время, в городе поддерживался мирный договор; всё благодаря представителю древних героев, которого назначили наместником от империи.
PGSM: L'Ascension
Их история не была окончена. Трагедия, разлучившая принцесс в далеком прошлом, не сумела отнять у них право на второй шанс. На новое рождение и новый путь, который им вновь предстояло пройти рука об руку.
Naruto: After War
Год назад закончилась Четвертая Великая Война Шиноби. Альянс Шиноби в силе и процветает, Скрытые деревни отстраиваются и разрастаются. После войны многое изменилось, люди стали добрее друг к другу. Однако там, где есть Инь, всегда будет Ян. И там, где есть сила, всегда будут те, кто возжелают ее. История нового мира только начинается, а какой она окажется — решать лишь настоящим ниндзя.
Eternal Blaze - Naruto FRPG
Чем ярче горит пламя надежды, тем сильнее клубится тьма неизвестности. В то время, когда Великие Деревни забывают старые обиды и стараются всячески наладить дипломатические связи, призрачная угроза становится всё отчётливей...
Naruto. Everything is changing.
Един закон мироздания: все имеет свое начало и конец, Мирное время, установленное после Четвертой мировой войны шиноби, подходит к концу. Мир меняется, и люди меняются вместе с ним.
BLEACH. IMPOSSIBLE
Прошел ровно год с того памятного дня, когда была дерзко вырвана победа в кровопролитной войне над Ванденрейхом. Победа была неоспорима. И всё же, часть силы Юха Баха уничтожить не удалось - она разлетелась по всем мирам...
Soul Taker
Приключение Кида и его товарищей подошло к концу. Много воды с тех пор утекло, и если прежде они были обычными учениками Академии Шибусен с необычными силами, то теперь они спасли мир, заточив могущественного Асуру Кишина на чёрной луне.

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

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

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



CSS Navigations

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

1

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

0

2

DEMO
http://s020.radikal.ru/i722/1407/43/16d4a01d0e2e.jpg

HTML-низ

Код:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script src="http://forumfiles.ru/files/000f/33/e7/54255.js" type="text/javascript"></script>
<script src="http://forumfiles.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(http://forumfiles.ru/files/000f/33/e7/60551.png) 0 -149px no-repeat; 
    }
    	ul#nav li a:hover {
        background: url(http://forumfiles.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(http://forumfiles.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>

0

3

http://savepic.ru/2917417.png
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>

0

4

http://savepic.net/1707367.png

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>

0

5

http://savepic.ru/2905129.jpg

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>

0

6

http://savepic.ru/2891816.jpg

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>

0

7

http://savepic.net/1739128.jpg

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>

0

8

http://uploads.ru/i/O/n/y/OnyJH.jpg

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>

0

9

http://uploads.ru/i/o/Q/f/oQfwb.png

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>

0

10

http://uploads.ru/i/q/w/l/qwlke.png

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>

0

11

http://www.nizckod.ru/_ld/35/72900021.gif

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>

0

12

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

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>

0

13

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

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>

0

14

DEMO
http://i058.radikal.ru/1407/11/70ad394c74ed.jpg

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>

0

15

http://s020.radikal.ru/i720/1407/c0/191cf3802642.jpg

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>

0

16

http://s019.radikal.ru/i617/1407/16/07846bac387a.jpg

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

0



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