PHP Include not working with bootstrap dropdown's
Question
(Bootstrap 3) If I did
http://dev.artsicleprojects.com/navbar.php
the dropdowns function, however if I do
http://dev.artsicleprojects.com/index.php
The dropdowns do nothing. My index.php code is right here
<html>
<head>
<title>Artsicle Projects Dev</title>
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="script.js"></script>
<?php include 'navbar.php'?>
</body>
</html>
Edit
Code for navbar.php:
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="script.js"></script>
<div class="jumbotron text-center">
<h1>Artsicle Projects</h1>
</div>
<div class="dropdown" style="position: absolute; left: 30%">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Games
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="catclicker/index.php">Cat Clicker</a></li>
<li><a href="#">Exit The Room</a></li>
<li><a href="comingsoon/index.html">Coming Soon!</h5></a></li>
</ul>
</div>
<div class="dropdown" style="position: absolute; left: 60%">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Extra
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Nothing</a></li>
<li><a href="comingsoon/index.html">Coming Soon!</h5></a></li>
</ul>
</div>
Thanks in advance!
2 answers
solution1
3 ACCPTED 2017-01-09 22:42:40
You have invalid markup in your index.php by having multiple <head> , <body> , <script> etc. This is because navbar.php is a complete (standalone) HTML page and you're include that complete page into another page. View the source of each page and you'll see what's happening.
Remove everything from navbar.php that isn't inside <body> . That is, only include the markup for the navbar, not <head> , <body> , <script> etc. that's in navbar.php .
solution2
1 2017-01-09 22:53:08
This is the correct order. Move header section from navbar.php to header:
<html>
<head>
<title>Artsicle Projects Dev</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="http://dev.artsicleprojects.com/bootstrap/bootstrap.css"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="http://dev.artsicleprojects.com/bootstrap/bootstrap.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="http://dev.artsicleprojects.com/bootstrap/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>Artsicle Projects</h1>
</div>
<div class="dropdown" style="position: absolute; left: 30%">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Games
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="catclicker/index.php">Cat Clicker</a></li>
<li><a href="#">Exit The Room</a></li>
<li><a href="comingsoon/index.html">Coming Soon!</h5></a></li>
</ul>
</div>
<div class="dropdown" style="position: absolute; left: 60%">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Extra
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Nothing</a></li>
<li><a href="comingsoon/index.html">Coming Soon!</h5></a></li>
</ul>
</div></body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.