Горизонтальное меню, простой структуры - Форум о поисковых системах и социальных сетях

Страница 1 из 1
1

Горизонтальное меню, простой структуры (CSS + JQ)

Горизонтальное меню, простой структуры

ILyeS

Вторник, 13.09.2011, 23:36

Проверенный

Сообщения: 631

Репутация: 303

В написании использовался JQuerry, так как он будет покороче JScript, а JQ стандартно присутствует в uCoz.

Структура очень проста. Устанавливаем меню, его ширина зависит от количества кнопочек и оно позиционируется по центру:

Code

<div class="menu">

<div>главная
<ul>
<a href="/">ссылка</a>
<a href="/">ссылка</a>
<a href="/">ссылка</a>
</ul>
</div>

</div>

Подключаем css код:

Code

/* Menu by ILyeS */
.menu{margin:0 auto;font:14pt 'century gothic';color:#eee;text-shadow:0 -1px #000;cursor:default}
.menu div{float:left;min-width:120px;padding:8px 0;background:#69f;text-align:center}
.menu div:hover{background:#36f;color:#fff;text-shadow:0 -2px #000;border-radius:0 0 10px 10px}
.menu ul{display:none;width:120px;font-size:12pt;background:#36c;padding:0;border-top:1px dashed #fff;border-bottom:1px dashed #fff}
.menu a{text-decoration:none;color:#eee;padding:5px 0;text-shadow:none}
.menu a:hover{color:#fff;text-shadow:0 0 10px #fff}

И подключаем js:

Code

// Menu by ILyeS
$('.menu div').hover(function(){$(this).find('ul').show()},function(){$(this).find('ul').hide()});
$('.menu div:first').attr({style:'border-radius:10px 0 0 10px'});
$('.menu div:first').hover(function(){$(this).attr({style:'border-radius:10px 0 10px 10px'})},function(){$(this).attr({style:'border-radius:10px 0 0 10px'})});
$('.menu div:last').attr({style:'border-radius:0 10px 10px 0'});
$('.menu div:last').hover(function(){$(this).attr({style:'border-radius:0 10px 10px 10px'})},function(){$(this).attr({style:'border-radius:0 10px 10px 0'})});
$('.menu a').append('<br>');

Копирайты соблюдать не требую. Спасибо за внимание.

Пост отредактировал ILyeS - Вторник, 13.09.2011, 23:38

Мои проекты:
http://www.nhlliga.at.ua/

Верстка от 200р:
http://megasoft.3dn.ru/forum/95-281253-1

Профиль

HitMen

Среда, 14.09.2011, 07:39

Проверенный

Сообщения: 164

Репутация: -7

ILyeS,Красиво , но замени ,цвет и что нибудь добавь !
Было б круче !

Профиль

ghRaa-

Среда, 14.09.2011, 10:51

Пользователь

Сообщения: 93

Репутация:

Что-то я не могу найти шрифт, где он?
Мне шрифт не нравится)

Бесплатно работаю гарантом. Скайп в профиле.
Создаю сайт на тему Skyrim. Срочно нужен администратор.

Профиль

ILyeS

Среда, 14.09.2011, 19:31

Проверенный

Сообщения: 631

Репутация: 303

ghRaa-,

Quote

font:14pt 'century gothic'

Плохо смотришь.

Добавлено (14.09.2011, 19:31)
---------------------------------------------

Quote (HitMen)

но замени ,цвет и что нибудь добавь !
Было б круче !

С фантазией так себе. Можете и сами поменять на нужный.

Мои проекты:
http://www.nhlliga.at.ua/

Верстка от 200р:
http://megasoft.3dn.ru/forum/95-281253-1

Профиль

Regaska

Пятница, 18.11.2011, 20:23

Пользователь

Сообщения: 56

Репутация: 14

Блин не могу поставить себе на сайт.
"И подключаем js: "-я создал новый текстовый документ написал во внутрь этот код и переименовал с расширением js.Закинул в верхнюю часть сайта и ничего не получилось(

Профиль

ILyeS

Понедельник, 28.11.2011, 15:32

Проверенный

Сообщения: 631

Репутация: 303

Quote (Regaska)

Закинул в верхнюю часть сайта

Скрипты вставляются перед </body>.
Пример:

Code

Мои проекты:
http://www.nhlliga.at.ua/

Верстка от 200р:
http://megasoft.3dn.ru/forum/95-281253-1

Профиль

Горизонтальное меню, простой структуры (CSS + JQ)

Страница 1 из 1
1