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

Объявление

SECTOR-15
2022 г. Швейцария. Город Монтрё, ныне Мардо. Мир недалекого будущего. Научные открытия, технологии, достижения цивилизации – каждый месяц в мире становится известно о том или ином новейшем достижении современности. Городок Мардо шагает гораздо быстрей всех остальных своих соседей из других стран.
Бесконечное приключение
Сто двадцать девять лет назад известные земли этого мира покорились уникальному в своем роде существу именовавшему себя Демоном. Более ста лет находились они под узурпаторской властью демона Даха`ага. Приспешники и создания Даха`ага, именуемые низшими демонами, мучали и истязали покоренные народы. Но в один день, небо осветила победоносная вспышка.
07ARK: Oberon
Общество будущего сделало своей целью очиститься от тысячелетий кровавой истории. Равные возможности и всеобщая справедливость - таков курс нового человечества. Человечество бросило вызов даже той несправедливости, которая зависела исключительно от случая. Неизлечимо больные от рождения, жертвы несчастных случаев - политика нового общества не позволяла просто развести руки и сказать: "Прости, но такова жизнь!" Именно для них был создан проект "Ковчег".
Shinsei School
Хоккайдо – самый северный остров Японии, очаровывающий красотой заснеженных горных вершин, диких лесов и скованных льдами берегов с обнаженными ветром и водой скалами. Именно здесь, где богатейшая природа поражает воображение разнообразием форм и буйством красок, вдали от шумных мегаполисов и мирской суеты, было основано уникальное в своем роде учебное заведение – школа Shinsei.
30.06 В связи с отсутствием Чибимун примерно до сентября, главной по тарелочкам пока будет урса (⁄ ⁄•⁄ω⁄•⁄ ⁄) Так что функционируем в обычном режиме, не забывая про тему исправлений!
12.01 С новым годом, ребятки! немного юбилеев, новых крутых дизайнов и мандаринок в ваш дом ヽ(・∀・)ノ
17.10 Чибимун тут болела серьезно, периодами училась и впадала в реальную жизнь, а на ролевых все так же ничего не меняется. Но вы не теряйте, котики!
27.08 Новый дизайн, спасибо великолепной полтергейст ♥
18.08 Чиби уходит в отпуск до 24 числа (даже заходить не будет возможности), так что не грустите и новые ролочки не делайте :")
07.05 Светло, розово (и немного непривычно), но все по-старому футурно, не переживайте! А за дизайн спасибо большое cannibals circus. Надеюсь, он растопит ваши холодные сердца и подарит чуточку тепла и весны вам, господа любители посплетничать ♥
02.04 Стряхну пыль с колонки новостей (тут должна быть шутка про то, что какая активность на аниме сообществе, такие и мы), напомню неравнодушным про тему исправления в каталоге, где Чибимун горячо желает видеть ссылки на новые форумы, поскольку сама не успевает все отслеживать. Спасибо, что остаетесь с нами, ребятки, даже в такие тяжелые времена. Всех люблю, не стесняйтесь писать, обращаться с вопросами и проявлять признаки жизни ♥
Футура — это форум поддержки аниме ролевых. Мы оказываем помощь на различных уровнях для различных категорий людей: от рядовых игроков до администрации всевозможных проектов. Футура объединяет все форумы аниме тематики и их игроков в одном месте, так что мы всегда будем вам рады!

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

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



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