Monday, October 12, 2015

How to make menu bar like window 8 and 10 using bootstrap


<!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>



4 comments:


  1. I haven’t any word to appreciate this post.....Really i am impressed from this post....the person who create this post it was a great human..thanks for shared this with us. Emus4U

    ReplyDelete
  2. This is a great article thanks for sharing this informative information. I will visit your blog regularly for some latest post. I will visit your blog regularly for Some latest post. TweakBox

    ReplyDelete
  3. I have perused your article, it is extremely enlightening and supportive for me.I respect the profitable data you offer in your articles. A debt of gratitude is in order for posting it.. AppValley

    ReplyDelete
  4. howdy, your sites are better than average. I value your work. Jailbreak iOS 11.2.2

    ReplyDelete