"menu_deisgn"
Bootstrap 3.0.0 Snippet by devlopereswar

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="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div id="flipkart-navbar">
<div class="container">
<div class="row row2">
<div class="col-sm-2">
<h2 style="margin:0px;"><span class="smallnav menu" onclick="openNav()">☰ Brand</span></h2>
<h1 style="margin:0px;"><span class="largenav">Brand</span></h1>
</div>
<div class="flipkart-navbar-search smallsearch col-sm-6 col-xs-11">
<div class="row">
<input class="flipkart-navbar-input col-xs-11" type="" placeholder="Search for Products, Brands and more" name="">
<button class="flipkart-navbar-button col-xs-1">
<svg width="15px" height="15px">
<path fill-color="#fff" d="M11.618 9.897l4.224 4.212c.092.09.1.23.02.312l-1.464 1.46c-.08.08-.222.072-.314-.02L9.868 11.66M6.486 10.9c-2.42 0-4.38-1.955-4.38-4.367 0-2.413 1.96-4.37 4.38-4.37s4.38 1.957 4.38 4.37c0 2.412-1.96 4.368-4.38 4.368m0-10.834C2.904.066 0 2.96 0 6.533 0 10.105 2.904 13 6.486 13s6.487-2.895 6.487-6.467c0-3.572-2.905-6.467-6.487-6.467 "></path>
</svg>
</button>
</div>
</div>
<div class="col-sm-1">
<a class="cart-button">
<i class="fa fa-heart" aria-hidden="true"></i> wishlist
<span class="item-number ">0</span>
</a>
</div>
<div class="cart largenav col-sm-1">
<a class="cart-button">
<svg class="cart-svg " width="16px" height="16 " viewBox="0 0 16 16 ">
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
#flipkart-navbar {
background-color: #fff;
padding:15px 0px 0px;
color: #FFFFFF;
}
.row1{
padding-top: 10px;
}
.flipkart-navbar-input {
padding: 11px 16px;
border-radius: 2px 0 0 2px;
border: 0 none;
outline: 0 none;
font-size: 15px;
color:#333;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .23), inset 1px 1px 0 0 hsla(0, 0%, 100%, .2);
}
.flipkart-navbar-button {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .23), inset 1px 1px 0 0 hsla(0, 0%, 100%, .2);
background-color: #d71f5b;
border: 1px solid #d71f5b;
border-radius: 0 2px 2px 0;
color: #fff;
padding: 10px 0;
height: 43px;
cursor: pointer;
}
.cart-button {
background-color: #d71f5b;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .23), inset 1px 1px 0 0 hsla(0, 0%, 100%, .2);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
function openNav() {
document.getElementById("mySidenav").style.width = "70%";
// document.getElementById("flipkart-navbar").style.width = "50%";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.body.style.backgroundColor = "rgba(0,0,0,0)";
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Argon Design System

Questions / Comments: