个人中心
gpt4 book ai didi

css - 完整的 Canvas 外菜单

转载 作者：行者123 更新时间：2023-11-28 16:18:51 24 4
gpt4 key购买 nike

我正在尝试制作 Canvas 外菜单，但遇到了问题。只有前两个菜单链接以灰黑色背景显示，但我希望所有菜单链接都具有它。其余 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>

最佳答案

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

问题 1:您的菜单不会增加灰色背景的高度，因为菜单是绝对定位的元素，因此在 document flow 之外。 .

确保灰色背景填充整个视口(viewport)的最简单方法是:

.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

没问题。让我们删除高度属性。

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

现在，.menu-container 是它需要的高度，而不是父级高度的 100%。

enter image description here

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

关于css - 完整的 Canvas 外菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37230238/

24 4 0
文章推荐： javascript - 密码的正则表达式(Javascript)
文章推荐： javascript - 使用jquery :selected selector with next/previous arrows
文章推荐： javascript - 如何优化数字开关创建的集合？
文章推荐： javascript - 如何使用第三个子类获取父级 div 值？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com