After skimming through various threads on stackoverflow regarding the dropdown box in the navigation bar, none of the solutions seem to address my issue.
Utilizing bootstrap version 3, I've implemented the provided navbar example from the official site:
http://getbootstrap.com/components/#navbar
My code mirrors the example on the site, and I've imported the necessary javascript and css files:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="static/js/transition.js"></script>
<script type="text/javascript" src="static/js/collapse.js"></script>
<script type="text/javascript" src="static/js/dropdown.js"></script>
<script type="text/javascript" src="static/js/bootstrap.js"></script>
<link rel="stylesheet" href="static/css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="static/css/footer.css" type="text/css">
While I managed to get this working before, I'm facing issues now despite multiple troubleshooting attempts. The sequence of the script tags was incorrect previously.
As per the bootstrap website, the jquery plugin is essential, with the collapse plugin relying on the transition plugin (hence the ordering). Next come the dropdown js and bootstrap files, followed by the respective css files.
My dilemma lies in the fact that clicking the dropdown box does not trigger a menu to display; nothing happens. I've experimented with various configurations, to no avail.
Here's a snippet of the code I'm using:
<html
<head>
<title>testing</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="static/js/transition.js"></script>
<script type="text/javascript" src="static/js/collapse.js"></script>
<script type="text/javascript" src="static/js/dropdown.js"></script>
<script type="text/javascript" src="static/js/bootstrap.js"></script>
<link rel="stylesheet" href="static/css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="static/css/footer.css" type="text/css">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</body>
</html>
Additionally, I've attempted replacing all imports with the code mentioned in a reply by erikrunia, mirroring the example site.
Here's a view of the page after rendering by the browser:
Upon running a debugger on the site, I encountered several warnings/errors. Nevertheless, similar warnings/errors also appear on the bootstrap site, posing uncertainty regarding their relation to the actual problem:
18:23:45.672 file:///Users/exceed/index.html
18:23:45.673 file:///Users/exceed/static/js/jquery.js
18:23:45.674 file:///Users/exceed/static/js/transition.js
18:23:45.674 file:///Users/exceed/static/js/collapse.js
18:23:45.675 file:///Users/exceed/static/js/dropdown.js
18:23:45.675 file:///Users/exceed/static/js/bootstrap.js
18:23:45.676 file:///Users/exceed/static/css/bootstrap.css
18:23:45.676 file:///Users/exceed/static/css/footer.css
18:23:45.643 Unknown property 'box-sizing'. Declaration dropped. bootstrap.css:93
... (additional warnings/errors)