CODEWITHSUNDEEP
htmltwitter-bootstrap-3dropdown
Kevin Garnick
Kevin Garnick

Reputation: 94

HTML bootstrap dropdown menu won't open

I'm new to HTML and im trying to use bootstrap. I made a dropdown menu, but it works only on the index.html Page.

I also tried using following code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


<html>
    <head>
        <title>Tutorials</title>
        <meta charset="utf-8">
        <link rel="icon" type="image/png" href="img/coding.png"><!-- Favicon-->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link href="css/bootstrap.css" rel="stylesheet">
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/tutorials.css" rel="stylesheet">        
        <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    </head>

    <body>
<!-- Menu which is on every page -->
<nav class="navbar navbar-fixed-top" id = "s">
<div class="container">
<div class="row">
<div class="col-md-7"> <!-- Bootstrapov grid sistem-->
    <div class="navbar-header"> <a href="index.html"><img src="img/coding.png" width="50" height="50" /></a> </div> <!-- Web Application Vulnerabilities-->
<!-- Hyperlinks to the sites -->
<div id="navbar" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
        <li><a href="about.html"><span style="color:white">About Us</span></a></li>
        <li><a href="contact.html"><span style="color:white">Contact</span></a></li>
        <li><a href="register.html"><span style="color:white">Registration</span></a></li>
        <li class="dropdown">
            <a href="tutorials.html" class="dropdown-toggle" data-toggle="dropdown" style="color:white">Tutorials<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="xss.html"><span style="color:black">XSS</span></a></li>
                <li><a href="csrf.html"><span style="color:black">CSRF</span></a></li>
                <li><a href="sql.html"><span style="color:black">SQL Injection</span></a></li>
                <li><a href="rce.html"><span style="color:black">RCE</span></a></li>
                <li><a href="exploit.html"><span style="color:black">Exploit</span></a></li>
            </ul>
        </li>
    </ul>
</div>
</div>
</div>
</div>

So i've tried to use it on other page too, e.g. about.html Following Code:

<!DOCTYPE html>
<html>
    <head>
        <title>About Us</title>
        <meta charset="utf-8">
        <link rel="icon" type="image/png" href="img/coding.png"><!-- Favicon-->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link href="css/bootstrap.css" rel="stylesheet">
        <link href="css/about.css" rel="stylesheet">        
        <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    </head>
<body>
<!-- Menu which is on every page -->
<nav class="navbar navbar-fixed-top" id = "s">
<div class="container">
<div class="row">
<div class="col-md-7"> <!-- Bootstrap grid system-->
    <div class="navbar-header"> <a href="index.html"><img src="img/coding.png" width="50" height="50" /></a> </div> <!-- Web Application Vulnerabilities-->
<!-- Hyperlinks to the sites -->
<div id="navbar" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
        <li><a href="about.html"><span style="color:white">About Us</span></a></li>
        <li><a href="contact.html"><span style="color:white">Contact</span></a></li>
        <li><a href="register.html"><span style="color:white">Registration</span></a></li>
        <li class="dropdown">
            <a href="tutorials.html" class="dropdown-toggle" data-toggle="dropdown" style="color:white">Tutorials<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="xss.html"><span style="color:black">XSS</span></a></li>
                <li><a href="csrf.html"><span style="color:black">CSRF</span></a></li>
                <li><a href="sql.html"><span style="color:black">SQL Injection</span></a></li>
                <li><a href="rce.html"><span style="color:black">RCE</span></a></li>
                <li><a href="exploit.html"><span style="color:black">Exploit</span></a></li>
            </ul>
        </li>
    </ul>
</div>
</div>
</div>
</div>

It doesn't work it redirects me to the Tutorial Page, and dropdown menu won't open. I don't know how to fix it .

Upvotes: 1

Views: 2700

Answers (1)

Vishal Taj PM
Vishal Taj PM

Reputation: 1359

It seems you are having problem with the anchor used for dropdown:

<a href="tutorials.html" class="dropdown-toggle" data-toggle="dropdown" style="color:white">Tutorials<span class="caret"></span></a>

in this as href you have added tutorials.html thats why whenever clicking on it redirecting to tutorial.html change it to :

<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:white">Tutorials<span class="caret"></span></a>

just change href=# instead of href=tutorial.html in that anchor tag

also add: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

to load jquery.

Upvotes: 3

Related Questions