Question

您好，我需要一些帮助。

进入此网站（http://www.webeffectual.com/）您可以在网站的左上角看到三条白线。当您将这些线悬停时，有三个从左侧滑出的方框。当你将这些盒子悬停时，会出现一个文本。这就是我不知道该怎么做的。

到目前为止，这是我的代码。

无标题文档

<body>
<div id="Menu">
</div>
</body>
</html>

代码只是一个空的html。 :( 我的css是空的

如果您知道如何操作，请撰写评论或发送链接到网站，说明如何操作。它会非常受欢迎。

如果我解释得那么糟糕的话。我来自瑞典，我不太了解英语：3

Answer 1

试试这个：

   <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">

    // &lt;![CDATA[ 
    $(window).load(function() { $(".preloader").fadeOut("fast"); })
     // ]  ]&gt;

    </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>

Answer 2

你可以用很少的javascript实现这一点。菜单本身有一个fixed位置，不在画布上。当“汉堡包菜单”（三行）悬停在上面时，会在菜单中添加一个显示的类，使用transform: translateX将其向左滑动到画布上。

以下是CodePen示例：http://codepen.io/bwalker8038/pen/MYWXdx

菜单从左侧滑出

2 个答案: