CSS, HTML - Простое Вертикальное меню для сайта

(5 Голосов) 17.01.2014 CSS Уроки

Простое вертикальное меню для сайта на основе HTML и CSS! Все просто и функционально!

У меня была задача сделать из простой HTML страницы меню в несколько кнопок, например : На главную, Форум, Контакты и Онлайн магазин. Но так как не хотелось заморачиваться и городить сложные меню, решил сделать фиксированное вертикальное меню слева от контента... Пример можно увидеть тут : Katalog.Spirit.com.ua

 

ВНИМАНИЕ! Все шаблоны, компоненты, модули, плагины проверены антивирусом!

Итак, начнем... все просто:

1. В Вашем CSS файле стилей шаблона добавьте следующее:

#main{
position:fixed;
top: 150px;
left: 0px;
padding:0;
}
#main ul{
padding:0;
}
#navigationMenu li{
list-style:none;
height:35px;
width:35px;
}
#navigationMenu span{
position:absolute;
overflow:hidden;
width:0;
left:35px;
padding:0;
font:12px Verdana,Arial,Helvetica,sans-serif;
font-weight:bold;
line-height:35px;
white-space:nowrap;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
transition: 0.25s;
}
#navigationMenu a{
display:block;
position:relative;
background:url(http://katalog.spirit.com.ua/img/navigation.png) no-repeat;
height:35px;
width:35px;
}
#navigationMenu a:hover span{
overflow:hidden;
text-align:center;
width:110px;
padding:0px 10px;
}
#navigationMenu a:hover{
text-decoration:none;
}
#navigationMenu .m_home {background-position:0 0;}
#navigationMenu .m_home :hover {background-position:0 -35px;}
#navigationMenu .m_home span{
background:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}
#navigationMenu .m_gost {background-position:-35px 0;}
#navigationMenu .m_gost:hover {background-position:-35px -35px;}
#navigationMenu .m_gost span{
background:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}
#navigationMenu .m_forum {background-position:-70px 0;}
#navigationMenu .m_forum:hover {background-position:-70px -35px;}
#navigationMenu .m_forum span{
background:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}
#navigationMenu .m_pochta { background-position:-105px 0;}
#navigationMenu .m_pochta:hover{ background-position:-105px -35px;}
#navigationMenu .m_pochta span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}
#navigationMenu .m_vxod { background-position:-140px 0;}
#navigationMenu .m_vxod:hover { background-position:-140px -35px;}
#navigationMenu .m_vxod span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}
#navigationMenu .m_vixod { background-position:-175px 0;}
#navigationMenu .m_vixod:hover { background-position:-175px -35px;}
#navigationMenu .m_vixod span{
background-color:#27ddbf;
color:#097863;
text-shadow:1px 1px 0 #87ffe7;
}

2. И так, как в CSS прописано что это меню фиксируется к левой части сайта с отступом сверху 150px- в любом месте Вашего шаблона вставляем сам код меню:

<div id="main">
<ul id="navigationMenu">
<li>
<a class="m_home " href="#"><span>НА ГЛАВНУЮ</span></a>
</li>

<li>
<a class="m_gost" href="#"><span>ГОСТЕВАЯ</span></a>
</li>

<li>
<a class="m_forum" href="#"><span>ФОРУМ</span></a>
</li>

<li>
<a class="m_pochta" href="#"><span>КОНТАКТЫ</span></a>
</li>

<li>
<a class="m_vixod" href="#"><span>ВХОД</span></a>
</li>

<li>
<a class="m_vxod" href="#"><span>ВЫХОД</span></a>
</li>

</ul>
</div>

Вот и все. Вам нужно только заменить атрибуты ссылок "#" на нужные Вам.

Т.к. в CSS у меня прописан адрес картинки на хостинге - Вы можете закинуть эту картинку на свой сайт и изменить ее адрес в css...

Удачи!

Комментарии 

 
+1 #1 NormanThism 2017-01-17 03:47 Anti Acne isotret Isotret order online
Cost of Isotret
Цитировать
 
 
+1 #2 Augmentin 2017-01-21 15:34 Generic Augmentin amoxicillin clavulanate
buy augmentin 875 mg
Augmentin 250-500-750mg Cost overnight USA
augmentin 500 mg buy online usa
Цитировать
 
 
0 #3 Angelmus 2017-04-06 03:30 rutor.org: [spam]:/[spam]tor.org
[spam]:/[spam]tor.org
Цитировать
 

Добавить комментарий


Защитный код
Обновить

БЕСПЛАТНЫЕ ШАБЛОНЫ И РАСШИРЕНИЯ ДЛЯ САЙТОВ JOOMLA! 1.5, JOOMLA 1.6, JOOMLA 1.7, JOOMLA 2.5 И ФОРУМОВ PHPBB3!
Иконки, Шрифты и Графика для Сайта