"Untitled"
Bootstrap 4.1.1 Snippet by ayhncalik

Post to Facebook Tweet this

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
<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 ---------->
<body>
<div class="container">
<nav class="main-menu">
<ul class="main-menu__list">
<li class="main-menu__item"><a href="#">Approach</a></li>
<li class="main-menu__item"><a href="#">Solutions</a>
<ul class="sub-menu">
<li class="sub-menu__item"><a href="#">Railway</a></li>
<li class="sub-menu__item"><a href="#">Industrial</a></li>
</ul>
</li>
<li class="main-menu__item"><a href="#">Products</a></li>
<li class="main-menu__item"><a href="#">Company</a>
<ul class="sub-menu">
<li class="sub-menu__item"><a href="#">About us</a></li>
<li class="sub-menu__item"><a href="#">Values</a></li>
<li class="sub-menu__item"><a href="#">Team</a></li>
<li class="sub-menu__item"><a href="#">Career</a></li>
</ul>
</li>
<li class="main-menu__item"><a href="#">Resources</a>
<ul class="sub-menu">
<li class="sub-menu__item"><a href="#">Press</a></li>
<li class="sub-menu__item"><a href="#">Case studies</a></li>
<li class="sub-menu__item"><a href="#">Blog</a></li>
</ul>
</li>
<li class="main-menu__item"><a href="#">Contact</a></li>
</ul>
</nav>
</div>
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
body {
width: 100%;
height: 100%;
min-height: 100vh;
background-image: radial-gradient(farthest-corner at 45px 45px, #08c 0%, #00f7e1 100%);
}
.container {
max-width: 780px;
margin: 0 auto;
display: flex;
justify-content: flex-end;
align-items: flex-start;
position: relative;
}
.main-menu {
text-align: left;
display: block;
width: 100%;
}
.main-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
text-align: left;
}
.main-menu ul li {
display: inline-block;
position: relative;
margin: 0;
padding: 0;
}
.main-menu ul li a {
text-decoration: none;
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
$("document").ready(function() {
$("#mmenu").mmenu({
extensions: ["pagedim-black", "fx-menu-slide"],
navbar: {
title: "Site name"
},
offCanvas: {
position: "left"
},
navbars: [
{
position: "bottom",
content: ["<a href='#'>Some link</a>"]
}
]
});
var trigger = $("#hamburger"),
isClosed = true;
var api = $("#mmenu").data("mmenu");
api.bind("closed", function() {
trigger.removeClass("is-open");
trigger.addClass("is-closed");
isClosed = false;
});
trigger.click(function() {
burgerTime();
});
function burgerTime() {
if (isClosed == true) {
trigger.removeClass("is-open");
trigger.addClass("is-closed");
isClosed = false;
} else {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Bootstrap Wizard

Questions / Comments: