Pro-Temp



Меню с использованием CSS

Для использования такого же меню, как на этой странице, скопируйте две картинки и код. Или скачайте здесь (объем архива 2 кб)

CSS
-------------------------------------
.glossymenu{
list-style-type: none;
margin: 5px 0;
padding: 0;
width: 170px;
border: 1px solid #9A9A9A;
border-bottom-width: 0;
}

.glossymenu li a{
background: white url(images/glossyback.gif) repeat-x bottom left;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 3px 0;
padding-left: 10px;
text-decoration: none;

}


* html .glossymenu li a{
width: 160px;
}

.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}

.glossymenu li a:hover{
background-image: url(images/glossyback2.gif);
}

---------------------------------------------------------
HTML

<ul class="glossymenu">
<li><a href="http://site.narod.ru/" title="Ссылка">Ссылка</a></li>
<li><a href="http://site.narod.ru/" title="Ссылка">Ссылка</a></li>
<li><a href="http://site.narod.ru/" title="Ссылка">Ссылка</a></li>
<li><a href="http://site.narod.ru/" title="Ссылка">Ссылка</a></li>
<li><a href="http://site.narod.ru/" title="Ссылка">Ссылка</a></li>
<li><a href="http://site.narod.ru/" title="Ссылка">Ссылка</a></li>
<li><a href="http://site.narod.ru/" title="Ссылка">Ссылка</a></li>
</ul>

 



Скачать меню (объем архива 1 кб)

Вертикальное меню меняющее цвет при наведении курсора, без использования картинок

CSS
----------------------------------------------------------

.buttonmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px;
}

.buttonmenu li a{
color: white;
display: block;
width: 100%;
padding: 2px 4px;
text-decoration: none;
font-weight: bold;
border: 1px solid;
border-color:#D5BFD0 #5A3A54 #5A3A54 #D5BFD0;
background-color: #704968;
text-decoration:none;
}


.buttonmenu li a:visited{
color: white;
}

.buttonmenu li a:hover, .buttonmenu li a:active{
color: black;
background-color: #CDB4C8;
}


HTML
--------------------------------------------------------------------
<ul class="buttonmenu">
<li><a href="http://site.narod.ru/" title="Ссылка">Ссылка</a></li>
<li><a href="http://site.narod.ru/" title="Ссылка">Ссылка</a></li>
<li><a href="http://site.narod.ru/" title="Ссылка">Ссылка</a></li>
<li><a href="http://site.narod.ru/" title="Ссылка">Ссылка</a></li>
<li><a href="http://site.narod.ru/" title="Ссылка">Ссылка</a></li>
<li><a href="http://site.narod.ru/" title="Ссылка">Ссылка</a></li>
<li><a href="http://site.narod.ru/" title="Ссылка">Ссылка</a></li>
</ul>
 




Скачать меню (объем архива 7 кб)

Горизонтальное меню с меняющейся картинкой при наведении курсора.
Незабудьте скопировать картинки.

CSS
-----------------------------------------------------

#slidetabsmenu {
float:left;
width:100%;
font-size:90%;
line-height:normal;
border-bottom: 1px solid gray;
}

* html #slidetabsmenu{
margin-bottom: 1em;
}

#slidetabsmenu ul{
list-style-type: none;
margin:0;
margin-left: 10px;
padding:0;
}

#slidetabsmenu li{
display:inline;
margin:0;
padding:0;
}

#slidetabsmenu a {
float:left;
background:url(images/tab-left.gif) no-repeat left top;
margin:0;
padding:0 0 0 9px;
text-decoration:none;
}

#slidetabsmenu a span {
float:left;
display:block;
background:url(images/tab-right.gif) no-repeat right top;
padding:3px 14px 3px 5px;
font-weight:bold;
color:#3B3B3B;
}


#slidetabsmenu a span {float:none;}


#slidetabsmenu a:hover span {
color: black;
}

#slidetabsmenu #current a {
background-position:0 -125px;
}

#slidetabsmenu #current a span {
background-position:100% -125px;
color: black;
}

#slidetabsmenu a:hover {
background-position:0% -125px;
}

#slidetabsmenu a:hover span {
background-position:100% -125px;
}


HTML
---------------------------------------------------------------------

<div id="slidetabsmenu">
<ul>
<li id="current"><a href="http://site.narod.ru/" title="Ссылка"><span>Ссылка</span></a></li>
<li><a href="http://site.narod.ru/" title="Ссылка"><span>Ссылка</span></a></li>
<li><a href="http://site.narod.ru/" title="Ссылка"><span>Ссылка</span></a></li>
<li><a href="http://site.narod.ru/" title="Ссылка"><span>Ссылка</span></a></li>
<li><a href="http://site.narod.ru/" title="Ссылка"><span>Ссылка</span></a></li>
<li><a href="http://site.narod.ru/" title="Ссылка"><span>Ссылка</span></a></li>
</ul>
</div>




Найти:


Горизонтальное меню и поисковая форма. В поисковой форме измените слово vash-login на Ваш логин в Яндексе. Эта поисковая форма написана специально для сайтов расположенных на хостинге Народ.Ру и поиск будет проводиться только на Вашем сайте. Скачать меню (объем архива 2 кб)

CSS
---------------------------------------------------------

.invertedshiftdown2{
padding: 0;
width: 100%;
border-top: 5px solid #D10000;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

.invertedshiftdown2 ul{
margin:0;
margin-left: 40px;
padding: 0;
list-style: none;
}

.invertedshiftdown2 li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

.invertedshiftdown2 a{
float: left;
display: block;
font: bold 12px Arial;
color: black;
text-decoration: none;
margin: 0 1px 0 0;
padding: 5px 10px 5px 10px;
background-color: lightblue;
border-bottom: 8px solid white;
}

.invertedshiftdown2 a:hover{
background-color: #D10000;
padding-top: 10px;
padding-bottom: 0;
border-bottom-color: #D10000;
color: white;
}

.invertedshiftdown2 .current a{
background-color: #D10000;
padding-top: 10px;
padding-bottom: 0;
border-bottom-color: #D10000;
color: white;
}

#myform{
float: right;
margin: 0;
margin-top: 2px;
padding: 0;
}

#myform .textinput{
width: 190px;
border: 1px solid gray;
}

#myform .submit{
font: normal 12px Verdana;
height: 22px;
border: 1px solid #D10000;
background-color: black;
color: white;
}
 

HTML
----------------------------------------------------------------------


<div class="invertedshiftdown2">
<ul>
<li class="current"><a href="http://site.narod.ru/" title="Ссылка">Ссылка</a></li>
<li><a href="http://site.narod.ru/" title="Ссылка">Ссылка</a></li>
<li><a href="http://site.narod.ru/" title="Ссылка">Ссылка</a></li>
<li><a href="http://site.narod.ru/" title="Ссылка">Ссылка</a></li>
<li><a href="http://site.narod.ru/" title="Ссылка">Ссылка</a></li>
</ul>

<form action=http://narod.yandex.ru/cgi-bin/yandsearch id="myform">
<input type=hidden name=user value=vash-login>
Найти: <input name=text class=inputtext>
<input name=where value=2 type=hidden>
<input class="submit" type="submit" value="Искать!">
</form>
</div>


CSS

Cascading Style Sheets (Таблицы Каскадных Стилей) - это язык, содержащий набор свойств для описания внешнего вида любых HTML документов. С его помощью дизайнер имеет полный контроль над стилем и расположением каждого элемента веб страницы. Очень хороший справочник по CSS можно скачать здесь


Добавлено 11 сентября

Эта страничка выставлена в Интернет в день падения башен близнецов в Нью Йорке. Аль Кайда и Усама Бен Ладен живы и здоровы, ЦРУ, ФБР и прочие болваны из пиндосии никого не ловят


Рейтинг@Mail.ru     

Hosted by uCoz