Skip to content

Instantly share code, notes, and snippets.

@sachinfl

sachinfl/window_menu_bar.html

Last active October 16, 2015 20:37
Show Gist options
  • Save sachinfl/fbb56d56f0510d43e0e9 to your computer and use it in GitHub Desktop.
Save sachinfl/fbb56d56f0510d43e0e9 to your computer and use it in GitHub Desktop.
Download ZIP
How to make menu bar like window 8 and 10 using bootstrap
Raw
window_menu_bar.html
<!DOCTYPE html>
<html>
<head>
<link href="http://fastlearning.in/controller/css/css_files/bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<style type="text/css">
body{ background-color:#ccc;}
.btn-group:hover .dropdown-menu {
display: block;
margin-top: 0;
-webkit-transition: all 5s ease-in;
-moz-transition: all 5s ease-in;
-ms-transition: all 5s ease-in;
-o-transition: all 5s ease-in;
transition: all 5s ease-in;
}
.flmenu{
width: 160px!important;
height: 100px!important;
margin:5px;
display:block !important;
padding-top:23px;
color:#f5f5f5;
}
.span-icon{ font-size:30px;}
.flmenu:hover{ background-color:#f5f5f5 !important; cursor:pointer; color:#CCCCCC;}
.flmenu1{
background-color: #000000;
}
.flmenu2{
background-color: #00B159;
}
.flmenu3{
background-color: #00AEDB;
}
.flmenu4{
background-color: #F37735;
}
.flmenu5{
background-color: #EC098C;
}
.flmenu6{
background-color: #314E6C;
}
.flmenu7{
background-color: #44A5AC;
}
.flmenu8{
background-color: #297E83;
}
.flmenu9{
background-color:#CC3366;
}
.flmenu10{
background-color: #C9312C;
}
.flmenu11{
background-color:#6699CC;
}
.flmenu12{
background-color: #7C4199;
}
.flmenu13{
background-color: #FFC425;
}
.flmenu14{
background-color: #034A8C;
}
.flmenu15{
background-color: #E59B18;
}
.flmenu16{
background-color: #006054;
}
.flmenu17{
background-color: #44A5AC;
}
.flmenu18{
background-color: #336797;
}
.flmenu19{
background-color: #3B3E45;
}
.start-btn{ osition: relative;
padding: 8px 30px;
border: 0;
border-radius:1px !important;
text-transform: uppercase;
text-decoration: none;
transition: 0.2s ease;
box-shadow:0 1px 6px 0 rgba(0,0,0,.12),0 1px 6px 0 rgba(0,0,0,.12);
outline: none!important;}
.start-btn:hover{ box-shadow:0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15)}
.start-btn:active{}
</style>
</head>
<body>
<!-- Single button -->
<div class="container" style="margin-top:100px;">
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle start-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Start
</button>
<div class="dropdown-menu startmneu" style="padding-left:30px; width:1050px;background-color: #E4E4E4 !important;position: absolute;border: 1px solid #ccc;">
<div class="row">
<div class="col-lg-2 flmenu flmenu1" align="center">
<span class="glyphicon glyphicon-bell span-icon"></span><br/>
<b>Notification</b>
</div>
<div class="col-lg-2 flmenu flmenu2" align="center">
<span class="glyphicon glyphicon-trash span-icon"></span><br/>
<b>Delete</b>
</div>
<div class="col-lg-2 flmenu flmenu3" align="center">
<span class="glyphicon glyphicon-flag span-icon"></span><br/>
<b>Flag</b>
</div>
<div class="col-lg-2 flmenu flmenu4" align="center">
<span class="glyphicon glyphicon-headphones span-icon"></span><br/>
<b>HeadPhones</b>
</div>
<div class="col-lg-2 flmenu flmenu5" align="center">
<span class="glyphicon glyphicon-print span-icon"></span><br/>
<b>Printer</b>
</div>
<div class="col-lg-2 flmenu flmenu6" align="center">
<span class="glyphicon glyphicon-camera span-icon"></span><br/>
<b>Camera</b>
</div>
</div>
<div class="row">
<div class="col-lg-2 flmenu flmenu7" align="center">
<span class="glyphicon glyphicon-facetime-video span-icon"></span><br/>
<b>Video</b>
</div>
<div class="col-lg-2 flmenu flmenu8" align="center">
<span class="glyphicon glyphicon-picture span-icon"></span><br/>
<b>Pictures</b>
</div>
<div class="col-lg-2 flmenu flmenu9" align="center">
<span class="glyphicon glyphicon-gift span-icon"></span><br/>
<b>Gift</b>
</div>
<div class="col-lg-2 flmenu flmenu10" align="center">
<span class="glyphicon glyphicon-bullhorn span-icon"></span><br/>
<b>BullHorn</b>
</div>
<div class="col-lg-2 flmenu flmenu11" align="center">
<span class="glyphicon glyphicon-compressed span-icon"></span><br/>
<b>Compressed</b>
</div>
<div class="col-lg-2 flmenu flmenu12" align="center">
<span class="glyphicon glyphicon-phone-alt span-icon"></span><br/>
<b>Telphone</b>
</div>
</div>
<div class="row">
<div class="col-lg-2 flmenu flmenu13" align="center">
<span class="glyphicon glyphicon-briefcase span-icon"></span><br/>
<b>Briefcase</b>
</div>
<div class="col-lg-2 flmenu flmenu14" align="center">
<span class="glyphicon glyphicon-volume-off span-icon"></span><br/>
<b>Volumne off</b>
</div>
<div class="col-lg-2 flmenu flmenu15" align="center">
<span class="glyphicon glyphicon-lock span-icon"></span><br/>
<b>Lock</b>
</div>
<div class="col-lg-2 flmenu flmenu16" align="center">
<span class="glyphicon glyphicon-plane span-icon"></span><br/>
<b>Aeroplane</b>
</div>
<div class="col-lg-2 flmenu flmenu17" align="center">
<span class="glyphicon glyphicon-hdd span-icon"></span><br/>
<b>Hard Disk Drive</b>
</div>
<div class="col-lg-2 flmenu flmenu18" align="center">
<span class="glyphicon glyphicon-phone span-icon"></span><br/>
<b>Mobile</b>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://fastlearning.in/controller/js//jquery-1.11.0.min"></script>
<script src="http://fastlearning.in/controller/js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>
@sachinfl
Copy link
Author

Output of this Code like this :
how-to-open-the-button-group-item-without-any-click-on-the-button-in-bootstrap4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment