如何使我的导航栏移动响应下拉

时间：2016-03-30 20:32:17

标签： php html css twitter-bootstrap responsive-design

我有这个作为我的导航栏，我希望它能够在移动设备上响应，以便在小屏幕上它成为一个下拉菜单。这样的事情。

MENU
HOME
+ PORFOLIO
-婚礼 - 爱
关于
+ BLOG
-STORIES
-archive
联系

任何帮助都会很棒，因为我没有运气来解决这个问题...... 

img{
	display: block;
	margin-left: auto;
	margin-right: auto;
	
}

/*navbar*/

#wrap{
	text-align: center;
	font-family: "Lora" serif;
	font-size: 13px;
	font-weight: normal;
	padding-right: 48px;
	padding-bottom: 30px;
	padding-top: 50px;
	
}

.navbar li a{
	display: block;
}

.navbar li{
	display: inline-block;
	list-style: none;
	text-align: left;
	
}

.navbar a{
	text-decoration: none;
	color: #9c9c9c;
	display: block;
	padding: 8px;
	background-color: white;
}

.navbar li ul{
	position: absolute;
	display: none;
	margin: 0;
	padding: 0;
	height: auto;
	
}

.navbar li:hover, a:hover{
	color: black;
}

.navbar li:hover ul{
	display: block;
}	

.navbar li ul li{
	display: block;
}

p{
	font-size: 13px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 30px;
	padding-top: 30px;
	font-family: "Lora" serif;
	color: black;
	font-weight: 200;
	text-decoration: none;

}


footer{
	text-align: center;
	font-family: "Lora" serif;
	font-size: 10px;
	font-weight: normal;
	padding-bottom: 30px;
	padding-top: 30px;

}
<!DOCTYPE html>
<html>
<head>
<title>Instagram</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="Instagram.css">
<link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
<style type="text/css">
	
a p:hover{
	text-decoration: none;
}
		
    
    </style>
</head>
<body>
	    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
	            
	            <img src="Images/NewLogoBlack.png" class="img-responsive" width="250px" height="250px">
	        
	        </div>
	        <div class="clearfix visible-xs-block"></div>
	        <div class="clearfix visible-sm-block"></div>
            <div class="clearfix visible-md-block"></div>
	        
	       	        
            <div class="col-xs-12 col-sm-12 col-md-12">
	            
	            

			<div id="wrap">
			<ul class="navbar">
	
		  <li><a href="index.html">HOME</a></li> 
		 <li><a href="">PORTFOLIO</a>
			<ul>
			   <li><a href="wedding.html">WEDDING</a></li>
			   <li><a href="Love.html">LOVE</a></li>
			   
			</ul>         
		 </li>
		 <li><a href="#">ABOUT</a>
			<ul>
			   <li><a href="AboutUs.html">US</a></li>
			</ul>         
		 </li>
		 <li><a href="#">BLOG</a>
		 	<ul>
			 	<li><a href="NewBlogPage3.html">STORIES</a></li>
			 	<li><a href="Archive.html">ARCHIVE</a></li>
		 	</ul>
		 </li>		  		
		 <li><a href="Contact.html">CONTACT</a></li>
	  </ul>			
  	</div>			

	      
            </div>
            <div class="clearfix visible-xs-block"></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="clearfix visible-md-block"></div>

 <div class="col-xs-12 col-sm-12 col-md-12"><footer>All images Copyright © Seaward Photography 2016. Based in San Diego, California. Available for destinations worldwide.</footer></div>
            <div class="clearfix visible-xs-block"></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="clearfix visible-md-block"></div>
            
           
        </div>
    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"</script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
</body>
</html>

1 个答案:

答案 0 :(得分：0)

我试图让它适合你。我删除了你自己的导航栏和CSS，并添加了一个bootstrap 3响应导航栏。在自定义CSS中，我将自己的样式+一些调整包含在bootstrap的导航栏中。在html文件中我还添加了bootstrap css＆amp;带有CDN的js和Jquery。

HTML 

 <html>
 <head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Bootstrap 3 - Hamburger menu</title>

    <!-- Bootstrap Core CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/custom.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="Instagram.css">
    <link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>

    <style type="text/css">

    a p:hover{
        text-decoration: none;
    }

    </style>


</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">

                <img src="Images/NewLogoBlack.png" class="img-responsive" width="250px" height="250px">

            </div>
            <div class="clearfix visible-xs-block"></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="clearfix visible-md-block"></div>


<div class="col-xs-12 col-sm-12 col-md-12">



<div id="wrap">

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">

        <li><a href="index.html">HOME</a></li>

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PORTFOLIO<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="Wedding.html">WEDDING</a></li>
            <li><a href="Love.html">LOVE</a></li>
          </ul>
        </li>

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">ABOUT<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="AboutUs.html">US</a></li>
          </ul>
        </li>

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">BLOG<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="NewBlogPage3.html">STORIES</a></li>
             <li><a href="Archive.html">ARCHIVE</a></li>
          </ul>
        </li>

        <li><a href="Contact.html">CONTACT</a></li>

      </ul>

    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

</div>          

</div>
            <div class="clearfix visible-xs-block"></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="clearfix visible-md-block"></div>

 <div class="col-xs-12 col-sm-12 col-md-12"><footer>All images Copyright © Seaward Photography 2016. Based in San Diego, California. Available for destinations worldwide.</footer></div>
            <div class="clearfix visible-xs-block"></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="clearfix visible-md-block"></div>


        </div>
    </div>




<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.js"></script>

<script>


</script>

</body>

</html>

CSS 

img{
    display: block;
    margin-left: auto;
    margin-right: auto;

}

#wrap{
    font-family: "Lora" serif;
    font-size: 13px;
    font-weight: normal;
    padding-right: 48px;
    padding-bottom: 30px;
    padding-top: 50px;

}

p{
    font-size: 13px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 30px;
    padding-top: 30px;
    font-family: "Lora" serif;
    color: black;
    font-weight: 200;
    text-decoration: none;

}


footer{
    text-align: center;
    font-family: "Lora" serif;
    font-size: 10px;
    font-weight: normal;
    padding-bottom: 30px;
    padding-top: 30px;

}

/* BOOTSTRAP TWEAKS */

.navbar-default {
background: none;
border: none;
}


.navbar-default .navbar-nav li a {
    color: #9c9c9c;
}

.caret {
    border-top-color: #9c9c9c;
border-bottom-color: #9c9c9c;
}

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.navbar .navbar-collapse {
  text-align: center;
  }

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    color: black;
    text-decoration: underline #9c9c9c;
    background: none; 
    }

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    color: #555555;
    background: none;
    }

.dropdown-menu {
    list-style: none;
    background: none;
    border: none;
    -webkit-box-shadow:none;
    box-shadow: none;
}
相关问题
最新问题