菜单位于顶部，向下推动页面
[英]Menu siding from top and push the page down
问题描述
I need some help please. 
我需要一些帮助。
I'm trying to make a menu that pushes the page down when clicked and displays the specific sub-menu. 我试图制作一个菜单，在单击该菜单时将页面下推并显示特定的子菜单。
The menu should be above the page with a height of 50px. 菜单应位于页面上方，高度为50px。 If i'm using height the content won't be pushed down. 如果我使用高度，则不会压低内容。
When I click on first link i should get the sub menu for that link. 当我单击第一个链接时，我应该获得该链接的子菜单。 If I push the second link the first submenu should be replaced with the second set of sub menu links. 如果我按下第二个链接，则应该用第二组子菜单链接替换第一个子菜单。
Right now it's all messed up and I cant get it to work. 现在一切都搞砸了，我无法正常工作。 I dont know much about javascript, as you can see here: 我对javascript不太了解，您可以在这里看到：
jQuery(document).ready(function(){
jQuery(".menu-item-has-children").click(function(){
jQuery(this).children(".sub-menu").slideToggle();
});
});
Thank you in advance for all your time. 预先感谢您的所有宝贵时间。
https://jsfiddle.net/tjkr6L08/ https://jsfiddle.net/tjkr6L08/
2 个解决方案
解决方案1
0 2017-02-22 15:17:42
Take a look at https://jsfiddle.net/tjkr6L08/1/ 看看https://jsfiddle.net/tjkr6L08/1/
Javascript 使用Javascript
jQuery(document).ready(function() {
jQuery(".menu-item-has-children").click(function() {
jQuery(".opened").slideUp().removeClass("opened");
jQuery(this).children(".sub-menu").slideToggle().addClass("opened");
});
});
CSS CSS
.sub-menu {
display: none;
position:absolute;
top:40px;
left:0;
right:0;
}
So your issue is 50% css, 50% javascript. 因此，您的问题是50％CSS，50％JavaScript。 What you want is to make a reference to previously opened submenu, so you can close it. 您想要引用以前打开的子菜单，因此可以将其关闭。 To make things align properly, the menu can be absolute; 为了使内容正确对齐，菜单可以是绝对的。
So the above is the quickest possible solution - might not be the best, but will give you an idea how to proceed. 因此，以上是最快的解决方案-可能不是最好的解决方案，但是会为您提供一个执行方法的想法。
解决方案2
0 2017-02-22 15:30:22
you can use the bootstrap collapse class instead of toggle in java script once see the documentation of the bootstrap Collapse 您可以使用自举类崩代替Java脚本触发一次看到引导的文档崩溃
.menu-menu-top-container { width: 100%; text-align: center; position: static; height: 50px; } .menu-top li { display: inline-block; padding:5px; }
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="menu-top"> <div class="menu-menu-top-container"> <ul id="menu-menu-top" class="menu"> <li><a href="#" data-toggle="collapse" data-target="#Companie">Companie</a> <li><a href="#" data-toggle="collapse" data-target="#Cariere"> Cariere</a> <li id="menu-item-457" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-457"><a href="contact/index.html">Contact</a></li> </ul> <div id="Companie" class="collapse"> <ul class="sub-menu"> <li id="menu-item-450" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-450"><a href="companie/echipa-copy/index.html">Echipa</a></li> <li id="menu-item-451" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-451"><a href="companie/echipa/index.html">Echipa</a></li> <li id="menu-item-452" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-452"><a href="companie/implicare-sociala/index.html">Implicare socială</a></li> <li id="menu-item-453" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-453"><a href="companie/misiune-valori/index.html">Misiune și Valori</a></li> <li id="menu-item-454" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-454"><a href="companie/calitate-si-certificari/index.html">Calitate și certificări</a></li> <li id="menu-item-455" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-455"><a href="companie/despre-noi/index.html">Despre noi?</a></li> </ul> </div> <div id="Cariere" class="collapse"> <ul class="sub-menu"> <li id="menu-item-450" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-450"><a href="companie/echipa-copy/index.html">Echipa Copy</a></li> <li id="menu-item-451" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-451"><a href="companie/echipa/index.html">Echipa</a></li> <li id="menu-item-452" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-452"><a href="companie/implicare-sociala/index.html">Implicare socială</a></li> <li id="menu-item-453" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-453"><a href="companie/misiune-valori/index.html">Misiune și Valori</a></li> <li id="menu-item-454" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-454"><a href="companie/calitate-si-certificari/index.html">Calitate și certificări</a></li> <li id="menu-item-455" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-455"><a href="companie/despre-noi/index.html">Despre noi?</a></li> </ul> </div> </div> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.