您好，我需要一些幫助。從左側滑出的菜單
進入本網站（http://www.webeffectual.com/）您可以在網站左上角看到三條白線。當你盤旋這些線時，有三個框從左邊滑出。當你將這些框懸停時，會出現文字。這是我不知道如何去。
這是我的代碼到目前爲止。
無標題文檔
<body>
<div id="Menu">
</div>
</body>
</html>
的代碼只是一個空的HTML。 :( 而我的CSS是alose空
如果你知道如何做到這一點請寫一個評論，或發送一個鏈接到一個網站，介紹瞭如何以這一點。這將是非常appriciated。
Srry如果IM解釋的那樣糟糕，我來自瑞典，我不知道這麼多英文：3
實際上，你可以用很少的JavaScript實現這個菜單本身具有fixed位置。並且是f畫布。當「漢堡包菜單」（三行）懸停時，顯示的類將被添加到菜單中，使用transform: translateX將其滑動到左側的畫布上。
這裏有一個CodePen例如：http://codepen.io/bwalker8038/pen/MYWXdx
我試圖將代碼複製並粘貼到Dreamweaver中，但它不工作:(@brad – pixelatedore
試試這個：
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/custom.css" >
<!-- Custom styles -->
<link rel="stylesheet" href="css/fonts.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/animations.css">
<link rel="stylesheet" href="css/jquery.bxslider.css">
<!--[if lt IE 10]>
<link rel="stylesheet" type="text/css" href="css/ie9-and-down.css" />
<![endif]-->
<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="css/ie9-and-down.css" />
<![endif]-->
<!-- Web fonts -->
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700'
rel='stylesheet' type='text/css'>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-
awesome.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com
/css?family=Roboto:400,100,300,500|Montserrat:400,700">
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-
icon-144-precomposed.jpg">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-
icon-114-precomposed.jpg">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-
icon-72-precomposed.jpg">
<link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-
precomposed.jpg">
<link rel="shortcut icon" href="ico/favicon.png">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/bootstrap/respond.min.js"></script>
<![endif]-->
</head>
<body class="home portfolio">
<div id="wrapper">
<header>
<div class="side-nav">
<ul class="gn-menu-main" id="gn-menu">
<li class="gn-trigger">
<a class="gn-icon gn-icon-menu"><span>Menu</span></a>
<nav class="gn-menu-wrapper">
<div class="gn-scroller">
<ul class="gn-menu" id="main-nav">
<li class="current"><a href="#intro"><span><img src="img/home-
icon.png"></span>Home</a></li>
<li class="about"><a href="#whatwedo"><span><img src="img/about-
icon.png"></span>About</a></li>
<li class="work"><a href="#features"><span><img src="img/work-
icon.png"></span>Projects</a></li>
<li class="contact"><a href="#contact"><span><img src="img/contact-
icon.png"></span>Contact</a></li>
</ul>
</div><!-- /gn-scroller -->
</nav>
</li>
<!-- logo -->
<li class="logo-wrapper"><a href="#" class="logo home"><img src="img/logo.png">
</a></li>
</ul>
</div>
</header>
<!-- Intro Section -->
<section class="section current" id="intro">
<div class="intro-wrapper">
<div class="right slideRight"><img src="img/flowers.png"><img class="fade-in one
b-flowers" src="img/brought-flowers.png"></div>
<div class="left">
<h1>Digital success isn't a one night stand.<span>Relationships matter.
</span></h1>
<div id="ticker"><h3>Soooo, how about a date?</h3></div>
<div class="fade-in two"><a href="#features" class="btn cta scrollAnchor">Our
Work<span aria-hidden="true" class="icon-angle-down"></span></a></div></div>
</div> <!-- end Wrapper -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/modernizr.custom.js"></script>
<!--[if lt IE 9]>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
< ![endif]-->
<!--[if (gte IE 9) | (!IE)]><!-->
<script src="js/jquery-1.10.1.min.js"></script>
<!--<![endif]-->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
</script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.scrollTo-min.js"></script>
<script src="js/jquery.nav.js"></script>
<script src="js/jquery.collagePlus.min.js"></script>
<script src="js/jquery.removeWhitespace.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.caroufredsel.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/classie.js"></script>
<script src="js/jquery.gnmenu.js"></script>
<script src="js/custom.js"></script>
<script src="js/counter.js"></script>
<script type="text/javascript" src="js/jquery.jticker.js"></script>
<script>
jQuery(document).delay(2000).queue(function(){
jQuery("#ticker").addClass("visible").ticker({
cursorList: "|",
rate: 130
}).trigger("play").trigger("stop");
});
</script>
<!-- LESS SCRIPT (RECOMMENDED IF YOU KNOW LESS CSS) -->
<script src="js/less-1.3.3.min.js"></script>
<!-- PRELOADER -->
<script type="text/javascript">
// <![CDATA[
$(window).load(function() { $(".preloader").fadeOut("fast"); })
// ] ]>
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-20100120-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async =
true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' :
'http://www')
+ '.google-analytics.com/ga.js';
,,,, var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</body></html>
這是一個答案？爲什麼有這麼多的代碼，它是做什麼的？嘗試將代碼最小化到解決問題的部分，然後添加關於您所做的一些解釋。 – Carpetsmoker
你可以通過查看CSS和jQuery的蘇斯出來的代碼在該網站上使用。漢堡包（三行）在.hover和.click上，並且（jQuery）用於切換類別。起初，它使用css定位關閉畫布，當點擊該類時，它會切換到使用CSS更改定位。你可以谷歌側推菜單，從左側菜單滑動，以及各種其他搜索字符串。 – Christina