3
ich habe das Menü aus dieser VorlageSwipe Sidebar-Menü funktioniert nicht in Chrom
https://www.jqueryscript.net/menu/Touch-Swipeable-Sidebar-Menu-with-jQuery-CSS3.html
aber es funktioniert nur in Firefox/edge/Safari (ios). und funktioniert nicht in Chrom/Oper und anderen Browsern
, wie ich in debug (F12) Menü in Chrom sehen, nach Swipe js hinzufügen „open-Sidebar“ Klasse, aber Menü nicht auf dem Bildschirm angezeigt hat
was habe ich falsch gemacht?
$(window).ready(function(){
$(".swipe-area").swipe({
swipeStatus:function(event, phase, direction, distance, duration, fingers)
{
if (phase=="move" && direction =="right") {
$(".container").addClass("open-sidebar");
return false;
}
if (phase=="move" && direction =="left") {
$(".container").removeClass("open-sidebar");
return false;
}
}
});
});@media screen and (min-width: 320px) and (max-width: 700px)
{
body,
html {
height: 100%;
margin: 0;
overflow: auto;
font-family: helvetica;
font-weight: 100;
}
.container {
padding-left:0px;
position: fixed;
height: 100%;
width: 100%;
left: 0;
-webkit-transition: left 0.4s ease-in-out;
-moz-transition: left 0.4s ease-in-out;
-ms-transition: left 0.4s ease-in-out;
-o-transition: left 0.4s ease-in-out;
transition: left 0.4s ease-in-out;
}
.container{
position:sticky;
}
.container.open-sidebar { left: 240px; }
.swipe-area {
position: absolute;
width: 50px;
left: 0;
top: 0;
height: 100%;
background: #f3f3f3;
z-index: 0;
}
#sidebar::-webkit-scrollbar {
height: 0;
width: 0;
display: none;
}
#sidebar::-moz-scrollbar {
display: none;
}
#sidebar {
overflow-y: auto;
/*background: #e0e0e0;*/
position: absolute;
width: 240px;
height: 100%;
left: -240px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style-type: square;
}
#sidebar ul li { margin: 0; }
#sidebar ul li a {
padding: 15px 20px;
font-size: 16px;
font-weight: 100;
color: #333;
text-decoration: none;
display: block;
border-bottom: 1px solid #C922;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-ms-transition: background 0.3s ease-in-out;
-o-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
}
.main-content {
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
position: relative;
}
.main-content .content {
box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: auto;
padding-left: 60px;
width: 100%;
}
.main-content .content h1 { font-weight: 100; }
.main-content .content p {
width: 100%;
line-height: 160%;
}
.main-content #sidebar-toggle {
background: orange;
border-radius: 3px;
display: block;
position: relative;
padding: 10px 7px;
float: left;
}
.main-content #sidebar-toggle .bar {
display: block;
width: 18px;
margin-bottom: 3px;
height: 2px;
background-color: #fff;
border-radius: 1px;
}
.main-content #sidebar-toggle .bar:last-child { margin-bottom: 0; }
#sidebar-overlay {
display: none;
position: fixed;
//background: #fff;
opacity: 0.1;
width: 100%;
height: 100%;
z-index: 0;
top: 0;
left: 0;
}
.ul_menu, #sidebar {
margin: 0;
padding: 0;
}
.sub-nav{
display:none;
}
#sidebar .dropdown:hover { background: orange; }
#sidebar .dropdown .sub-nav {
list-style: none;
font-style: italic;
background: #fff;
margin: 0;
padding: 0 20px;
}
#sidebar .dropdown .sub-nav li:not(:last-child) {
border-bottom: 1px solid #efefef;
}
#sidebar .dropdown .sub-nav li a {
text-decoration: none;
color: black;
font-size: 14px;
display: block;
}
#sidebar .dropdown .sub-nav li a:hover { background: orange; }
#sidebar .dropdown .sub-nav li:first-child {
padding-top:1px;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>
<div class="container">
<div id="sidebar" class="topmenu" class="col-sm-12">
<ul id="menu-line" >
<li class="dropdown">
<a href="#">Об <span class="caret" ></span></a> \t
<ul class="sub-nav" class="col-sm-12">
<li><a href="#"></a></li>
</ul>
</li>
</ul>
</div>
<div class="main-content">
<div class="swipe-area"></div>
<div class="content">
<h1><===swipe here.</h1>
<h1>... Main Content ...</h1>
</div>
</div>By the way, wenn ich meine Schnipsel bildete für i mein Fehler gefunden habe.
.container{
position:sticky;
}
Ich weiß nicht, warum die in firefox/edge/Safari und vorinstallierte Browser auf meine wenigen Android-Handys funktioniert.