Архив Айгуст —
архив помогалки Августа
«Никто не вечен… В отличие от знаний»
Внимание!
  Материалы на данном сайте представляют собой архивную копию форума «Айгуст - помогалка Августа» на момент октября 2019 года с целью сохранения знаний. Все права на материалы принадлежат их авторам. Материалы представлены в открытый доступ в ознакомительных целях, запрещено их коммерческое использование без согласования с авторами. Администрация сайта не несёт ответственности за содержание материалов, в том числе за наличие вредоносных закладок в коде, используйте любой предоставленный код на свой страх и риск. Рекомендуется проверять любые файлы вручную и перезаливать на собственный хостинг, дабы избежать возможной модификации или исчезновения в будущем.

Горизонтальное меню

kent
Сообщений: 2041
12.08.2010 11:49:54
Горизонтальное меню
Интересное горизонтальное меню типа как на august4u

Используеться для дополнительных страниц =) к примеру можна использовать для стартовой =)

И так вот код =)



<style type="text/css">
#hmenu {
float: center;
}

#hmenu a {
text-decoration: none;
color: #000000;
background: url(Ссылка на изображение) no-repeat center top;
display: block;
height: 30px;
width: 87px;
text-align: center;
font: 15px/30px verdana, Times, serif;
}

#hmenu a:hover {
background: url(Ссылка на изображение) no-repeat top center;
display: block;
height: 30px;
width: 87px;
color: #ffffff;
text-align: center;
font: 15px/30px verdana, Times, serif;
}
</style>
<table border="0" cellpadding="0" align="center" cellspacing="0" width="1000px" >
<tr>
<td id="hmenu"><a href="ссылка" >Название</a></td>
<td id="hmenu"><a href="ссылка" >Название</a></td>
<td id="hmenu"><a href="ссылка" >Название</a></td>
<td id="hmenu"><a href="ссылка" >Название</a></td>
<td id="hmenu"><a href="ссылка" >Название</a></td>
<td id="hmenu"><a href="ссылка" >Название</a></td>
</tr>
</table>

Примечание:
Россмотрим для начала Css
#hmenu a
(Это код меню в котором кнопка будет по умолчанию)
color: #000000; Цвет текста
Высота изображения в пикселях height: 30px;
Ширина изображения в пикселях width: 87px;
Размер шрифта в пикселях font: 15px/30px


#hmenu a:hover
( Это код меню в котором кнопка будет изменяться при навидении на кнопку)
Здесь пишем тоже самое, вот только картинку можна поставить к примеру анимированую и при наведении на кнопку будет анимация , так же меняем цвета, размер шрифта итд.
#167
Jaguar
Админ
Сообщений: 1505
05.08.2011 03:32:55
Re: Горизонтальное меню
А вот пример уже готового кода. Просто копируйте и вставляйте к себе в чат или сайт. У меня лично он стоит в разделе "Люди"
<ul class="solidblockmenu">
<li><a href="http://ЧатЭЭЭ.august4u.ru/people/top" title="ТОП 10">Топ 10</a></li>
<li><a href="http://ЧатЭЭЭ.august4u.ru/people/birthday" title="Дни рождения">Дни рождения</a></li>
<li><a href="http://ЧатЭЭЭ.august4u.ru/people/list" title="Список ников">Список ников</a></li>
<li><a href="http://ЧатЭЭЭ.august4u.ru/people/lock" title="Отказники">Отказники</a></li>
<li><a href="http://ЧатЭЭЭ.august4u.ru/people/form" title="Регистрация" class="current">Регистрация</a></li>
<li><a href="http://ЧатЭЭЭ.august4u.ru/whowas" title="Кто был">Кто был</a></li>
</ul>
<br style="clear: left" />
<style type="text/css">
.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(http://s002.radishit.ru/i200/1108/18/ffec571e41d0.gif) center center repeat-x;
}
.solidblockmenu li{
display: inline;
}
.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}
.solidblockmenu li a:visited{
color: white;
}
.solidblockmenu li a:hover, .solidblockmenu li .current{
color: white;
background: transparent url(http://s03.radishit.ru/i176/1108/62/73dce9ff88b6.gif) center center repeat-x;
}
</style>

<!--[if IE]>
<style type="text/css">
p.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
padding-top: 1em;
}
</style>
<![endif]-->
За место ЧатЭЭЭ естественно прописывайте адрес вашего чата.
#10713
Azygos
Сообщений: 377
22.09.2011 12:56:05
Re: Горизонтальное меню
Jaguar:
Находим:
<li><a href=http://ЧАТ.august4u.ru/people/top><b>Топ 10</b></a></li>
<li><a href=http://ЧАТ.august4u.ru/people/birthday><b>Дни рождения</b></a></li>
<li><a href=http://ЧАТ.august4u.ru/people/list><b>Список ников</b></a></li>
<li><a href=http://ЧАТ.august4u.ru/people/lock><b>Отказники</b></a></li>
<li><a href=http://ЧАТ.august4u.ru/people/form><b>Регистрация</b></a></li>
Тут естественно ссылку своего чата.
Относительные ссылки
<ul class="menu4">
<li><a href="/people/top"><b>Топ 10</b></a></li>
<li><a href="/people/birthday"><b>Дни рождения</b></a></li>
<li><a href="/people/list"><b>Список ников</b></a></li>
<li><a href="/people/lock"><b>Отказники</b></a></li>
<li><a href="/people/form"><b>Регистрация</b></a></li>
</ul>
и не надо заменять на адрес вашего чата (:
Jaguar:
<table width=500 cellspacing=1 cellpadding=1 style=table-layout:fixed>
<col width=50%><col width=50%>
<tr><td colspan=2 class=h>Всего анкет: %PEOPLE('ALL')%</td></tr>
<tr><th colspan=2 class=btns>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<ul class="menu4">
<li><a href=http://ЧАТ.august4u.ru/people/top><b>Топ 10</b></a></li>
<li><a href=http://ЧАТ.august4u.ru/people/birthday><b>Дни рождения</b></a></li>
<li><a href=http://ЧАТ.august4u.ru/people/list><b>Список ников</b></a></li>
<li><a href=http://ЧАТ.august4u.ru/people/lock><b>Отказники</b></a></li>
<li><a href=http://ЧАТ.august4u.ru/people/form><b>Регистрация</b></a></li>
</ul>
</th></tr>
Элемент <!DOCTYPE> в середине документа не нужен.
Доктайп предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.

Стили не смотрел, может и там есть некорректности (:
#12322
Jaguar
Админ
Сообщений: 1505
22.09.2011 17:03:51
Re: Горизонтальное меню
Ну может быть и так. Я ж его не сам писал. Тут вот у меня ещё какая проблемка. Тоже нашёл меню типа такого, только не разберусь как сделать.
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Menu.ihtut.net</title>
<link href="style.css" rel="stylesheet" media="all" />
</head>
<body>
<h1>Горизонтальное CSS меню</h1>
<hr />

<div id="menu">
<ul>
<li><a href="http://menu.ihtut.net/" class="current"><span>Главная</span></a></li>
<li><a href="http://menu.ihtut.net/"><span>Регистрация</span></a></li>
<li><a href="http://menu.ihtut.net/"><span>Поиск</span></a></li>
<li><a href="http://menu.ihtut.net/"><span>Карта сайта</span></a></li>
<li><a href="http://menu.ihtut.net/"><span>О нас</span></a></li>
</ul>
</div>

<br><br><br><br><br><br><a href="http://menu.ihtut.net/"><img src="http://menu.ihtut.net/logo.png" border="0"></a>
</body>
</html>
style.css
/* --------------------------
AUTHOR : Lomot
URL : http://menu.ihtut.net/
Copyrights by Menu.ihtut.net
----------------------------*/
#menu{
width:100%;
height:60px;
background:url(images/menu_bg.png) repeat-x;
}
#menu ul{
list-style:none;
margin:0 auto;
width:100%;
}
#menu li{
list-style:none;
display:block;
float:left;
height:60px;
line-height:60px;
}
#menu li a{
display:block;
float:left;
color:#a7a7a7;
text-transform:uppercase;
font-size:11px;
font-weight:bold;
line-height:60px;
text-decoration:none;
padding:0 25px;
}
#menu li a:hover, #menu li a.current{
color:#fff;
background:url(images/menu_h.png) no-repeat bottom;
}
Картинка menu_bg.png
[изображение]
Картинка menu_h.png [изображение]
Должно как бы так получиться: [изображение] Если кому не трудно, то сделайте и скиньте получившийся шаблон. Вроде бы и легко, но чёт не получается.
#12337
Пижон
Дизайнер
Сообщений: 899
22.09.2011 18:23:44
Re: Горизонтальное меню
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link rel="stylesheet" type="text/css" href="http://artem-daragan.do.am/igust_jaguar/style.css" media="all">
</head>

<body>
<div id="menu">

<ul>
<li><a href="ссылка"><span>Главная</span></a></li>
<li><a href="ссылка"><span>Регистрация</span></a></li>
<li><a href="ссылка"><span>Поиск</span></a></li>
<li><a href="ссылка"><span>Карта сайта</span></a></li>
<li><a href="ссылка"><span>О нас</span></a></li>
</ul>

</div>
</body>
</html>
#12341
Jaguar
Админ
Сообщений: 1505
22.09.2011 18:34:32
Re: Горизонтальное меню
Благодарю за помощь [изображение]
#12342

Другие темы раздела