Основное меню

Меню с выпадающим сообщением

Чтобы создать такое меню, для начала построим HTML-каркас для него:

<div class="menu">
<ul>
<li>
<a href="http://website-name.ru/" class="tipHome" title="::<img src='images/home.jpg'>
<br><strong>Главная страница</strong><br>Самая свежая информация.">Главная
</a>
</li>
<li>
<a href="http://website-name.ru/" class="tipHome" title="::<img src='images/music.jpg'>
<br><strong>Раздел музыки</strong><br>Лучшая музыка Рунета.">Музыка
</a>
</li>
<li>
<a href="http://website-name.ru/" class="tipHome" title="::<img src='images/games.jpg'>
<br><strong>Раздел игр</strong><br>Самые интересные игры.">Игры
</a>
</li>
<li>
<a href="http://website-name.ru/" class="tipHome" title="::<img src='images/book.jpg'>
<br><strong>Раздел книг</strong><br>Любишь читать? Заходи и качай.">Книги
</a>
</li>
<li>
<a href="http://website-name.ru/" class="tipHome" title="::<img src='images/programm.jpg'>
<br><strong>Раздел программ</strong><br>Новейшие программы ждут тебя.">Программы
</a>
</li>
<li>
<a href="http://website-name.ru/" class="tipHome" title="::<img src='images/images.jpg'>
<br><strong>Раздел изображений</strong><br>Все самые яркие и красочные изображения.">Изображения
</a>
</li>
</ul>
</div>

Стены без отделки смотрятся так же ужасно, как и наш HTML-каркас без CSS-стилей, задаем вот такие стили для нашего меню:

body {
margin: 0px;
padding: 0px;
background: #D7D7D7;
font-family: Helvetica, Arial, Tahoma, Verdana, Sans-serif;
font-size: 11px;
}

/* Стили для основного блока меню*/
.menu {
margin: 0px 10%;
margin-top: 200px; /* минимальное значение отступа 140px */
position: absolute;
width: auto;
background: #000000 url(images/background.png) repeat-x;
}
.menu ul {
font-weight: lighter;
font-size: 11px;
list-style: none;
margin-left: 2px;
padding: 0px;
}
.menu ul li {
float: left;
height: 30px;
padding: 10px 7px 1px 8px;
font-size: 11px;
text-align: center;
}
.menu ul li a {
display: block;
padding: 0px 7px 0px 8px;
margin: 0px;
color: #ffffff;
text-decoration:none;
}
.menu ul li a:hover {
display: block;
color: #ffffff;
padding: 0px 7px 0px 8px;
margin: 0px;
text-decoration:none;
background: #A16609;
}
/* Конец*/

Следующие действие, которое нужно выполнить, так это подключить все необходимые файлы к HTML-странице, для того чтоб меню заработало. Подключаем javascript и CSS-стили, прописав вот этот код между тегами <head></head>:

<link rel="stylesheet" href="style.css" type="text/css" />
<script src="script.js" type="text/javascript" ></script>

Чтобы при наведении курсора на один из разделов меню, появлялось выпадающее сообщение, нам нужно задать параметры для файла script.js, который мы только что подключили, код который идет ниже вписываем сразу после строчки подключения в HTML-файле JS-скрипта:

<script type="text/javascript" language="javascript">
window.addEvent('domready', function(){
var tip1 = new Tips($$('.tipHome'), {
initialize:function(){
this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 300, wait: false}).set(0);
},
onShow: function(toolTip) {
this.fx.start(1);
},
onHide: function(toolTip) {
this.fx.start(0);
},
fixed: true,
offsets: {'x': -130, 'y': -155},
className: 'tooltipHome'
});
});
</script>

И естественно, чтобы выпадающее сообщение смотрелось красиво, ему необходимо задать следующие стили:

/* Стили для выпадающего блока*/
.tooltipHome-tip {
background: url(images/mas.PNG) no-repeat;
padding: 10px 10px 0px 12px;
color: #ffffff;
width: 200px;
height: 142px;
text-align: left;
z-index: 13000;
}
.tooltipHome-tip img {
margin: 0px 0px 4px 0px;
}
.tooltipHome-title {
font-weight: bold;
font-size: 12px;
}
.tooltipHome-text {
font-size: 11px;
color: #3C3C3C;
}
/* Конец*/

На этом создание меню с выпадающим сообщением закончено, ниже прилагаются исходные файлы.

Скачать файл
размер файла: 97,88 Kb
cкачиваний: 35

Раздел: Статьи для веб-мастера




Дополнительно Популярное
Дизайнерский веб-ресурс: Дле, Вордпресс, Джумла, фотошоп, плагины, иконки, шаблоны, текстуры, смайлики, логотипы.