|
| |
|
|
| |
для: Dinya_1
(29.12.2010 в 23:05)
| | | Принцип построения вашего меню прост:
задаём стиль для отображения меню. Указываем атрибут display: none (не отображать) для выпадающего списка меню, которое по-умолчанию и должно быть скрыто. Я бы использовал visibility: visible | hidden
в теле документа:
<style type="text/css">
#menu{ position:absolute; top:50px; left:20px;}
.rootmenu{ border-style:solid; padding:0px 0px 0px 5px;}
.submenu{ visibility: hidden; padding:0px 0px 0px 5px;}
</style>
<div class="rootmenu"><a onmouseover="showmenu()" onmouseout="hidemenu()" href="#">О компании</a></div>
<div id="m1" class="submenu" onmouseover="showmenu()" onmouseout="hidemenu()">
<a href="#">Контакты</a><br>
<a href="#">Руководство</a></div>
|
onmouseover="showmenu()" onmouseout="hidemenu()"
Это вызов JS-функций, которые делают следующее: при наведении курсора мыши на пункт меню, меняют параметр visibility: visible | hidden стиля выпадающего меню (оно становится видимым).
Функции в контексте предыдущего листинга могут быть реализованы так:
function hidemenu()
{
eval('m1.style.visibility="hidden"');
}
function showmenu()
{
eval('m1.style.visibility="visible"');
}
|
Ну, и весь код странички с меню по вашему листингу будет выглядеть примерно так:
<html>
<head>
<title>menu</title>
<style type="text/css">
#menu{ position:absolute; top:50px; left:20px;}
.rootmenu{ border-style:solid; padding:0px 0px 0px 5px;}
.submenu{ visibility: hidden; padding:0px 0px 0px 5px;}
</style>
<script>
function hidemenu()
{
eval('m1.style.visibility="hidden"');
}
function showmenu()
{
eval('m1.style.visibility="visible"');
}
</script>
</head>
<body>
<div class="rootmenu"><a onmouseover="showmenu()" onmouseout="hidemenu()" href="#">О компании</a></div>
<div id="m1" class="submenu" onmouseover="showmenu()" onmouseout="hidemenu()">
<a href="#">Контакты</a><br>
<a href="#">Руководство</a></div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Dinya_1
(31.12.2010 в 10:19)
| | | То что вы привели, это вего лишь стили описывающие элементы меню, сами элементы меню с указанием функций обработчиков неких событий. Сами функции где? | |
| |
|
|
| |
|
|
| |
для: mihdan
(30.12.2010 в 11:50)
| | | Книга "PHP 5 на примерах" стр.553, Горизонтально выпадающее меню, Листинг4.20 | |
| |
|
|
| |
|
|
| |
для: Dinya_1
(29.12.2010 в 23:05)
| | | Херомантия. Вы где это взяли? Судя по коду, вы чего-то забыли ))) | |
| |
|
|
| |
|
|
| |
для: Dinya_1
(29.12.2010 в 23:05)
| | | Их легче написать на Java Script , вот попробуй это:
//Для начала замени класс на id у submenu и у rootmenu сделай тоже
function Menu (){
var menu = document.getElementById('rootmenu');
var submenu = document.getElementById('submenu');
menu.onmouseover = show;
menu.onmouseout = hide;
submenu.onmouseover = show;
submenu.onmouseout = hide;
}
function show(){
var menu1 = document.getElementById('rootmenu');
var submenu1 = document.getElementById('submenu');
submenu.style.display="block";
}
function hide(){
var menu1 = document.getElementById('rootmenu');
var submenu1 = document.getElementById('submenu');
submenu.style.display="none";
} | |
| |
|
|
| |
|
|
| |
для: Dinya_1
(29.12.2010 в 23:05)
| | | Ну если это все, что есть, то ничего и не произойдет. Показывают, скрывают элементы меню функции showmenu('m1') и hidemenu() соответственно, вот и смотрите их. | |
| |
|
|
| |
|
|
| | При наведении мышки ни какого действия не происходит.
<style type="text/css">
#menu{ position:absolute; top:50px; left:20px;}
.rootmenu{ border-style:solid; padding:0px 0px 0px 5px;}
.submenu{ display:none; padding:0px 0px 0px 5px;}
</style>
<div class="rootmenu"><a onmouseover="showmenu('m1')" onmouseout="hidemenu()" href="#">О компании</a></div>
<div id="m1" class="submenu" onmouseover="showmenu('m1')" onmouseout="hidemenu()">
<a href="#">О компании</a><br>
<a href="#">Руководство</a></div>
</td>
</tr>
</table>
</div>
|
p/s Гадости, как это обычно принято на данном форуме, в адрес задающего вопрос говорить не нужно. | |
| |
|
|
|
