Нонче тут

Сейчас 74 гостей онлайн

Поиск

Поиск от Nigma

2


Поиск от Яндекс

Счётчики

Яндекс.Метрика

Проверка тиц

ВКонтакте

Делаем выпадающее меню как на этом сайте


Я выбрала иконки для меню из набора fugue-icons (все имена и адреса файлов указаны относительно моего сайта)
-blog.png
-baner.png
-coins.png
-g-book.png
-free_pictures.png
-house.png
-news.png
-portpholio.png
Напишем само меню ввиде списка:
  

<ul class="menu">
<li>
<a href="//estydiz.ru/">
<img src="/images/stories/house.png" alt="home" align="left">
<span>Главная</span>
</a>
</li>
<li>
<a href="/news.html">
<img src="/images/stories/news.png" alt="news" align="left">
<span>Новости</span>
</a>
</li>
<li>
<a href="/portfolio.html">
<img src="/images/stories/portpholio.png" alt="portfolio" align="left">
<span>Портфолио</span>
</a>
<ul>
<li>
<a href="/portfolio/forum-diz.html">
<span>Платные шкурки для KamrВВ и borda</span>
</a>
</li>
<li class="parent">
<a href="/portfolio/ucoz-diz.html">
<span>Платные дизайны для ucoz</span>
</a>
</li>
<li>
<a href="/portfolio/html-diz.html">
<span>Платные дизайны ХТМЛ</span>
</a>
</li>
<li>
<a href="/portfolio/miscellaneous.html">
<span>Прочая графика</span>
</a>
</li>
<li>
<a href="/portfolio/mobile-diz.html">
<span>Обои для мобильного</span>
</a>
</li>
</ul>
</li>
<li>
<a href="/uslugi-i-ceny.html">
<img src="/images/stories/coins.png" alt="uslugi-i-ceny" align="left">
<span>Как сделать заказ</span>
</a>
</li>
<li>
<a href="/free-diz.html">
<img src="/images/stories/free_pictures.png" alt="free-diz" align="left">
<span>Free дизайны для borda и KamrBB</span>
</a>
</li>
<li class="parent">
<a href="/blog.html">
<img src="/images/stories/blog.png" alt="blog" align="left">
<span>Блог</span>
</a>
<ul>
<li>
<a href="/blog/music.html">
<span>Музыка</span>
</a>
</li>
<li>
<a href="/blog/writing.html">
<span>Пейсательство</span>
</a>
</li>
</ul>
</li>
<li>
<a href="/guestbook.html">
<img src="/images/stories/g-book.png" alt="guestbook" align="left">
<span>Гостевая книга</span>
</a>
</li>
<li>
<a href="/link-exchange.html">
<img src="/images/stories/baner.png" alt="link-exchange" align="left">
<span>Баннерообмен</span>
</a>
</li>
</ul>


Стиль меню (не самый валидный, но работает)


Я выбрала фон меню

имя файла backpost.gif
и стрелочку-указатель

имя файла hand-point-270.png
  

ul.menu{width:178px;
font-style: normal !important;
font-weight: 400 !important;
font-family: "Century Gothic",Arial, Helvetica, Sans-Serif !important;
clear:both;
position:relative;
}

/*ссылка основного меню*/
ul.menu li a{font-style: normal !important; font-size: 12px !important;
font-weight: 600 !important;
font-family: "Century Gothic",Arial, Helvetica, Sans-Serif !important;
padding-top:7px;
display: block;
vertical-align:middle;
text-align:left;padding-left:2px; padding-right:5px;
color:#442010;}
ul.menu li a:hover{color: #C61F25;
padding-top:7px;
display: block;
}
/*кнопка меню*/

ul.menu li {border-color:#8C826D !important;
border-style:solid !important;
border-width:1px !important;
background: url(../images/backpost.gif);
margin-bottom:3px;
padding: 2px;
width: 178px;
-moz-border-radius: 5px; /* Firefox */
-webkit-border-radius: 5px; /* Safari, Chrome */
-khtml-border-radius: 5px; /* KHTML */
border-radius: 5px; /* CSS3 */
-moz-box-shadow: 0 0 2px #544023; /* Для Firefox */
-webkit-box-shadow: 0 0 2px #544023; /* Для Safari и Chrome */
box-shadow: 0 0 2px #544023; /* Параметры тени */
float:left;
list-style:none;
font-size: 12px !important;
text-align:left;
font-style: normal !important;
font-weight: 600 !important;
font-family: "Century Gothic",Arial, Helvetica, Sans-Serif !important;
zoom:1; /* This enables hasLayout, which is required for older IE
browsers */
filter: progid:DXImageTransform.Microsoft.Shadow(color='#544023',
Direction=135, Strength=2);}

/* 1 level */
/*пункт с выпадающим списком*/
li.parent{font-weight: 600 !important; font-family: "Century Gothic",Arial, Helvetica, Sans-Serif !important;
}
/*стрелочка выпадающего пункта*/
.parent a {background: url("../images/hand-point-270.png") no-repeat scroll right center transparent; font-style: normal !important;
font-weight: 600 !important;
font-family: "Century Gothic",Arial, Helvetica, Sans-Serif !important;}

/*положение выпадающего меню*/
.menu li.parent ul {
display: none;
left: 149px;
position: absolute;
top: 45;
z-index:10000 !important;}
li.parent:hover ul{ display: block; }

/2 level */
li.parent ul li ul{width:175px;
position: absolute;
float:left;
margin-left:100px;
margin-top: -20px;
/ ie7 */
*margin-left:0;
*margin-top:0;
}
li.parent:hover ul li ul{
display: none;
}
li.parent:hover ul li:hover ul{ display: block;}
ul.menu li ul li{
display:block;
float:none;
clear:both;
}
ul.menu li ul li a{ display: block; font-size: 12px !important; background:none; font-style: normal !important;
font-weight: 400 !important;
font-family: "Century Gothic",Arial, Helvetica, Sans-Serif !important;}
ul.menu li ul li {
clear: both;
display: block;
float: none;
width: 170px;
}
/*Выделенный пункт меню*/
#current a{color:#62341A !important;
}

Уважаемые гости сайта! Теперь Вы можете ознакомиться с новостями сайта в социальных сетях.
Новости сайта публикуются в Facebook, ВКонтакте, Blogspot и Мой мир и Twitter .
Что бы перейти к аккаунтам просто кликните на иконках социальных сетей.