Bootstrap Snippet Main Menu using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
    <header class="top-line">
        <a href="#" class="logo"><img src="http://placehold.it/150x50/dddddd/333333" alt="logo alt"></a>
        <div class="phone"><i class="fa fa-phone"></i>+777 777 77 77</div>
        <div class="mobile-menu-btn"><i class="fa fa-bars"></i> Меню</div>
        <nav class="main-menu top-menu">
            <ul>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.top-line {
    background-color: #222;
    position: relative;
    height: 60px;
}
.top-line .logo {
    padding-left: 25px;
    left: 0;
    display: inline-block;
    position: absolute;
    line-height: 55px;
}
.main-menu {
    padding: 0 130px;
    width: 100%;
    text-align: center;
}
.main-menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.main-menu ul li {
    display: inline-block;
}
.main-menu ul li.active a {
    color: #fff;
}
.main-menu ul li:hover a {
    color: #f5f5f5;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
$('.top-line').after('<div class="mobile-menu d-xl-none">');
    $('.top-menu').clone().appendTo('.mobile-menu');
    $('.mobile-menu-btn').click(function(){
        $('.mobile-menu').stop().slideToggle();
    });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Main Menu"
Bootstrap 4.1.1 Snippet by DesxD

Related: See More

Questions / Comments:

"Main Menu" Bootstrap 4.1.1 Snippet by DesxD

Related: See More

Questions / Comments:

"Main Menu"
Bootstrap 4.1.1 Snippet by DesxD