CODEWITHSUNDEEP
twitter-bootstrap
user5015293
user5015293

Reputation:

Bootstrap dropdown menu does not work

Edit: I have included bootstrap.js and bootstrap.min.js and still not working

Hello my bootstrap dropdown menu does not work i have copied the same code as it is in w3schools.com but when i click it, it does not show the menu bar options.

Here is my code

<html>
<header lang="en">
    <title>E-Sports News</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="bootstrap.css">
    <link rel="stylesheet" href="style.css">

</header>
<body>
    <div class="container">
        <header class="jumbotron">
            <h1>E-SportsNews.bg</h1>
            <p>Your gaming new in one place</p>
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <div>
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">Home</a></li>
                            <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">News
                                <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Dota 2</a></li>
                                    <li><a href="#">League of legends</a></li>
                                    <li>><a href="#">Hearthstone</a></li>
                                    <li><a href="#">Heroes of the storm</a></li>
                                    </ul>
                            </li>
                            <li><a href="#">Galery</a></li> 
                            <li><a href="#">Learn to play</a></li> 
                        </ul>
                     </div>
                </div>
            </nav>
        </header>
        <main class="jumbotron">
            <h2>Най-известна новина тази седмица.</h2>
            <article>
                <h2>

                </h2>
            </article>
        </main>
            <section class="col-lg-3">
                <a href="#">Dota 2</a>
                <img src="" alt="">
            </section>
            <section class="col-lg-3">
                <h3>League of Legends</h3>
            </section>
            <section class="col-lg-3">
                <h3>Hearthstone</h3>
            </section>
            <section class="col-lg-3">
                <h3>Heroes of the Storm</h3>
            </section>
    </div>      
</body>

When you click the News dropdown button it should give you menu with option to choose specific game news but when you click it's doing nothing.

Upvotes: 2

Views: 481

Answers (1)

Yandy_Viera
Yandy_Viera

Reputation: 4380

In Bootstrap plugins can be included individually (using Bootstrap's individual *.js files), or all at once (using bootstrap.js or the minified bootstrap.min.js).

Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files).

Try this 

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

Here a working jsfiddle with the code that you post.

Also check out http://www.w3schools.com/bootstrap/bootstrap_get_started.asp and http://getbootstrap.com/javascript/

Upvotes: 1

Related Questions