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
Цитировать
 
 
0 #4 Dorothycluse 2017-07-19 00:59 Принципиально новое обновление "[spam]mer 16.0 + XEvil":
автораспознаван ие captcha Гугла, Яндекса, Фэйсбука, VK, Bing, Hotmail, Mail[spam], SolveMedia,
а также свыше 8400 (!) других видов captchas,
с высокой скоростью (100 изображений в секунду) и точностью (80%-100%). В XEvil 3.0 реализовано подключение любых SEO/SMM программ - [spam]mer, GSA, ZennoPoster, VKBot, A-Parser,
и многих других. Готовится абсолютно бесплатная демо-версия. Интересно? см. в Ютубе "XEvil: new OCR - captcha solver"


[spam]mer20170718
Цитировать
 
 
0 #5 Dorothycluse 2017-07-19 06:29 Нейросетевое обновление "[spam]mer 16.0 + XEvil 3.0":
взлом капчи Гугла, Yandex, Фэйсбука, Vkontakte, Bing, Hotmail, Mail[spam], SolveMedia,
а также свыше 8400 (!) других типов captchas,
с высокой скоростью (100 изображений в секунду) и точностью (80%-100%). В XEvil 3.0 реализовано подключение любых SEO/SMM программ - [spam]mer, GSA, ZennoPoster, VKBot, A-Parser,
и многих других. Готовится абсолютно бесплатная демо-версия. Заинтересованы? см. в YouTube "XEvil: new OCR - captcha solver"


[spam]mer20170718
Цитировать
 
 
0 #6 Arleneelamn 2017-07-22 06:22 Революционное обновление "[spam]mer 16.0 + XEvil":
распознавание капчи Google, Яндекса, Facebook, ВКонтакте, Bing, Hotmail, Mail[spam], SolveMedia,
а также свыше 8400 (!) других типов капч,
с высокой скоростью (100 изображений в секунду) и точностью (80%-100%). В XEvil 3.0 реализовано подключение любых SEO/SMM программ - [spam]mer, GSA, ZennoPoster, VKBot, A-Parser,
и многих других. Готовится абсолютно бесплатная демо-версия. Заинтересованы - ищите в Ютубе "XEvil: new OCR - captcha solver"


[spam]mer20170721
Цитировать
 
 
0 #7 Arleneelamn 2017-07-22 15:41 Принципиально новое обновление "[spam]mer 16.0 + XEvil 3.0":
обход капч Гугла, Yandex, Фэйсбука, VK, Bing, Hotmail, Mail[spam], SolveMedia,
а также свыше 8400 (!) других типов captcha,
с высокой скоростью (100 изображений в секунду) и точностью (80%-100%). В XEvil 3.0 реализовано подключение любых SEO/SMM программ - [spam]mer, GSA, ZennoPoster, VKBot, A-Parser,
и многих других. Готовится абсолютно бесплатная демо-версия. Интересно - см. в Ютубе "XEvil: new OCR - captcha solver"


[spam]mer20170721
Цитировать
 
 
0 #8 Arleneelamn 2017-07-22 21:01 Принципиально новое обновление "[spam]mer 16.0 + XEvil":
распознавание капчи Гугла, Яндекса, Фэйсбука, VK, Bing, Hotmail, Mail[spam], SolveMedia,
а также свыше 8400 (!) других видов капчи,
с высокой скоростью (100 изображений в секунду) и точностью (80%-100%). В XEvil 3.0 реализовано подключение любых SEO/SMM программ - [spam]mer, GSA, ZennoPoster, VKBot, A-Parser,
и многих других. Готовится абсолютно бесплатная демо-версия. Заинтересованы? ищите в YouTube "XEvil: new OCR - captcha solver"


[spam]mer20170721
Цитировать
 
 
0 #9 Arleneelamn 2017-07-23 02:18 Революционное обновление "[spam]mer 16.0 + XEvil":
взлом капч Google, Yandex, Фэйсбука, VK, Bing, Hotmail, Mail[spam], SolveMedia,
а также свыше 8400 (!) других видов captchas,
с высокой скоростью (100 изображений в секунду) и точностью (80%-100%). В XEvil 3.0 реализовано подключение любых SEO/SMM программ - [spam]mer, GSA, ZennoPoster, VKBot, A-Parser,
и многих других. Готовится абсолютно бесплатная демо-версия. Заинтересованы - см. в YouTube "XEvil: new OCR - captcha solver"


[spam]mer20170721
Цитировать
 
 
0 #10 Stevenfen 2017-07-25 12:59 Write My Paper - Essay[spam]dite [spam]

Looking for an expert to write my paper: [spam]s://essay[spam]dite [spam]/write-my-paper/ for you? You are at the right place.
Providing superior writing service appears to be our main specialization and passion.
Our website is the best destination for every English-speaking student who calls for assistance when handling his or her daily academic tasks.
Цитировать
 
 
0 #11 Rogerbub 2017-07-25 16:41 Dissertation Writing Service - Essay[spam]dite [spam]

Our [spam]s://essay[spam]dite [spam]/dissertation-writing-service/ provides a full-scale writing assistance accessible online 24/7.
Apart from many other writing[spam]pa nies, we are rather picky when forming a professional staff of experts.
Moreover, we try to make our every customer feel safe and pleased with the service.
Цитировать
 
 
0 #12 WriteEssay 2017-07-25 16:49 Write My Essay - Essay[spam]dite [spam]

Fed up of typing "who can write my essay" in the search bar?
Would you like to have a reliable helper always by your side?
Our website will[spam]e as an excellent solution to write my essay
Цитировать
 
 
0 #13 BuyEssay 2017-07-25 19:59 Buy Essay - Essay[spam]dite [spam]

Where to Buy Essay Online ? Our experienced writers can boast higher degrees in addition to exceptional writing skills. You now have a great chance to buy essay: [spam]s://essay[spam]dite [spam]/buy-essay/ papers online with only a couple of clicks.
Цитировать
 
 
0 #14 Flossiefuh 2017-07-25 21:21 Нейросетевое обновление "[spam]mer 16.0 + XEvil":
взлом капч Google, Яндекса, Facebook, VK, Bing, Hotmail, Mail[spam], SolveMedia,
а также свыше 8400 (!) других типов captcha,
с высокой скоростью (100 изображений в секунду) и точностью (80%-100%). В XEvil 3.0 реализовано подключение любых SEO/SMM программ - [spam]mer, GSA, ZennoPoster, VKBot, A-Parser,
и многих других. Готовится абсолютно бесплатная демо-версия. Интересно - см. в YouTube "XEvil: new OCR - captcha solver"


[spam]mer20170725
Цитировать
 
 
0 #15 EssayForMe 2017-07-25 23:34 We Can Write Your Paper For You - Essay[spam]dite [spam]

Can You Write My Essay for Me: [spam]s://essay[spam]dite [spam]/write-essay-for-me/ ? How many times do students worldwide ask this question without finding an answer?
We'd rather not check the official statistics. At the same time, essays appear to be probably among the most popular academic assignments.
Students from various education establishments need to[spam]plete them constantly. If you are among those lucky ones, feel free to contact our customer service department and opt for an essay writing help
Цитировать
 

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


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

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