Скользящее меню при наведении мыши - PullRequest
1 голос
/ 03 февраля 2010

All

В следующем коде

<body>
<div id="slidemenubar">
<a href="">1</a>
</div><br>
<div id="slidemenubar2">
<a href="">2</a>
</div>
</body>

При наведении курсора мыши на гиперссылки 3 <br>, 4 <br>, 5 должны отображаться справа (как скользящее меню)

При наведении курсора мыши на 2 6 <br>, 7 должно отображаться в скользящем меню, а новое меню должно быть вправо, а не внизу или вверху. Можете ли вы дать мне код или указать пример ссылки для это.

Спасибо ..............

Ответы [ 2 ]

2 голосов
/ 17 февраля 2010

Я думаю, что вам нужно по этой ссылке: http://w3schools.com/dhtml/tryit.asp?filename=trydhtml_menu_slidehorizontal

По ссылке вы можете обновить код, что на сайте очень приятно.

Если вы не можете открыть ссылку, вот код:

<html>
<head>
<style>
body{font-family:arial;}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightblue}

table.nav
{
background:black;
position:relative;
font: bold 80% arial;
top:0px;
left:-135px;
}
</style>
<script type="text/javascript">
var i=-135;
var intHide;
var speed=3;
function showmenu()
{
clearInterval(intHide);
intShow=setInterval("show()",10);
}
function hidemenu()
{
clearInterval(intShow);
intHide=setInterval("hide()",10);
}
function show()
{
if (i<-12)
    {
    i=i+speed;
    document.getElementById('myMenu').style.left=i;
    }
}
function hide()
{
if (i>-135)
    {
    i=i-speed;
    document.getElementById('myMenu').style.left=i;
    }
}
</script>
</head>

<body>
<table id="myMenu" class="nav" width="150" onmouseover="showmenu()" onmouseout="hidemenu()">
<tr><td class="menu"><a href="/default.asp">HOME</a></td>
<td rowspan="5" align="center" bgcolor="#FF8080">M<br />E<br />N<br />U</td></tr>
<tr><td class="menu"><a href="/asp/default.asp">ASP</a></td></tr>
<tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr>
<tr><td class="menu"><a href="default.asp">DHTML</a></td></tr>
<tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></td></tr>
</table>
<p>Mouse over the MENU to show/hide the menu</p>
<p>Try changing the "speed" variable in the script, to change the menus's sliding speed</p>
</body>
</html>
2 голосов
/ 03 февраля 2010
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...