Clever Geek Handbook

Bootstrap dropdown menu not working

Edit: I have included bootstrap.js and bootstrap.min.js and it still doesn't work

Hi my bootstrap dropdown is not working. I copied the same code as at w3schools.com, but when I click on it, it doesn't 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 drop-down button, it should give you a menu with the option to select certain news about the game, but when you click on it, doing nothing.

0


source to share


1 answer


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

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

try it



<!-- 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's a working jsfiddle with the code you are posting .

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

0


source






More articles:


All Articles