0
Ich versuche, mithilfe dieser Quelle eine reine CSS off-Leinwand links und rechts Menü zu tun: http://acasaprogramming.ro/pure-css-off-canvas-menu/Reines CSS off-Leinwand links und rechts Menü (nicht Bootstrap) - nur einer von ihnen arbeitet
Ihre Beispiele enthalten linkes und rechtes Menü, aber nicht auf einer einzelnen Seite. Während ich versuche, sie in einzelne Seite zu implementieren, funktioniert nur einer (welches Kontrollkästchen ist das erste - bitte, siehe den Code).
HTML:
<body>
<input type="checkbox" id="menu-left" class="toggle-left">
<input type="checkbox" id="menu-right" class="toggle-right">
<div class="container">
<nav class="navbar navbar-right menu-container">
<label for="menu-right" class="close-btn">X</label>
<ul>
<li><a href="?date=2016-05-08" class="" data-date="2016-05-11"><i class="fa fa-chevron-right fa-fw"></i> Ням<br><span>V/08</span></a></li>
<li><a href="?date=2016-05-09" class="" data-date="2016-05-11"><i class="fa fa-chevron-right fa-fw"></i> Дав<br><span>V/09</span></a></li>
<li><a href="?date=2016-05-10" class="" data-date="2016-05-11"><i class="fa fa-chevron-right fa-fw"></i> Өчигдөр<br><span>V/10</span></a></li>
<li><a href="." class="active" data-date="2016-05-11"><i class="fa fa-chevron-right fa-fw"></i> ӨНӨӨДӨР<br><span>V/11</span></a></li>
<li><a href="?date=2016-05-12" class="" data-date="2016-05-11"><i class="fa fa-chevron-right fa-fw"></i> Маргааш<br><span>V/12</span></a></li>
<li><a href="?date=2016-05-13" class="" data-date="2016-05-11"><i class="fa fa-chevron-right fa-fw"></i> Баа<br><span>V/13</span></a></li>
<li><a href="?date=2016-05-14" class="" data-date="2016-05-11"><i class="fa fa-chevron-right fa-fw"></i> Бям<br><span>V/14</span></a></li>
<li><a href="?date=2016-05-15" class="" data-date="2016-05-11"><i class="fa fa-chevron-right fa-fw"></i> Ням<br><span>V/15</span></a></li>
</ul>
</nav>
<nav class="navbar navbar-left menu-container">
<label for="menu-left" class="close-btn">X</label>
<ul>
<li><a href="/" class="ui-btn-active"><i class="fa fa-chevron-right fa-fw pull-right"></i><i class="fa fa-home fa-fw pull-left"></i>Нүүр</a></li>
<li><a href="/my-bookmarks/" class=""><i class="fa fa-chevron-right fa-fw pull-right"></i><i class="fa fa-star fa-fw pull-left"></i>Миний Үзэх</a></li>
<li><a href="/movies/" class=""><i class="fa fa-chevron-right fa-fw pull-right"></i><i class="fa fa-film fa-fw pull-left"></i>Кино</a></li>
<li><a href="/sport/" class=""><i class="fa fa-chevron-right fa-fw pull-right"></i><i class="fa fa-life-ring fa-fw pull-left"></i>Спорт</a></li>
<li><a href="/todays-top/" class=""><i class="fa fa-chevron-right fa-fw pull-right"></i><i class="fa fa-sort-amount-asc fa-fw pull-left"></i>Өнөөдрийн Шилдэг</a></li>
<li><a href="/choose-channels/" class=""><i class="fa fa-chevron-right fa-fw pull-right"></i><i class="fa fa-check fa-fw pull-left"></i>Миний Суваг</a></li>
<li class="separator"></li>
<li><a href="/terms-of-use/" class=""><i class="fa fa-chevron-right fa-fw pull-right"></i><i class="fa fa-bars fa-fw pull-left"></i>Заавар</a></li>
<li><a href="http://www.localhost.local?no_redirect=1"><i class="fa fa-chevron-right fa-fw pull-right"></i><i class="fa fa-desktop fa-fw pull-left"></i>Dесктоп Хувилбар</a></li>
<li><a href="/contact-us/" class=""><i class="fa fa-chevron-right fa-fw pull-right"></i><i class="fa fa-envelope-o fa-fw pull-left"></i>Холбоо Барих</a></li>
</ul>
</nav>
<div class="content">
<header>
<label for="menu-left" class="full-screen-close-left"></label>
<label for="menu-right" class="full-screen-close-right"></label>
<div class="menu-btn pull-right">
<label for="menu-right" class="toggle-btn12">
right menu
</label>
</div>
<div class="menu-btn pull-left">
<label for="menu-left" class="toggle-btn">
left menu
</label>
</div>
</header>
</div>
</div>
</div>
</body>
CSS:
.pull-left{
float:left;
}
.pull-right{
float:right;
}
body{
background:#fff;
color:#333333;
position:relative;
}
html,
body,
.container,
.menu-container{
width:100%;
height:100%;
overflow-x:hidden;
}
.navbar{
background:#232428;
color:#ddd;
width:280px;
}
.navbar ul{
list-style:none;
display:block;
}
.navbar ul li,
.navbar ul li a,
.navbar ul li span,
.navbar ul li form{
display:block;
}
.navbar ul li form input{
height:35px;
padding:10px 20px;
}
.navbar ul li a,
.navbar ul li a:visited,
.navbar ul li span{
color:#ddd;
border-color:#3d3d3d;
display:block;
text-align:left;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
border-width:1px 0 0 0;
border-style:solid;
font-size:14px;
font-weight:bold;
padding:10px 15px;
}
.navbar ul li a.active,
.navbar ul li a:hover,
.navbar ul li a:focus,
.navbar ul li a:active{
background:#0055c5;
border-color:#0055c5;
color:#fff;
}
.navbar ul li a i{
margin-left:-5px;
margin-right:8px;
margin-top:-1px;
}
.navbar ul li.separator{
background:#232428;
border:0;
padding:10px;
}
.full-screen-close-left,
.full-screen-close-right{
display:none;
}
.full-screen-close-left,
.full-screen-close-right{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
.toggle-btn,
.close-btn{
cursor:pointer;
}
.close-btn{
position:absolute;
left:280px;
z-index:1000;
color:#fff;
padding:10px;
}
.navbar-right .close-btn{
left:auto;
right:280px;
}
.menu-container{
height:100%;
position:absolute;
z-index:99;
transition:all .25s ease;
left:-280px;
}
.menu-container.navbar-right{
left:auto;
right:-280px;;
}
.toggle-left:checked + .container > .menu-container.navbar-left{
overflow:visible;
left:0;
}
.toggle-right:checked + .container > .menu-container.navbar-right{
overflow:visible;
right:0;
}
.toggle-left:checked + .container > .content .full-screen-close-left,
.toggle-right:checked + .container > .content .full-screen-close-right{
display:block;
background:rgba(0,0,0,.5);
}
Link zu codepen: http://codepen.io/anon/pen/mPoqyN
Beachten Sie, dass, wenn Sie auf "Menü links" klicken, passiert nichts, während, wenn Sie klicken auf Das "rechte Menü", Menü zeigt.
Wie können beide Menüs mit diesem Code arbeiten?