CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Aenaon
Aenaon

Reputation: 3573

cannot show a basic dropdown menu

I am trying to do a dropdown placed inside a div that will open on mouse hover but I cannot make it work. The dropdown will appear next to a checkbox (right of the checkbox) and they will share the same style.

I am using bootstap.js 3.2 How can I do that please? This is how far i can get...It doesnt have to be bootstrap-based to be honest...

<!DOCTYPE html>
<html>
<head>
<!--jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<!--bootsrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<style>
    .map-content {
        position: absolute;
        z-index: 1000;
        padding: 4px 7px 5px;
        border-top: 1px solid #777;
        border-left: 1px solid #777;
        border-right: 2px solid #444;
        border-bottom: 2px solid #444;
        line-height: 1.6;
        font-size: 1em;
        background: white;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }
</style>
</head>
<body>
<div class="form-group">
<div class="map-content" id="id_1">
    <div class="checkbox" style="margin-top: 1px; margin-bottom: 1px;">
        <label>
            <input id="mtoggle" onclick=myfunction(); type="checkbox">
            Hide map
        </label>
    </div>

</div>
</div>

<div class="container">
    <div class="row">
        <div class="dropdown">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                Dropdown button
            </button>
            <div class="dropdown-menu">
                <li><a class="dropdown-item" href="#" onclick='dispatcher("default")'>default</a></li>
                <li><a class="dropdown-item" href="#" onclick='dispatcher("case_1")'>case 1</a></li>
                <li><a class="dropdown-item" href="#" onclick='dispatcher("case_2")'>case 2</a></li>
            </div>
        </div>
    </div>
</div>

<script>
function myfunction() {
    console.log('Hello from checkbox')
}

function dispatcher() {
    console.log('Hello from dispatcher')
}

</script>
</body>
</html>

Upvotes: 1

Views: 182

Answers (1)

Tiff
Tiff

Reputation: 41

bootstrap navbar has built in functionality that will do all this for you, perhaps try using that?

https://getbootstrap.com/docs/3.3/examples/navbar/

https://getbootstrap.com/docs/3.3/components/#navbar

Or button dropdowns

https://getbootstrap.com/docs/3.3/components/#btn-dropdowns

Also - to make it open on hover I think it's..

.dropdown:hover>.dropdown-menu {
  display: block;
}

Upvotes: 1

Related Questions