代码之家  ›  专栏  ›  技术社区  ›  Bryan M

完全脱离画布菜单

  •  1
  • Bryan M  · 技术社区  · 9 年前

    我正在尝试制作画布外菜单,但遇到了一个问题。 只有前两个菜单链接显示为灰黑色背景,但我希望所有的菜单链接都有它。剩下的5个菜单链接确实位于菜单内(当您将鼠标悬停在链接上时可以看到),但它们的背景是透明的。

    我将html和css代码放入Jsfiddle: https://jsfiddle.net/ghbx6fmn

    注:代码似乎在Jsfiddle上运行良好,但在我的网站上它没有。。。

    /*=====  SLIDE MENU  ======*/
    
    /*----------  HIDE SELECT CHECKBOX  ----------*/
    
    .toggle, 
    .full-screen-close
    {
    	display: none;
    }
    
    .full-screen-close
    {
    	width: 100%;
    	height: 100%;
    	position: absolute;
    	cursor: pointer;
    	top:0;
    	left:0;
    }
    
    /*----------  TOGGLE OFF-CANVAS MENU  ----------*/
    
    .toggle:checked + .container > .menu-container 
    {
      	margin-left: 70%;
    }
    
    .toggle:checked + .container > .content .full-screen-close
    {
      	display: block;
      	background: rgba(0,0,0,.5);
    }
    
    .menu
    {
    	padding-top: 24px;
    }
    
    .toggle-btn,
    .close-btn
    {
    	cursor: pointer;
    }
    
    .toggle-btn
    {
    	font-size: 2.25rem;
    }
    
    
    .close-btn
    {
    	float: right;
    	font-size: 1.5rem;
    	padding: 1.5rem;
    	color: #ededed;
    }
    
    .menu-container, 
    .content
    {
    	transition: margin 0.5s ease-in-out;
    }
    
    .menu-container
    {
    	background: #2c3e50;
    	width: 40%;
    	margin-left: 100%;
    	
    	float: right;
    	height: 100%;
    	position: absolute;
    
    	z-index:99;
    }
    
    .slide-menu i
    {
    	margin-right: 1rem;
    	font-size: 1.5rem;
    
    	vertical-align: middle;
    }
    .slide-menu li a
    {
    	color: #fff;
    	padding: 1.5rem;
    
    	font-size: 1.125rem;
    
    	text-transform: uppercase;
    	font-weight: 600;
    
    	display: block;
    
    	transition: background-color .5s ease-in-out;
    }
    
    .slide-menu li a:hover
    {
    	background-color: #34495e;
    }
    
    /*=====  MEDIA QUERIES  ======*/
    @media (max-width: 460px) {
    	.slide-menu li a
    	{
    		font-size: 0.875rem;
    		padding-left: 12px;
    	}
    
    	.slide-menu li i
    	{
    		font-size: 16px;
    	}
    }
    
    @media (max-width: 320px){
    	.slide-menu li i
    	{
    		display: none;
    	}
    }
    <html lang="en">
    	
      <meta charset="utf-8" />
          <meta http-equiv="X-UA-Compatible" content="IE=edge" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <meta name="description" content="Off-canvas navigation menu Tutorial" />
    		<meta name="keywords" content="slide-menu, sidebar, off-canvas, menu, navigation" />
          <meta name="author" content="AcasA Programming" />
          <link rel="icon" href="../../favicon.ico" />
    
    
    		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
    		<link rel="stylesheet" type="text/css" href="css/style.css" />
    		<link rel="stylesheet" type="text/css" href="css/right-slide.css" />
    
    		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
    	
    
      <body>
    
      	<input type="checkbox" id="offcanvas-menu" class="toggle" />
    
      	<div class="container">
    
    	  	<aside class="menu-container">
    
    	  		<div class="menu-heading clearfix">
    	  			<label for="offcanvas-menu" class="close-btn">
    	  				<i class="fa fa-times"></i>
    	  			</label>
    	  		</div><!--end menu-heading-->
    
    			<nav class="slide-menu">
    				<ul>
    					<li><a href="#"><i class="fa fa-home"></i>Testing 1</a></li>
    					<li><a href="#"><i class="fa fa-star"></i>Testing 2</a></li>
    					<li><a href="#"><i class="fa fa-folder-open"></i>Testing 3</a></li>
    					<li><a href="#"><i class="fa fa-cogs"></i>Testing 4</a></li>
    <li><a href="#"><i class="fa fa-star"></i>Testing 5</a></li>
    					<li><a href="#"><i class="fa fa-folder-open"></i>Testing 6</a></li>
    					<li><a href="#"><i class="fa fa-cogs"></i>Testing 7</a></li>
    				</ul>
    			</nav><!--end slide-menu -->
    
    		</aside><!--end menu-container-->
    
    		<section class="content">
    
    			<label for="offcanvas-menu" class="full-screen-close"></label>
    
    			<div class="menu right">
    				<label for="offcanvas-menu" class="toggle-btn">
    		        	<i class="fa fa-bars"></i>
    		        </label>
    		    </div><!--end menu-->		  	
    
    		  	<div class="menu-options clearfix">	
    				
    				<div class="right">
    			  		
    			  	</div>
    		  	</div>
    
    		  	<div class="content-body">
    		  	</div><!--end content body-->
    
    	  	</section><!--end content-->
      		
      	</div> <!--end container -->
      </body>
    </html>
    1 回复  |  直到 9 年前
        1
  •  1
  •   Andy Hoffman    9 年前

    注意:我对HTML/CSS的结构并不满意,我认为它可以使用重构。我的答案将解决您遇到的问题,但您应该以进一步简化代码为目标。

    问题1 :您的菜单不会增加灰色背景的高度,因为菜单是一个绝对定位的元素,因此位于 document flow .

    确保灰色背景填满整个视口的最简单方法是:

    .full-screen-close {
      ...
      p̶o̶s̶i̶t̶i̶o̶n̶:̶ ̶a̶b̶s̶o̶l̶u̶t̶e̶;̶
      position: fixed;
    }
    

    问题2 :现在我们已经解决了第一个问题,我们看到菜单后面的蓝色背景并没有一直延伸。

    enter image description here

    没问题。让我们删除height属性。

    .menu-container {
      ...
      h̶e̶i̶g̶h̶t̶:̶ ̶1̶0̶0̶%̶;̶
    }
    

    现在 .menu-container 是它需要的高度,而不是父母身高的100%。

    enter image description here

    看看: https://jsfiddle.net/ghbx6fmn/2/