页面调整大小时引导导航栏问题

时间：2015-12-07 04:56:45

标签： jquery css twitter-bootstrap window-resize megamenu

我用jquery-bootstrap创建了一个超级菜单。以下代码演示了我的菜单。菜单呈现正常的页面宽度（在桌面浏览器中）。但是，当我调整浏览器大小时，菜单项和/或品牌标识和品牌名称开始上下浮动。我甚至在调整大小浏览器（缩小宽度）上尝试了按钮菜单，但它没有按预期运行。欢迎任何建议/帮助。

@import url(http://fonts.googleapis.com/css?family=Roboto:400,700);

body {
  font-family: 'roboto', sans-serif;
  background: #f0f0f0;
}

.container {
  width: 100%;
  padding: 0;
  margin: 0;
  background-repeat: repeat-x;
  border-radius: 0px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
  background: #000;
}

.navbar.navbar-default {
  width: 90%;
  margin: 0 auto;
  background: #000;
  border: 0;
  border-radius: 0;
}

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

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

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

.mega-dropdown-menu {
  padding: 20px 0px 0px 20px;
  width: 105%;
  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; 
 /* color: #b20d0d; */
  font-size: 18px;
  font-weight: bold;
}

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

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

.dropdown.mega-dropdown:hover > .dropdown-menu.mega-dropdown-menu.row { display: block; }

.navbar-default .navbar-nav>li>a { color: #fff; }

.navbar-default .navbar-nav>li>a:hover {
  color: #000;
  background: #fff;
}

.dropdown-menu.mega-dropdown-menu.row li:hover {
  list-style-type: disc;
  /* padding: 10px; */
  list-style-position: inside;
  background: #fff;
}

.megamenu-headline { padding: 0 32px; }


.container { 
	border: 2px solid;
    width: 100%;
    height: 100%;
    position: relative;
    top:50px; 
    bottom: 0px;	
    padding: 10px;
	background: #8FBC8F;
	display:inline-block;
}



main {
    position: absolute;
    width: 100%;
    top: 50px;
    bottom: 0;
    background: #fff;
}
.half {
    height: 50%;
}

.A {
    border: 2px solid;
    width:100%;
    height: 50%;    
    background: purple;
  }
  
.B {
    border: 2px solid;
    width:100%;
    height: 50%;
   
    background: yellow;
  }

 .B1 {
    border: 2px solid;
    width: 50%;
    height: 50%;
    float: left;   
  }
  
 .B2 {
    border: 2px solid;
    width: 50%;
    height: 50%;
    float: right;
  }
  
 .foo{
	width:100%;
	height:15%;
 }
 
<!DOCTYPE html>
<html lang="en">

<head>

<!-- title and meta -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='REFRESH' content='43200'/>
<meta name="Pragma" content="no-cache;">
<title>Page</title>
    

<!-- css -->
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,700,400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
 <link type="text/css" href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="menustyle.css">
<link rel="stylesheet" href="dashboard.css" />
    
<!-- js -->
<script src="js/jquery-1.9.1.min.js"></script> 
</head>

<body>


		
		<header>
    <div class="content clearfix ">
      <nav class="navbar navbar-inverse navbar-fixed-top">
          <div class="collapse navbar-collapse js-navbar-collapse">
		     <img src="img/logo1.png" height="50px" style="float:left;"/>
      <ul class="nav navbar-nav">
        <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="">Circle<span class="glyphicon glyphicon-chevron-down pull-right"></span></a>
          <ul class="dropdown-menu mega-dropdown-menu row">
            <div class="megamenu-headline">
              <h2>Some text about ABC</h2>
            </div>
            <li class="divider"></li>
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header"> Classification1</li>
                <li><a href="#">Classification2</a></li>
                <li><a href="#">Classification3</a></li>              
                <li class="divider"></li>
                <li class="dropdown-header">Classification4</li>
                <li><a href="#">Classification15</a></li>
              </ul>
            </li>
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">Sub-Classification</li>
                <li><a href="#">Report1</a></li>
                <li><a href="#">Report2</a></li>                
                <li class="divider"></li>
                <li class="dropdown-header">Report3</li>
                <li><a href="#">Report4</a></li>
              </ul>
            </li>      
          </ul>
        </li>
        <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="">Square<span class="glyphicon glyphicon-chevron-down pull-right"></span></a>
          <ul class="dropdown-menu mega-dropdown-menu row">
            <div class="megamenu-headline">
              <h2>Some text about DEF</h2>
            </div>
            <li class="divider"></li>
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">Data1</li>
                <li><a href="#">Data1.1</a></li>
                <li><a href="#">v</a></li>   
				<li><a href="#">Data1.3</a></li> 
				<li><a href="#">Data1.4</a></li>   
                <li class="divider"></li>
                <li class="dropdown-header">Data2</li>
                <li><a href="#">Data2.1</a></li>
              </ul>
            </li>
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">GHI</li>
                <li><a href="#">Att1.1</a></li>
                <li><a href="#">Att1.2</a></li>
                <li><a href="#">Att1.3</a></li>              
                <li class="divider"></li>
                <li class="dropdown-header">Loc</li>
                <li><a href="#">Att12</a></li>
				 <li><a href="#">Att14</a></li>
              </ul>
            </li>
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">Sample</li>
                <li><a href="#">Vehicle</a></li>
                <li><a href="#">Home</a></li>
                
                <li class="divider"></li>
                <li class="dropdown-header">Sample2</li>
                <li><a href="#">sample2.1</a></li>              
              </ul>
            </li>
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">Round</li>
                <li><a href="#">rou1</a></li>
                <li><a href="#">rnd2></li>
			  </ul>
            </li>
          </ul>
        </li>
        <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="">Rectangle<span class="glyphicon glyphicon-chevron-down pull-right"></span></a>
          <ul class="dropdown-menu mega-dropdown-menu row">
            <div class="megamenu-headline">
              <h2>Some text about rec</h2>
            </div>
            <li class="divider"></li>
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">Rec1</li>
                <li><a href="#">rec1.1</a></li>
                <li><a href="#">rec1.2</a></li>               
              </ul>
            </li>    
          </ul>
        </li> 
		  <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="">Triangle<span class="glyphicon glyphicon-chevron-down pull-right"></span></a>
          <ul class="dropdown-menu mega-dropdown-menu row">
            <div class="megamenu-headline">
              <h2>Some text about triangle</h2>
            </div>
            <li class="divider"></li>
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">trg</li>
                <li><a href="#">tr1.1</a></li>
              
                <li class="divider"></li>
                <li class="dropdown-header">trg2</li>
                <li><a href="#">trg2.1</a></li>
              </ul>
            </li>  
          </ul>
        </li>
		 <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="">No Shape<span class="glyphicon glyphicon-chevron-down pull-right"></span></a>
          <ul class="dropdown-menu mega-dropdown-menu row">
            <div class="megamenu-headline">
              <h2>Some text about shape</h2>
            </div>
            <li class="divider"></li>
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">Primary</li>
                <li><a href="#">Primary1.1</a></li>
              
                <li class="divider"></li>
                <li class="dropdown-header">Technical</li>
                <li><a href="#">Technical1.1</a></li>
              </ul>
            </li>  
          </ul>
        </li>
      </ul>
		 <img src="img\companyLogo1.gif" alt="" style="float:right;top:0;height:50px;padding-right:10px;"/>
	   <a class="navbar-brand pull-right" style="font-size:15px;font-style:italic;font-weight:500; right:100px;" href="#/">brand name text</a>
    </div>		
    </nav>       
    </div>
	</header>	

</body>
</html>

0 个答案:

没有答案
相关问题
最新问题