2016-05-16 7 views
-1

Ich habe ein Problem mit einem JavaScript-Code. Ich qyesto Code, der richtig funktioniert, außer wenn ich die mobile Version zu sehen, insbesondere öffnet es das Menü nicht. Wie repariere ich es? leider kann ich nicht verstehen, wie danken Ihnen so viel zu tunDropdown-Menü funktioniert nicht auf dem mobilen Bildschirm

https://jsfiddle.net/xsaaqj7z/

@media screen and (max-width:768px){ 
.logo{position:absolute;top:0;left: 0;width:100%;height:46px;text-align:center;padding:10px 0 0 0 ;float:none} 
.logo2{display:none} 
nav{width:100%;} 
#cssmenu{width:100%} 
#cssmenu ul{width:100%;display:none} 
#cssmenu ul li{width:100%;border-top:1px solid #444} 
#cssmenu ul li:hover{background:#363636;} 
#cssmenu ul ul li,#cssmenu li:hover > ul > li{height:auto} 
#cssmenu ul li a,#cssmenu ul ul li a{width:100%;border-bottom:0} 
#cssmenu > ul > li{float:none} 
#cssmenu ul ul li a{padding-left:25px} 
#cssmenu ul ul li{background:#333!important;} 
#cssmenu ul ul li:hover{background:#28b8d8!important} 
#cssmenu ul ul ul li a{padding-left:35px} 
#cssmenu ul ul li a{color:#ddd;background:none} 
#cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a{color:#fff} 
#cssmenu ul ul,#cssmenu ul ul ul{position:relative;left:0;width:100%;margin:0;text-align:left} 
#cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before{display:none} 
#cssmenu #head-mobile{display:block;padding:23px;color:#ddd;font-size:12px;font-weight:700} 
    .button{width:55px;height:46px;position:absolute;right:0;top:0;cursor:pointer;z-index: 12399994;} 
.button:after{position:absolute;top:22px;right:20px;display:block;height:4px;width:20px;border-top:2px solid #dddddd;border-bottom:2px solid #dddddd;content:''} 
.button:before{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;position:absolute;top:16px;right:20px;display:block;height:2px;width:20px;background:#ddd;content:''} 
.button.menu-opened:after{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;top:23px;border:0;height:2px;width:19px;background:#fff;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)} 
.button.menu-opened:before{top:23px;background:#fff;width:19px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)} 
#cssmenu .submenu-button{position:absolute;z-index:99;right:0;top:0;display:block;border-left:1px solid #444;height:46px;width:46px;cursor:pointer} 
#cssmenu .submenu-button.submenu-opened{background:#262626} 
#cssmenu ul ul .submenu-button{height:34px;width:34px} 
#cssmenu .submenu-button:after{position:absolute;top:22px;right:19px;width:8px;height:2px;display:block;background:#ddd;content:''} 
#cssmenu ul ul .submenu-button:after{top:15px;right:13px} 
#cssmenu .submenu-button.submenu-opened:after{background:#fff} 
#cssmenu .submenu-button:before{position:absolute;top:19px;right:22px;display:block;width:2px;height:8px;background:#ddd;content:''} 
#cssmenu ul ul .submenu-button:before{top:12px;right:16px} 
#cssmenu .submenu-button.submenu-opened:before{display:none} 
#cssmenu ul ul ul li.active a{border-left:none} 
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{border-top:none} 
} 
+0

Haben Sie 'jquery.js' enthalten? ** ['Schau dir diese Geige an!] (Https://jsfiddle.net/Guuprasad_Rao/xsaaqj7z/1/) ** .. überprüfe auf irgendwelche Konsolenfehler .. –

Antwort

2

Du Bootstrap js und Bootstrap css sowie Jquery zu fehlen.

Siehe here

In Geige, in der linken Seite sehen Sie 3 Link so fügen Sie sie auf Ihre Website sehen und Menü funktioniert.

können Sie erhalten Link von here (Bootstrap) und here (jquery)

Verwandte Themen