1
我试图制作一个非画布菜单,但遇到了问题。 只有两个第一个菜单链接显示灰黑色背景,但我希望所有菜单链接都有。剩余的5个菜单链接确实在菜单内(如您悬停在链接上时所看到的那样),但它们具有透明背景。完整的画布外菜单
我把HTML和CSS代码成的jsfiddle:
附:该代码似乎是对的jsfiddle做工精细,但在我的网站是不...
/*===== SLIDE MENU ======*/
/*---------- HIDE SELECT CHECKBOX ----------*/
.toggle,
.full-screen-close
{
\t display: none;
}
.full-screen-close
{
\t width: 100%;
\t height: 100%;
\t position: absolute;
\t cursor: pointer;
\t top:0;
\t left:0;
}
/*---------- TOGGLE OFF-CANVAS MENU ----------*/
.toggle:checked + .container > .menu-container
{
\t margin-left: 70%;
}
.toggle:checked + .container > .content .full-screen-close
{
\t display: block;
\t background: rgba(0,0,0,.5);
}
.menu
{
\t padding-top: 24px;
}
.toggle-btn,
.close-btn
{
\t cursor: pointer;
}
.toggle-btn
{
\t font-size: 2.25rem;
}
.close-btn
{
\t float: right;
\t font-size: 1.5rem;
\t padding: 1.5rem;
\t color: #ededed;
}
.menu-container,
.content
{
\t transition: margin 0.5s ease-in-out;
}
.menu-container
{
\t background: #2c3e50;
\t width: 40%;
\t margin-left: 100%;
\t
\t float: right;
\t height: 100%;
\t position: absolute;
\t z-index:99;
}
.slide-menu i
{
\t margin-right: 1rem;
\t font-size: 1.5rem;
\t vertical-align: middle;
}
.slide-menu li a
{
\t color: #fff;
\t padding: 1.5rem;
\t font-size: 1.125rem;
\t text-transform: uppercase;
\t font-weight: 600;
\t display: block;
\t transition: background-color .5s ease-in-out;
}
.slide-menu li a:hover
{
\t background-color: #34495e;
}
/*===== MEDIA QUERIES ======*/
@media (max-width: 460px) {
\t .slide-menu li a
\t {
\t \t font-size: 0.875rem;
\t \t padding-left: 12px;
\t }
\t .slide-menu li i
\t {
\t \t font-size: 16px;
\t }
}
@media (max-width: 320px){
\t .slide-menu li i
\t {
\t \t display: none;
\t }
}
<html lang="en">
\t
<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" />
\t \t <meta name="keywords" content="slide-menu, sidebar, off-canvas, menu, navigation" />
<meta name="author" content="AcasA Programming" />
<link rel="icon" href="../../favicon.ico" />
\t \t <link rel="stylesheet" type="text/css" href="css/normalize.css" />
\t \t <link rel="stylesheet" type="text/css" href="css/style.css" />
\t \t <link rel="stylesheet" type="text/css" href="css/right-slide.css" />
\t \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
\t
<body>
\t <input type="checkbox" id="offcanvas-menu" class="toggle" />
\t <div class="container">
\t \t <aside class="menu-container">
\t \t \t <div class="menu-heading clearfix">
\t \t \t \t <label for="offcanvas-menu" class="close-btn">
\t \t \t \t \t <i class="fa fa-times"></i>
\t \t \t \t </label>
\t \t \t </div><!--end menu-heading-->
\t \t \t <nav class="slide-menu">
\t \t \t \t <ul>
\t \t \t \t \t <li><a href="#"><i class="fa fa-home"></i>Testing 1</a></li>
\t \t \t \t \t <li><a href="#"><i class="fa fa-star"></i>Testing 2</a></li>
\t \t \t \t \t <li><a href="#"><i class="fa fa-folder-open"></i>Testing 3</a></li>
\t \t \t \t \t <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>
\t \t \t \t \t <li><a href="#"><i class="fa fa-folder-open"></i>Testing 6</a></li>
\t \t \t \t \t <li><a href="#"><i class="fa fa-cogs"></i>Testing 7</a></li>
\t \t \t \t </ul>
\t \t \t </nav><!--end slide-menu -->
\t \t </aside><!--end menu-container-->
\t \t <section class="content">
\t \t \t <label for="offcanvas-menu" class="full-screen-close"></label>
\t \t \t <div class="menu right">
\t \t \t \t <label for="offcanvas-menu" class="toggle-btn">
\t \t \t <i class="fa fa-bars"></i>
\t \t </label>
\t \t </div><!--end menu--> \t \t \t
\t \t \t <div class="menu-options clearfix"> \t
\t \t \t \t
\t \t \t \t <div class="right">
\t \t \t \t \t
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <div class="content-body">
\t \t \t </div><!--end content body-->
\t \t </section><!--end content-->
\t \t
\t </div> <!--end container -->
</body>
</html>
谢谢,它的工作!另一个问题。现在是打开左侧菜单的按钮。我怎样才能让三排按钮位于屏幕的右侧?我可以改变菜单的宽度吗?对不起,我对编码很陌生。 –
我认为你的后续问题属于新线程。如果我的答案适合您,请投票/接受它并开出一个新问题。 –