Форма входа

mvcreative

Старая форма входа

  • Страница 1 из 1
  • 1
Модератор форума: BSide  
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » Фиксированное вертикальное меню для сайта (Фиксированное вертикальное, прозрачное меню для сайта)
Фиксированное вертикальное меню для сайта
Mihail9575Дата: Среда, 14.03.2012, 18:43 | Сообщение # 1
Спикер
Группа: Проверенные
Пользователь №: 1330
Сообщений: 270
Награды: 5
Репутация: 14
Статус: оффлайн
Всем Привет!
Как понятно из названия темы, речь пойдёт о фиксированном вертикальном меню, с полупрозрачным фоном, закругленными краями и тенью.



Преимущества такого меню с моей точки зрения - простая установка, нет ничего лишнего в коде и полное отсутствие каких-либо изображений или JavaScript!

Что означает фиксированное меню? Если по простому, то это значит, что при перемещении с помощью лифтов по сайту, меню остаётся на том-же месте. В данном случае с верху 130px и с лево 10px.

Ну и сама установка:

I Ваниант (Не требуется заливать css файл)


1) Ставим в любое место, между тегами <body>
Code
<ul class="fixedMenu">
<li><a href="#">Menu Name</a></li>
<li><a href="#">Menu Name</a></li>
<li><a href="#">Menu Name</a></li>
<li><a href="#">Menu Name</a></li>
<li><a href="#">Menu Name</a></li>
<li><a href="#">Menu Name</a></li>
<li><a href="#">Menu Name</a></li>
<li><a href="#">Menu Name</a></li>
<li><a href="#">Menu Name</a></li>
<li><a href="#">Menu Name</a></li>
</ul>

2) Так-же размещаем как и первое, можно и между тегами <head>
Code
<style type="text/css">
.fixedMenu { background: none repeat scroll 0px 0px rgba(0, 0, 0, 0.8); border-radius: 2px 2px 2px 2px; top: 130px; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); left: 10px; padding: 8px 0px 8px 0px; position: fixed; list-style: none; margin: 0; border: none; }
.fixedMenu li { display: block; background: none; margin: 0; border: none; padding: 0; width: 115px; height: 25px; -moz-transition: all 0.4s ease 0.0s; }
.fixedMenu li:hover { background: rgba(0, 0, 0, 0.1); margin: 0; border: none; padding: 0; }
.fixedMenu li a { display: block; line-height: 25px; padding: 0px 0px 0px 15px; margin: 0; text-decoration: none; color: #fff; opacity: 0.4; -moz-transition: all 0.4s ease 0.0s; }
.fixedMenu li a:hover { color: #fff; opacity: 1.0; }
</style>

Так-же можно добавить в любое место (Рекомендую в самый низ) вашего основного css кода:
Code
/*--- Fixed Menu ---*/
.fixedMenu { background: none repeat scroll 0px 0px rgba(0, 0, 0, 0.8); border-radius: 2px 2px 2px 2px; top: 130px; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); left: 10px; padding: 8px 0px 8px 0px; position: fixed; list-style: none; margin: 0; border: none; }
.fixedMenu li { display: block; background: none; margin: 0; border: none; padding: 0; width: 115px; height: 25px; -moz-transition: all 0.4s ease 0.0s; }
.fixedMenu li:hover { background: rgba(0, 0, 0, 0.1); margin: 0; border: none; padding: 0; }
.fixedMenu li a { display: block; line-height: 25px; padding: 0px 0px 0px 15px; margin: 0; text-decoration: none; color: #fff; opacity: 0.4; -moz-transition: all 0.4s ease 0.0s; }
.fixedMenu li a:hover { color: #fff; opacity: 1.0; }
/*--- End Fixed Menu ---*/


II Ваниант (Требуется залить css файл)


1) Смотреть в первом варианте.
2) Скачиваем прикрепленный архив, распаковываем, находим файл "fixedMenu.css", заливаем на сайт...
3) Ставим между тегами <head> и указываем путь к файлу:
Code
<link href="Путь к файлу" type="text/css">


Готово! Остаётся поменять ссылки и названия меню.



Глобальные изменения делал Mihail9575

Всем Спасибо!

P. S. Если помог, добавляйте рейтинга.




Прикрепления: 5339945.jpg(24.3 Kb) · 6331823.jpg(13.3 Kb) · fixedMenu.rar(17.4 Kb)




www.ChromeGT.ru
Skype: toderasco-misa
vk: id78732027


Сообщение отредактировал Mihail9575 - Среда, 14.03.2012, 19:54
 
вверх
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » Фиксированное вертикальное меню для сайта (Фиксированное вертикальное, прозрачное меню для сайта)
  • Страница 1 из 1
  • 1
Поиск: