JS Меню
Скачал меню следующего типа:
<div class="megamenu"> <ul> <li><a href="#">home</a></li> <li class="downservices1"><a href="#">about</a></li> <li class="downservices"><a href="#">services</a></li> <div class="servicesdropped"> <p class="textleft">Here's an example of a paragraph inside the drop-down panel. We placed this paragraph in the left column. Then we have 2 more columns on the right with a H3 for the section title and then we have unordered lists.</p> <ul class="middle"> <h3>Design Services</h3> <li><a href="#">Web Design</a></li> <li><a href="#">Hosting Solutions</a></li> <li><a href="#">Logo Design</a></li> <li><a href="#">e-Commerce</a></li> <li><a href="#">WordPress Integration</a></li> <li><a href="#">PSD/PNG Conversion</a></li> </ul> <ul class="right"> <h3>Writing Services</h3> <li><a href="#">Freelance Writing</a></li> <li><a href="#">Blogging</a></li> <li><a href="#">Proofreading</a></li> <li><a href="#">Copywriting</a></li> <li><a href="#">Ghost Writing</a></li> <li><a href="#">Marketing Plan</a></li> </ul> </div> <li class="downservices2"><a href="#">products</a></li> <li><a href="#">portfolio</a></li> <li><a href="#">contact</a></li> </ul> </div>
Суть в том, что нажимая вкладку "services" (.downservices), выезжает блок .servicesdropped. А чтобы он заехал назад - опять кликаем "services". В общем, не очень то и удобно. Конкретно для этого случая толкового ничего в поиске не нашел, и остановился на следующем:
<script type="text/javascript">
$(document).ready(function(){
$(".downservices").mouseover(function(){
$(".servicesdropped").show();
});
$(".downservices1,.downservices2").mouseover(function(){
$(".servicesdropped").hide();
});
$(".servicesdropped").mouseover(function(){
$(".servicesdropped").show();
});
$(".servicesdropped").mouseout(function(){
$(".servicesdropped").hide();
});
});
</script>
.downservices1,.downservices2 - это соседние вкладки в меню. Кто знает JS, гляньте скрипт. Может, можно переделать, или и так сойдет?
Заметки к вопросу:
Спасибо. В принципе, нормально. Скорее всего такой вариант и использую + меньше скриптов. Переделал стиль под горизонтальное меню:
<div class="container">
<ul class="menu">
<li><a href="">Link 1</a>
<ul class="submenu">
<li><a href="">Sub link 1</a></li>
<li><a href="">Sub link 2</a></li>
<li><a href="">Sub link 3</a></li>
</ul>
</li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
</div>
<!-- CSS -->
<style>
.container {
width: 100%;float:left;
}
.menu {
position: relative;float:left;
width: 100%;
}
.menu li {float:left;
background: #c4c4c4;
margin: 1px 0px;
display: block;
position: relative;
width: 20%;
}
.submenu {
display: block;float:left;
position: absolute;
top: 25px;
width: 0px;
overflow: hidden;margin-left:0px;
}
.menu li:hover .submenu {float:left;
width: 300px;
}
</style>
А по js будет все равно интересно выслушать мнение, поэтому вопрос пока не закрываю.
Вот так?
<div class="container">
<ul class="menu">
<li><a href="">Link 1</a>
<ul class="submenu">
<li><a href="">Sub link 1</a></li>
<li><a href="">Sub link 2</a></li>
<li><a href="">Sub link 3</a></li>
</ul>
</li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a>
<ul class="submenu">
<li><a href="">Sub link 1</a></li>
<li><a href="">Sub link 2</a></li>
<li><a href="">Sub link 3</a></li>
</ul>
</li>
<li><a href="">Link 5</a></li>
</ul>
</div>
<div class="container">
<ul class="menu-js">
<li><a href="">Link 1</a>
<ul class="submenu-js">
<li><a href="">Sublink 1</a></li>
<li><a href="">Sublink 2</a></li>
<li><a href="">Sublink 3</a></li>
</ul>
</li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</div>
<!-- CSS -->
<style>
/* Очищаем все отступы */
*{
padding: 0px;
margin: 0px;
font-family: sans-serif;
}
.container {
width: 100%;
text-align: center;
padding-top: 50px;
}
.menu-js,
.menu {
position: relative;
display: inline-block;
}
.menu-js li,
.menu li {
display: inline-block;
background: #3d6282;
padding: 3px 10px;
position: relative;
transition: .5s all;
}
.menu-js li:hover,
.menu li:hover {
background: #5e8eb7;
}
.menu-js a,
.menu a {
color: #fff;
display: block;
text-decoration: none;
}
.submenu-js,
.submenu {
display: block;
position: absolute;
top: 100%;
max-height:0px;
left: 0px;
overflow: hidden;
width: 100%;
}
.submenu-js li,
.submenu li {
margin:0px;
width: 100%;
display: block;
clear: both;
}
.menu li:hover .submenu {
max-height: 100%;
overflow: visible;
}
.menu li:hover {
height: auto;
}
.active {
max-height: 100%;
overflow: visible;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.menu-js li').hover(function () {
$('ul',this).addClass('active');
}, function () {
$('ul',this).removeClass('active');
});
});
</script> Да, принцип тот что надо.
Здравствуй, нужно именно на JS решение? Просто вот на CSS то что ты хочешь сделать:
<div class="container"> <ul class="menu"> <li><a href="">Link 1</a> <ul class="submenu"> <li><a href="">Sub link 1</a></li> <li><a href="">Sub link 2</a></li> <li><a href="">Sub link 3</a></li> </ul> </li> <li><a href="">Link 2</a></li> <li><a href="">Link 3</a></li> <li><a href="">Link 4</a></li> <li><a href="">Link 5</a></li> </ul> </div> <!-- CSS --> <style> .container { width: 200px; } .menu { position: relative; width: 100%; } .menu li { background: #c4c4c4; margin: 1px 0px; display: block; position: relative; width: 100%; } .submenu { display: block; position: absolute; top: 0px; left: 100%; width: 0px; overflow: hidden; } .menu li:hover .submenu { width: 100%; } </style>