| |
|
|
| | где то помню видел сайт на котором строилось горизонтальное меню, при наведении на определённый подраздел или раздел, выпадал список его подразделов, строился он на UL LI
думаю таких меню достаточно много, решил поискать не смог найти, может кто видел, подскажите, если есть несколько вариантов, подскажите пожалуйста | |
| |
|
|
| |
|
|
| |
для: web777
(25.12.2008 в 14:27)
| | | Ы?
http://www.htmlbook.ru/css/hover.html | |
| |
|
|
| |
|
|
| |
для: DJ Paltus
(25.12.2008 в 14:49)
| | | не совсем то, вот я нашёл другой сайт с похожей навигацией
http://auka.ru/catalog/auto/spectech/
при нажатии на меню разделов, вылезает блок подразделов
в принципе это тоже устраивает, но хотелось увидеть больше вариантов такого плана | |
| |
|
|
| |
|
|
| |
для: web777
(26.12.2008 в 06:22)
| | | Собственно, ничем принципиально не отличается. По-другому позиционирован выпадающий список и добавлен эффект разворачивания. | |
| |
|
|
| |
|
|
| |
для: DJ Paltus
(26.12.2008 в 09:41)
| | | возможно, но мне как не совсем разбирающему в CSS, такое сложно сделать, поэтому мне лучше найди готовое решение, и если есть выбор, выбрать один из нескольких вариантов | |
| |
|
|
| |
|
|
| |
для: web777
(26.12.2008 в 13:05)
| | | Повинуясь императиву "найди", предлагаю вариант решения, который Ваш покорный слуга где-то нарыл и однажды использовал при верстке одного плохого сайта.
Это пишем в <head>:
<script language="JavaScript">
<!--
over_header = new Array();
over_menu = new Array();
for(i=1;i<=10;i++)
{
over_header[i] = 0;
over_menu[i] = 0;
}
function Turn(id, mode)
{
if(mode)
eval("setTimeout(\"On(" + id + ");\",10)");
else
eval("setTimeout(\"Off(" + id + ");\",10)");
}
function On(id)
{
eval("document.getElementById('smenu" + id + "')").style.visibility =
"visible";
}
function Off(id)
{
if(!over_menu[id] && !over_header[id])
{
eval("document.getElementById('smenu" + id + "')").style.visibility =
"hidden";
}
}
-->
</script>
|
Это пишем в стиль:
.
.smenu
{
position: absolute;
padding: 5px;
font-size:13px;
font-family: ms sans serif, tahoma;
visibility: hidden;
background-color:#74BBFB;
border: 1px solid gray;
line-height:20px;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
color:#ffffff;
}
.button {
height:40px;
cursor:default;
padding-top:5px;
text-decoration:none;
font-size:13px;
color:#004000;
font-family: ms sans serif, tahoma;
background: url(img/grad3.gif) no-repeat;
width:90px;
text-align:center;
text-decoration:none;
}
a.lnk
{
text-decoration: none;
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
color:#000080;
}
|
Так ставим кнопочку, при наведении на которую будет что-то где-то появляться:
<div class=button style="position:absolute; left:40px; top:250px;" onmouseout="Turn(1,0); over_header[1]=0;" onmouseover="Turn(1,1); over_header[1]=1;">
О Компании
</div>
<div class=button style="position:absolute; left:60px; top:300px;" onmouseout="Turn(2,0); over_header[2]=0;" onmouseover="Turn(2,1); over_header[2]=1;">
Публикации
</div>
|
Так прописываем то, что будет появляться при наведении мыши на искомую кнопочку (если надо не наведение, а нажатие, заменяем onMouseOver на onClick):
<div id="smenu1" class="smenu" style="top: 250px; left:130px" onmouseover="over_menu[1]=1;" onmouseout="Turn(1,0); over_menu[1]=0;">
<a href='index3.php?page=docs/01/01' class=lnk>О компании
</a><br /><a href='index3.php?page=docs/01/02' class=lnk>Услуги
</a><br /><a href='index3.php?page=docs/01/03' class=lnk>Лицензии
</a><br /><a href='index3.php?page=docs/01/04' class=lnk>Сертификаты
</a><br /><a href='index3.php?page=docs/01/05' class=lnk>Наши заказчики
</a><br /><a href='index3.php?page=docs/01/08' class=lnk>Благодарности
</a><br /><a href='index3.php?page=docs/01/06' class=lnk>Контакты
</a><br /><a href='index3.php?page=docs/01/07' class=lnk>Схема проезда
</a><br /> </div>
|
Если всё работает, благодарим меня и автора скрипта, оставшегося за кадром. Если что-то не работает, ищем оригинал скрипта в интернете по ключевым словам "smenu javascript".
Успехов. | |
| |
|
|
| |
|
|
| |
для: DJ Paltus
(26.12.2008 в 14:42)
| | | ох как, спасибо, попробую:) | |
| |
|
|
