我使用bootstrap,我认为我有一些兼容性问题。
我使用collapsable navbar
和hamburger menu
,但safari
和ios
浏览器似乎无效。看起来好像打开了两次。
这是我的代码:
<nav class="navbar navbar-inverse" style="padding-top:20px;">
<div class="container" style="width:90%;">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" onclick="hide_menu_button()">
<img src="img/menuicon.png" id="onClickButton">
</button>
<a class="navbar-brand" href="#" style="padding:0px;"><img id="brandimg" src="img/logo3.png"></a>
</div>
<div id="navbar" class="collapse width" style="text-align:left;font-size:25px;position:absolute; top:-10px; right:0;">
<ul class="nav navbar-nav" id="navbarul">
<li class="passivx" style="padding-top:50px; padding-bottom:13px; padding-right:50px; text-align:right;"><button data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" style="background-color:#2f2f2f; color:#fff; border:none;font-size:15px;" onclick="show_menu_button()">BEZÁRÁS <b style="font-size:20px;">X</b></button></li>
<li class="active" id="activelink"><a href="#" style="margin-top:10px">FŐOLDAL<br><img src="img/line.png" style="padding-top:20px;opacity:0.8;width:280px;"></a></li>
<li class="passiv"><a href="#ref">REFERENCIÁK
<li class="passiv"><a href="#about" style="padding-top:0px;height:45px;">RÓLUNK<br><img src="img/line.png" style="opacity:0.8; width:280px;padding-top:20px;"></a></li>
<li class="passiv"><a href="#infokt">INFORMATIKAI OKTATÁS</a></li>
<li class="passiv"><a href="#infokt2" style="padding-top:0px;height:50px;">SZAKMAI TRÉNINGEK</a></li>
<li class="passiv"><a href="#infokt3" style="padding-top:0px;">FELNŐTTKÉPZÉSI SZOLGÁLTATÁSOK<br><img src="img/line.png" style="padding-top:20px;opacity:0.8;width:280px; "></a></li>
<li class="passiv" ><a href="#kapcs" style="padding-top:0px;">KAPCSOLAT</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>