0
我對這個網站很陌生，我對編碼很陌生。我試圖製作一個非帆布菜單，但遇到了三個小問題。首先，如何在擴展菜單時更改菜單的寬度？其次，我如何讓三個內襯菜單按鈕位於屏幕的右側而不是左側？第三，如何將子菜單添加到懸停在其上的可展開的畫布外菜單？更改菜單的寬度
我把HTML和CSS代碼成的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>
您使用的是什麼瀏覽器？ – NoImaginationGuy
我使用Google Chrome –
打開JavaScript控制檯並更新您的帖子，內容如下 – NoImaginationGuy