WordPress как на ладони
WordPress темы и плагины за 250 рублей wordpress jino

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, гляньте скрипт. Может, можно переделать, или и так сойдет?

Заметки к вопросу:
Riskful 1.2 год назад

Здравствуй, нужно именно на 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>
PHouse 1.2 год назад

Спасибо. В принципе, нормально. Скорее всего такой вариант и использую + меньше скриптов. Переделал стиль под горизонтальное меню:

    <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 будет все равно интересно выслушать мнение, поэтому вопрос пока не закрываю.

Riskful 1.2 год назад

Вот так?

<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>
PHouse 1.2 год назад

Да, принцип тот что надо.

0
1.2 год назад

Нет ответов на этот вопрос.

    На вопросы могут отвечать только зарегистрированные пользователи. Вход . Регистрация