使用HTML，CSS和jQuery創建響應式菜單
[英]Creating A Responsive Menu with HTML, CSS & jQuery
問題描述
我正在按照本指南制作響應式菜單http://demos.inspirationalpixels.com/responsive-menu/當寬度小於980px，菜單（三個破折號）顯示但未打開時，一切正常。
我究竟做錯了什么？ 有人能告訴我嗎？
它不能在我的網站上運行：
這是我的HTML代碼
jQuery(document).ready(function() { jQuery('.toggle-nav').click(function(e) { jQuery(this).toggleClass('active'); jQuery('.menu ul').toggleClass('active'); e.preventDefault(); }); });
body { margin: 0; padding: 0; background-image: url("img-bg-mobile.jpg"); background-repeat: no-repeat; font-family: open sans; } .toggle-nav { display: none; } @media screen and (min-width: 1000px) { nav { height: auto; width:auto; margin-left:17%; } nav ul{ list-style: none; margin:0px; padding:0px; } nav ul li { float: left; margin: 2%; } nav ul li a{ transition:all linear 0.15s; text-decoration: none; font-family: open sans; color: white; font-size: 1.5em; text-align: center; } nav ul li a:hover { color: black; } nav ul li ul { display: none; } nav ul li ul a { color: #ff3c1f; } nav ul li:hover ul { display:block; height:auto; width: 110px; position:absolute; margin:0; } } @media screen and (max-width: 980px) { .menu { position:relative; display:inline-block; } .menu ul { width:100%; position:absolute; top:120%; left:0px; padding:10px 18px; box-shadow:0px 1px 1px rgba(0,0,0,0.15); border-radius:3px; background:#303030; } .menu ul.active { display:none; } .menu ul:after { width:0px; height:0px; position:absolute; top:0%; left:22px; content:''; transform:translate(0%, -100%); border-left:7px solid transparent; border-right:7px solid transparent; border-bottom:7px solid #303030; } .menu li { margin:5px 0px 5px 0px; float:none; display:block; } .menu a { display:block; } .toggle-nav { padding:20px; float:left; display:inline-block; box-shadow:0px 1px 1px rgba(0,0,0,0.15); border-radius:3px; background:#303030; text-shadow:0px 1px 0px rgba(0,0,0,0.5); color:#777; font-size:20px; transition:color linear 0.15s; } .toggle-nav:hover, .toggle-nav.active { text-decoration:none; color:#66a992; } } article { clear: both; font-family: open sans; font-size: 1em; } article p { color: white; margin-left: 10%; margin-right: 10%; } footer { color: white; margin-left: 10%; margin-right: 10%; } .arrow { font-size: 11px; margin-left: 1px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="Yoo Free Recharge App That gives talktime for trying out cool appps"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1" maximum-scale=2.0"> <title>Yoo Get Free Recharge</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> <link href="styles.css" rel="stylesheet" type="text/css"> </head> <body> <!-- header start from here--> <header> <nav class="menu"> <ul class="active"> <li class=logo> <a href="http://freers250.com"><img class=yoologo src="yoosmall.png" title="Yoo Get Free Recharge"></a> </li> <li class="mainmenu"> <a href="http://getfr.free250rs.com" title="Home">HOME</a> </li> <li class="mainmenu"> <a href="http://yoo.com/advertise" title="Advertise">ADVERTISE</a> </li> <li id="mainmenu" class="sub-menu"> <a href="http://theyoo.com/whoweare" title="Who we are">WHO WE ARE<span class="arrow">▼</span></a> <ul> <li><a href="#">About Us</a></li> <li><a href="#">Vision</a></li> <li><a href="#">Team</a></li> </ul> </li> <li class="mainmenu"> <a href="http://theyoo.com/pricing" title="pricing">PRICING</a> </li> <li class="mainmenu"> <a href="http://theyoo.com/contact" title="Who we are">CONTACT</a> </li> </ul> <a class="toggle-nav" href="#">☰</a> </nav> </header> <article> <p>Yoo Free Recharge App - Yoo is an app that gives free recharge/talktime for trying out new and cool apps you can also refer your friends and get money for that too you can get upto 125Rs. Per Friend <a href="https://play.google.com/store/apps/details?id=com.freerechargeapp.free250rs.free_recharge_app" title="Yoo Free Recharge App" target="_blank"> Download Now</a></p> </article> <footer> <div style="font-family:'open sans';" > © Yoo Infotech. All right reserved. </div> </footer> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="script.js"></script> </body> </html>
3 個解決方案
解決方案1
0 2016-01-12 00:12:24
你把它從你的CSS中刪除了
@media screen and (max-width: 980px) {
....
.menu ul {
width: 100%;
position: absolute;
top: 120%;
left: 0px;
padding: 10px 18px;
box-shadow: 0px 1px 1px rgba(0,0,0,0.15);
border-radius: 3px;
background: #303030;
}
...
}
解決方案2
0 2016-01-12 10:37:52
您可以使用一些框架，如bootstrap或材料設計
解決方案3
0 已采納 2016-01-14 20:18:31
我按照本教程編寫了響應式標題菜單
這里是
我如何在html css和jquery上創建一個響應菜單，將li元素一一隱藏？
[英]How can i create a responsive menu on html css and jquery,that hide li element one by one?
響應式導航菜單：（使用 html 和 Css）切換菜單不起作用
[英]responsive navigation menu : ( using html and Css ) Toggle menu not working
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.