Twitter Bootstrap Question posted in

Twitter bootstrap – Dropdown Menu Works HTML Issue when PHP includes

The issue is that when the dropdown menu is clicked, no menu comes down. Before using PHP’s include, the menu worked as it should.

At first, each .html page contained its own navigation bar code. However, I recently discovered PHP’s “include” function. I copied the portion of code for the nav bar to navigation.php and used the PHP include statement in index.php (the original .html page). I have removed much of the unnecessary code:

<?php include("includes/navigation.php"); ?>

This is the only line of code within my index.php file.

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Invest for Hope - Donations</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="icon" href="/assets/favicon.ico">
<link rel="apple-touch-icon" href="/assets/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="/assets/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="/assets/apple-touch-icon-114x114.png">
<link rel="shortcut icon" href="favicon.ico"> 
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<style type="text/css">html,body{height:100%;}.container-full{margin:0 auto;width:100%;min-height:100%;background-color:#110022;color:#eee;overflow:hidden;}.container-full a{color:#efefef;text-decoration:none;}.v-center{margin-top:7%;}[class^="cus-"],[class*=" cus-"]{display:inline-block;width:17px;height:16px;*margin-right:.3em;line-height:14px;vertical-align:text-top;background-image:url("/assets/social-icons-nav.png");background-position:14px 14px;background-repeat:no-repeat;opacity:0.5;}[class^="cus-"]:last-child,[class*=" cus-"]:last-child{*margin-left:0;}[class^="cus-"]:hover,[class*=" cus-"]:hover{opacity:1;}.cus-social-email{background-position:0 0;width:24px;height:24px;}.cus-social-facebook{background-position:-29px 0;width:24px;height:24px;}.cus-social-twitter{background-position:-58px 0;width:24px;height:24px;}.cus-social-youtube{background-position:-87px 0;width:24px;height:24px;}.btn-xlmain{width:310px;height:18px%;position:absolute;text-align:center;left:0;right:0;margin-left:auto;margin-right:auto;z-index:51;margin-top:-50px;}</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i> About<b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li>
                    <a href="mission.html"> About</a>
                </li>
                <li>
                    <a href="team.html"> Team</a>
                </li>
            </ul>
        </li>
        <li>
        </ul>
    </div>
</nav>

This is all the code after removing most of it from the navigation.php file. Now, it only includes the dropdown menu and CSS to format the page.

If you want to view the actual issue with the dropdown menu, go to www.investforhope.org. The homepage is the display of the exact code I have shown.

Tags:

2

Answers


  1. 0

    You need to add JQuery and Bootstrap javascript in your page.

    download them or using a CDN to do a quick test, add following line in your HTML, inner <header> :

    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
    Login or Signup to reply.
  2. 0

    Look at the source of the link you gave. You’ve commented out all your JS includes by omitting the closing comment tag used to remove .modal-dialog.
    Undo that error by adding the close comment marker --> after .modal-dialog‘s closing tag and it will work.

    This is what you have

    <!--
    <div class="modal-dialog">
    ...
    <script ... >
    ...
    </body>
</html>

    no close-comment tag (though the browser may render one).

    This is what you should have, where </div> is the matching closing tag.

    <!--
    <div class="modal-dialog">
    ...
    </div> 
-->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
etc etc

    ALSO this line that isn’t helping at all.

    <script>"js/bootstrap.js"</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search