Bootstrap汉堡包菜单在iOS Safari上没有崩溃

时间:2017-03-30 07:51:08

标签: html css twitter-bootstrap hamburger-menu

我正在开展一个小型的个人网站项目,并慢慢提高我的可怕技能。虽然在移动设备上(iOS Safari),当我扩展汉堡包菜单时,触摸按钮或其他部分后,它仍然不会再次崩溃,我已经将我的网站推向了一个我感到满意的地步。屏幕。似乎无法绕过它。任何建议都会很棒。

HTML:

    <!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <!--fonts-->
        <link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
    <!--//fonts-->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <!-- for-mobile-apps -->
    <meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Personal Website" />
    <!-- //for-mobile-apps -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
    <header>
        <a class="navbar-brand" href="index.html" id="logo"></a>
        <nav>
            <a href="#" id="menu-icon" input type="checkbox"></a>
            <ul>
                <li><a href="#about">ABOUT</a></li>
                <li><a href="#">WORK</a></li>
                <li><a href="#">BLOG</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </nav>
    </header>

CSS:

/*RESET*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}

/*MAIN*/
body { 
    font-size: 1.05em;
    line-height: 1.25em;
    font-family: Helvetica Neue, Helvetica, Arial;
    background: #f9f9f9;
    color: #444;
}

h1,h2,h3 {
    font-family: 'Raleway', sans-serif;
}

a {

    color: #414141;
    text-decoration: none;
    font-weight: 300;

}

a:hover {

    color: #000;
    font-weight: 500;
    text-decoration: none;

}

img {

    width: 100%;

}

header {

    background-color: rgba(255,255,255,0.95);
    width: 100%;
    height: 79px;
    position: fixed;
    top: 0;
    left: 0;
    border-bottom: 4px solid #515151;
    z-index: 100;

}

#logo{

    margin: 5px 0 10px 25px;
    float: left;
    width: 65px;
    height: 65px;
    background: url(../images/db_logo_clean_60.png) no-repeat center;
    display: block;

}

nav {

    float: right;
    padding: 20px;  

}

#menu-icon {

    display: hidden;
    width: 40px;
    height: 40px;
    background: #515151 url(../images/menu-icon.png) center;


}

a:hover#menu-icon {

    background-color: #000;
    border-radius: 4px 4px 0 0;

}

ul {

    list-style: none;

}

li {

    display: inline-block;
    float: left;
    padding: 10px

}

.current {

    color: #515151;

}

section {

    margin: 80px auto 40px;
    max-width: 980px;
    position: relative;
    padding: 20px

}

/*--banner--*/
.banner{
    background: url(../images/1172.png) no-repeat 0px 0px;
    background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    text-align: center;
    min-height:800px;
}
.banner-info{
width:70%;
margin: 200px auto 0 auto;
}
.banner-right h1{
font-size:36px;
font-weight:800;
color:#414141;
margin:35px 0 15px 0;
letter-spacing: 15px;
}
.banner-right h2{
  font-size: 40px;
  font-weight: 300;
  color: #313131;
  margin: 15px 0 45px 0;
}
.banner-right p{
text-decoration:none;
color:#414141;
font-size:16px;
font-weight:500;
padding:16px 20px;
border:2px solid #414141;
}

.banner-left{
float:left;
}
.banner-right{
float:right;
}

h1 {

    font-size: 2em;
    color: #2262AD;
    line-height: 1.15em;
    margin: 20px 0 ;

}

p {

    line-height: 1.45em;
    margin-bottom: 20px;

}

.about {
    padding: 60px 0 25px 0;
}
.about h3 {
    margin:0;
    color:#414141;
    font-size:36px;
    font-weight:500;
    letter-spacing: 16px;
}

.about p {
    margin: 60px 100px 0 100px;
}

.contact {
    padding: 60px 0 25px 0;
}
.contact h3 {
    margin:0;
    color:#414141;
    font-size:36px;
    font-weight:500;
    letter-spacing: 16px;
}

.contact p {
    margin: 60px 100px 0 100px;
}

/*MEDIA QUERY*/
@media only screen and (max-width : 1200px) {
    .banner-info {
      width: 87%;
      margin: 180px auto 0 auto;
    }

}

@media only screen and (max-width : 1000px) {
    .banner-info{
        display: inline-block;
        vertical-align: middle;
    }

    .banner-left {
        margin: 0 20px 0 0;
        width: 25%;
    }

    .banner-right {
        width: 70%;
    }

    .banner-right h1 {
        font-size: 30px;
    }

    .banner-right h2 {
        font-size: 36px;
    }

    .banner-right p {
        font-size: 14px;
    }

}

@media only screen and (max-width : 1000px) {
    .banner {
        min-height: 700px;
    }
}

@media only screen and (max-width : 640px) {

    header {

        position: absolute;

    }

    #menu-icon {

        display:inline-block;

    }

    nav ul, nav:active ul { 

        display: none;
        position: absolute;
        padding: 20px;
        background: #fff;
        border: 5px solid #444;
        right: 20px;
        top: 60px;
        width: 50%;
        border-radius: 4px 0 4px 4px;

    }

    nav li {

        text-align: center;
        width: 100%;
        padding: 10px 0;
        margin: 0;

    }

    nav:hover ul {

        display: block;

    }

    .banner-info{
        margin-top: 140px;
        display: inline-block;
        vertical-align: middle;
    }
    .banner-left{
        float: none;
        margin: 0 auto;
        width: 35%;
        vertical-align: middle;
    }
        .banner-right{
        float: none;
        margin: 0 auto;
        vertical-align: middle;
    }

    .about p {
    margin: 50px 50px 0 50px;
    }
}
@media only screen and (max-width : 340px) {
    .about h3 {
        font-size: 28px;
    }
    .about p {
        margin: 25px 25px 0 25px;
    }
}

1 个答案:

答案 0 :(得分:0)

你可以尝试这个超级菜单.....

jQuery(document).on('click', '.mega-dropdown', function(e) {
  e.stopPropagation()
})
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
  font-family: 'Open Sans', 'sans-serif';
  background: #f0f0f0;
  background: url(https://pcbx.us/bfjb.jpg);
}

h1,
.h1 {
  font-size: 36px;
  text-align: center;
  font-size: 5em;
  color: #404041;
}

.navbar-nav>li>.dropdown-menu {
  margin-top: 20px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.navbar-default .navbar-nav>li>a {
  width: 200px;
  font-weight: bold;
}

.mega-dropdown {
  position: static !important;
  width: 100%;
}

.mega-dropdown-menu {
  padding: 20px 0px;
  width: 100%;
  box-shadow: none;
  -webkit-box-shadow: none;
}

.mega-dropdown-menu:before {
  content: "";
  border-bottom: 15px solid #fff;
  border-right: 17px solid transparent;
  border-left: 17px solid transparent;
  position: absolute;
  top: -15px;
  left: 285px;
  z-index: 10;
}

.mega-dropdown-menu:after {
  content: "";
  border-bottom: 17px solid #ccc;
  border-right: 19px solid transparent;
  border-left: 19px solid transparent;
  position: absolute;
  top: -17px;
  left: 283px;
  z-index: 8;
}

.mega-dropdown-menu>li>ul {
  padding: 0;
  margin: 0;
}

.mega-dropdown-menu>li>ul>li {
  list-style: none;
}

.mega-dropdown-menu>li>ul>li>a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.428571429;
  color: #999;
  white-space: normal;
}

.mega-dropdown-menu>li ul>li>a:hover,
.mega-dropdown-menu>li ul>li>a:focus {
  text-decoration: none;
  color: #444;
  background-color: #f5f5f5;
}

.mega-dropdown-menu .dropdown-header {
  color: #428bca;
  font-size: 18px;
  font-weight: bold;
}

.mega-dropdown-menu form {
  margin: 3px 20px;
}

.mega-dropdown-menu .form-group {
  margin-bottom: 3px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <nav class="navbar navbar-default">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">MegaMenu</a>
    </div>


    <div class="collapse navbar-collapse js-navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="dropdown mega-dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Collection <span class="glyphicon glyphicon-chevron-down pull-right"></span></a>

          <ul class="dropdown-menu mega-dropdown-menu row">
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">New in Stores</li>
                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                  <div class="carousel-inner">
                    <div class="item active">
                      <a href="#"><img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1"></a>
                      <h4><small>Summer dress floral prints</small></h4>
                      <button class="btn btn-primary" type="button">49,99 €</button>
                      <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
                    </div>
                    <!-- End Item -->
                    <div class="item">
                      <a href="#"><img src="http://placehold.it/254x150/ef5e55/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2"></a>
                      <h4><small>Gold sandals with shiny touch</small></h4>
                      <button class="btn btn-primary" type="button">9,99 €</button>
                      <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
                    </div>
                    <!-- End Item -->
                    <div class="item">
                      <a href="#"><img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3"></a>
                      <h4><small>Denin jacket stamped</small></h4>
                      <button class="btn btn-primary" type="button">49,99 €</button>
                      <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
                    </div>
                    <!-- End Item -->
                  </div>
                  <!-- End Carousel Inner -->
                </div>
                <!-- /.carousel -->
                <li class="divider"></li>
                <li><a href="#">View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></a></li>
              </ul>
            </li>
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">Dresses</li>
                <li><a href="#">Unique Features</a></li>
                <li><a href="#">Image Responsive</a></li>
                <li><a href="#">Auto Carousel</a></li>
                <li><a href="#">Newsletter Form</a></li>
                <li><a href="#">Four columns</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Tops</li>
                <li><a href="#">Good Typography</a></li>
              </ul>
            </li>
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">Jackets</li>
                <li><a href="#">Easy to customize</a></li>
                <li><a href="#">Glyphicons</a></li>
                <li><a href="#">Pull Right Elements</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Pants</li>
                <li><a href="#">Coloured Headers</a></li>
                <li><a href="#">Primary Buttons & Default</a></li>
                <li><a href="#">Calls to action</a></li>
              </ul>
            </li>
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">Accessories</li>
                <li><a href="#">Default Navbar</a></li>
                <li><a href="#">Lovely Fonts</a></li>
                <li><a href="#">Responsive Dropdown </a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Newsletter</li>
                <form class="form" role="form">
                  <div class="form-group">
                    <label class="sr-only" for="email">Email address</label>
                    <input type="email" class="form-control" id="email" placeholder="Enter email">
                  </div>
                  <button type="submit" class="btn btn-primary btn-block">Sign in</button>
                </form>
              </ul>
            </li>
          </ul>

        </li>
      </ul>

    </div>
    <!-- /.nav-collapse -->
  </nav>
</div>

<h1 class="c-text"> Bootstrap Mega Menu </h1>