Пятница, 29.03.2024, 11:41
Скрипты для Ucoz
Карта сайта
Главная | Создание красивого раздвижного меню для сайта. - Скрипты для Ucoz



Книги для вебмастера
Новые сообщения Участники Правила форума Поиск Лента новостей
  • Страница 1 из 1
  • 1
Скрипты для Ucoz » Всё для Ucoz » Основы HTML » Создание красивого раздвижного меню для сайта. (Урок по созданию раздвижного меню.)
Создание красивого раздвижного меню для сайта.
bandjukДата: Вторник, 13.12.2011, 12:09 | Сообщение # 1
Генерал-лейтенант
Группа: Администраторы
Пол:
Награды: 22
Репутация: 22
Сообщений: 615
Бог сайта и форума За дизайнерские умения За уважение народа За хорошую посещаемость на форуме за 100 постов
Привет всем! В этой статье я хочу научить Вас создавать собственное красивое раздвижное меню для сайта.
В качестве примера возьму код меню с этой страницы.



Вот код красивого раздвижного меню для сайта.
Этот код состоит из трёх пунктов меню.
1 пункт - содержит в себе 7 подпунктов;
2 пункт - 2 подпункта;
3 пункт - 1 подпункт;

Code

<div style="width: 175px;">     
     <style type="text/css" media="all">     
     .menu {height:10px;width: 175px;font: normal 10px Arial, Helvetica, sans-serif;text-align: left; margin-top:1px;}     
     .menu a:link, .menu a:visited {color:#FDBC40;padding-left:5px;line-height:10px;display:block;font-weight:normal;background: #101010 url('http://ssilki.at.ua/menu/1.png') no-repeat left center;border-top: 1px solid #101010;border-right: 1px solid #101010;border-left: 1px solid #101010;border-bottom: 1px solid #101010;text-align: left; margin-top:1px;}     
     .menu a:hover {color:#ffffff;text-shadow:0 0 5px ;padding-left:5px;line-height:10px;display:block;font-weight:normal;background: #101010 url('http://ssilki.at.ua/menu/2.png') no-repeat left center;text-align: left; margin-top:1px;}     
</style>     

<div style="width: 175px;">     
     <style type="text/css" media="all">     
     .menu1 {height:10px;width: 175px;font: normal 10px Arial, Helvetica, sans-serif;text-align: left;}     
     .menu1 a:link, .menu1 a:visited {color:#FDBC40;padding-left:14px;line-height:10px;display:block;font-weight:normal;background: #101010 url('http://ssilki.at.ua/menu/3.png') no-repeat left center;border-right: 1px solid #101010;border-bottom: 1px solid #101010;border-left: 1px solid #101010;text-align: left;}     
     .menu1 a:hover {color:#ffffff;text-shadow:0 0 5px ;padding-left:14px;line-height:10px;display:block;font-weight:normal;border-bottom: 1px solid #ff0000;background: #101010 url('http://ssilki.at.ua/menu/4.png') no-repeat left center;text-align: left;}     
     </style>     

     <span class="menu"><a onclick="$('#1').slideToggle(200);" href="javascript://"><FONT size="3">
<img src="http://fotki.ucoz.ua/images/2.png" hspace="5"border="0" >Пункт меню 1</a></font></span> <BR>
     <div id="1" style="display:none"><span class="menu1">     
     <a href="http://адрес страницы">Подменю 1</a><BR>
     <a href="http://адрес страницы">Подменю 2</a><BR>
     <a href="http://адрес страницы">Подменю 3</a><BR>
     <a href="http://адрес страницы">Подменю 4</a><BR>
     <a href="http://адрес страницы">Подменю 5</a><BR>     
     <a href="http://адрес страницы">Подменю 6</a><BR>
     <a href="http://адрес страницы">Подменю 5</a> <BR>
     <a href="http://адрес страницы">Подменю 7</a> <BR>
     </span> </div>     

     <span class="menu"><a onclick="$('#2').slideToggle(200);" href="javascript://"><FONT size="3">
     <img src="http://fotki.ucoz.ua/images/2.png" hspace="5"border="0" >Меню 2</a></FONT></span><BR>     
     <div id="2" style="display:none"><span class="menu1">     
     <a href="http://адрес страницы">Подменю 1</a> <BR>
     <a href="http://адрес страницы">Подменю 2</a> <BR>
     </span></div>     

<span class="menu"><a onclick="$('#3').slideToggle(200);" href="javascript://"><FONT size="3">
<img src="http://fotki.ucoz.ua/images/2.png" hspace="5"border="0" >Меню 3</a></FONT></span><BR>     
     <div id="3" style="display:none"><span class="menu1">     
<a href="адрес страницы">Подменю 1</a> <BR>
     </span></div>

Итак, начнём разбираться что к чему!
Разделим этот код на две части.

1. Оформление.


Code

<div style="width: 175px;">     
     <style type="text/css" media="all">     
     .menu {height:10px;width: 175px;font: normal 10px Arial, Helvetica, sans-serif;text-align: left; margin-top:1px;}     
     .menu a:link, .menu a:visited {color:#FDBC40;padding-left:5px;line-height:10px;display:block;font-weight:normal;background: #101010 url('http://ssilki.at.ua/menu/1.png') no-repeat left center;border-top: 1px solid #101010;border-right: 1px solid #101010;border-left: 1px solid #101010;border-bottom: 1px solid #101010;text-align: left; margin-top:1px;}     
     .menu a:hover {color:#ffffff;text-shadow:0 0 5px ;padding-left:5px;line-height:10px;display:block;font-weight:normal;background: #101010 url('http://ssilki.at.ua/menu/2.png') no-repeat left center;text-align: left; margin-top:1px;}     
</style>     

<div style="width: 175px;">     
     <style type="text/css" media="all">     
     .menu1 {height:10px;width: 175px;font: normal 10px Arial, Helvetica, sans-serif;text-align: left;}     
     .menu1 a:link, .menu1 a:visited {color:#FDBC40;padding-left:14px;line-height:10px;display:block;font-weight:normal;background: #101010 url('http://ssilki.at.ua/menu/3.png') no-repeat left center;border-right: 1px solid #101010;border-bottom: 1px solid #101010;border-left: 1px solid #101010;text-align: left;}     
     .menu1 a:hover {color:#ffffff;text-shadow:0 0 5px ;padding-left:14px;line-height:10px;display:block;font-weight:normal;border-bottom: 1px solid #ff0000;background: #101010 url('http://ssilki.at.ua/menu/4.png') no-repeat left center;text-align: left;}     
     </style>     
     


Разберём этот код меню по частям
1.1. Этот код задаёт внешний вид пункту меню.

Code
<div style="width: 175px;"> - отвечает за ширину основного меню.
      <style type="text/css" media="all">     
     .menu {height:10px;width: 175px;font: normal 10px Arial, Helvetica, sans-serif;text-align: left; margin-top:1px;}     
     .menu a:link, .menu a:visited {color:#FDBC40;padding-left:5px;line-height:10px;display:block;font-weight:normal;background: #101010 url('http://ssilki.at.ua/menu/1.png') no-repeat left center;border-top: 1px solid #101010;border-right: 1px solid #101010;border-left: 1px solid #101010;border-bottom: 1px solid #101010;text-align: left; margin-top:1px;}     
     .menu a:hover {color:#ffffff;text-shadow:0 0 5px ;padding-left:5px;line-height:10px;display:block;font-weight:normal;background: #101010 url('http://ssilki.at.ua/menu/2.png') no-repeat left center;text-align: left; margin-top:1px;}     
</style>


.menu {height:10px;width: 175px;font: normal 10px Arial, Helvetica, sans-serif;text-align: left; margin-top:1px;}
height:10px; - ширина основного меню;
width: 175px; - длина основного меню;
font: normal 10px Arial, Helvetica, sans-serif; - стили текста;
text-align: left; - выравнивание текста основного меню (слева, справа, по ширине)
margin-top:1px; - Устанавливает величину отступа от верхнего края элемента.

1.2. Этот код задаёт внешний вид подпункту меню.

Code
<div style="width: 175px;">     
     <style type="text/css" media="all">     
     .menu1 {height:10px;width: 175px;font: normal 10px Arial, Helvetica, sans-serif;text-align: left;}     
     .menu1 a:link, .menu1 a:visited {color:#FDBC40;padding-left:14px;line-height:10px;display:block;font-weight:normal;background: #101010 url('http://ssilki.at.ua/menu/3.png') no-repeat left center;border-right: 1px solid #101010;border-bottom: 1px solid #101010;border-left: 1px solid #101010;text-align: left;}     
     .menu1 a:hover {color:#ffffff;text-shadow:0 0 5px ;padding-left:14px;line-height:10px;display:block;font-weight:normal;border-bottom: 1px solid #ff0000;background: #101010 url('http://ssilki.at.ua/menu/4.png') no-repeat left center;text-align: left;}     
     </style>

Всё то же самое как и пункте 1.1.

2. Код отвечающий за количество пунктов и подпунктов меню


1.1 Код пункта меню:

Каждое новый пункт меню следует создавать по такому шаблону

Code
<span class="menu"><a onclick="$('#3').slideToggle(200);" href="javascript://"><FONT size="3">
<img src="http://fotki.ucoz.ua/images/2.png" hspace="5"border="0" >Меню 3</a></FONT></span><BR>     
     <div id="3" style="display:none"><span class="menu1">     
<a href="адрес страницы">Подменю 1</a> <BR>
     </span></div>


каждый следующий подпункт (подменю) создаётся кодом:
<a href="адрес страницы">Подменю 1</a> <BR>
таких подпунктов может быть сколько угодно!

Вот и всё! По-моему ничего сложного тут нет!

Для создания нескольких блоков меню на сайте просто переименуйте названия стилей меню .menu и .menu1
напирер на .m и .m1.

Материалы на эту же тему:

Создание абзаца в тексте
Специальные символы
Создание бегущей строки
Основные атрибуты и свойства фона - background
Оформление ссылок в таблице стилей (CSS)
Основные Мета тэги
Создание рамки с помощью FIELDSET
Границы при помощи border
Коды для вставки изображения в страницу
 
bandjukДата: Вторник, 13.12.2011, 14:32 | Сообщение # 2
Генерал-лейтенант
Группа: Администраторы
Пол:
Награды: 22
Репутация: 22
Сообщений: 615
Бог сайта и форума За дизайнерские умения За уважение народа За хорошую посещаемость на форуме за 100 постов
Будут вопросы, пишите! Помогу всем!
 
KINGДата: Понедельник, 28.05.2012, 13:11 | Сообщение # 3
Рядовой
Группа: Пользователи
Пол:
Награды: 0
Репутация: 0
Сообщений: 6
Классно))
 
Скрипты для Ucoz » Всё для Ucoz » Основы HTML » Создание красивого раздвижного меню для сайта. (Урок по созданию раздвижного меню.)
  • Страница 1 из 1
  • 1
Поиск:

Яндекс.Метрика
Copyright Глюк Рекордс © 2024

Создать бесплатный сайт с uCoz