I’m still having fun to use the bootstrap framework for build responsive website. I will share my custom horizontal menu. My horizontal menu has 2 navbar in the top. On the top navigation bar consists of brand image, date and name of the user with a dropdown menu. The second navbar we can set a link page or another menu. Second navbar will collapse when browser resolution change into mobile resolution. lets see my horizontal menu preview below
Okay, here’s the script how to create a horizontal menu with bootstrap 3 and custom css
1. Make sure you have downloaded the bootstrap framework 3 here
2. Make sure you have downloaded the font awesome here
3. Create index.php as php file and copy the script below
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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>beatiful custom horizontal menu with bootstrap 3 </title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <link href="font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet"> </head> <body> <div id="main-header"> <div class="container-fluid header-top"> <div class="row"> <div class="col-md-4 col-sm-3 col-xs-12"> <div class="navbar-header navbar-default "> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="" href="#"><img class="img-responsive image_brand" src="image/sgtlogo.png"></a> </div> </div> <!-- col-md-4 col-xs-12 --> <div class="col-md-8 col-sm-9 col-xs-12 xs_color"> <div class="navbar-header navbar-kanan " > <ul class="nav nav-pills "> <li class="grey"><a href="#"> <span class="round_text green_date"><?php echo date('d')?></span> <span class="round_text red_date"><?php echo date('m')?></span> <span class="round_text blue_date"><?php echo date('y')?></span> </a></li> <li class="light-blue"> <a data-toggle="dropdown" href="#" class="dropdown-toggle"> <img class="nav-user-photo" src="image/twitter.png" style="width:36px; heigth:36px;" alt="Jason's Photo"> <span class="user-info hidden-xs"> Sigit Prasetya Nugroho </span> <i class="ace-icon fa fa-caret-down"></i> </a> <ul class="dropdown-menu xs-menu-left" role="menu"> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Logout</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div> <!-- col-md-8 col-xs-12 --> </div> </div> <div class="container-fluid header-bottom"> <div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-kiri" id="bottom_menu"> <li><a href="#"><i class="fa fa-home"></i> Home</a></li> <li><a href="#"><i class="fa fa-users"></i> Customers</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-tasks"></i> Items <span class="caret"></span></a> <ul class="dropdown-menu menu-top-front" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> <li><a href="#"><i class="fa fa-file-text-o"></i> Reports</a></li> <li><a href="#"><i class="fa fa-cart-plus"></i> Sales</a></li> <li><a href="#"><i class="fa fa-sliders"></i> Config</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- container fluid 2 --> </div><!-- main header --> <div id="wrapper"> <!-- Sidebar --> <div id="sidebar-wrapper"> </div><!-- /#sidebar-wrapper --> <!-- Page Content --> <div id="page-content-wrapper"> </div><!-- /#page-content-wrapper --> </div> <!-- /#wrapper --> <!-- jQuery --> <script src="js/jquery-1.11.2.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html> |
4. Create style.css as css file and copy my custom css below
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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 | .navbar-default{ background-color:white; height:40px; } .btn-sidebar{ margin-top:3px; margin-left: -10px; background-color:#43adb9; } .image_brand{ padding-top: 5px; } .btn-sidebar:hover{ margin-top:3px; margin-left: -10px; opacity: 0.8; } .xs-menu-left{ right: 0; left: auto; } #main-header{ background-color: white; border-bottom: 1px solid grey; } .header-top{ border-bottom: 0px solid grey; } .header-bottom{ background-color: white; } .navbar-kanan{ float:right; } .navbar-kiri{ margin-left: -25px; } .navbar-date{ font-size: 20px; vertical-align: middle; line-height: 1px; } .nav > li:hover { opacity: 0.8; } #bottom_menu li> a{ margin-right: 3px; color:#ad3434; } #bottom_menu li> a:hover{ background-color: #fa7c00!important; color: white; } .round_text{ border-radius: 100%; border: 1px solid #FFF; max-width: 50px; padding: 5px; margin-right: 3px; } .red_date{ background-color: #b74635!important; } .blue_date{ background-color: #6fb3e0!important; } .green_date{ background-color: #87b87f!important; } .grey > a{ background-color:#4b4b4b!important;; color: white; -webkit-border-radius: 0px!important; -moz-border-radius: 0px!important; border-radius: 0px!important; } .purple > a{ background-color: #762c59!important; color: white!important; -webkit-border-radius: 0px!important; -moz-border-radius: 0px!important; border-radius: 0px!important; } .green > a{ background-color: #2c7659!important; color: white!important;; -webkit-border-radius: 0px!important; -moz-border-radius: 0px!important; border-radius: 0px!important; } .red > a{ background-color:#763930; color: white; -webkit-border-radius: 0px!important; -moz-border-radius: 0px!important; border-radius: 0px!important; } .light-blue > a { background-color:#fa7c00!important; color: white; -webkit-border-radius: 0px!important; -moz-border-radius: 0px!important; border-radius: 0px!important; } .user-info{ max-width: 100px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; vertical-align: top; position: relative; } .nav-user-photo { margin: -12px 0 -10px -10px; border-radius: 100%; border: 2px solid #FFF; max-width: 50px; } @media (max-width: 767px) { .xs_color{ background-color: #38789c; padding-top: 3px; } .navbar-kanan{ float: none!important; margin-left: -10px; } .navbar-kiri{ margin-left: -5px; } .btn-sidebar{ margin-left:-10px; } } |
You can check my demo horizontal menu with bootstrap here
The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.
Latest posts by Sigit Prasetya Nugroho (see all)
- Tutorial Operator, Conditional Statement and Loops Javascript for Beginners - June 11, 2019
- Understanding Variables And Data Types in Javascript for Beginners - June 9, 2019
- Basic Introduction Javascript for Beginners - June 6, 2019