"Easy menu"
Bootstrap 3.3.0 Snippet by Roosso

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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 ---------->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="btn-group btn-group-justified tmenu" role="group">
<div class='btn-group' role='group'>
<button type='button' class='btn btn-default dropdown-toggle topmenu' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
Menu 1 <span class='caret'></span>
</button>
<ul class='dropdown-menu'>
<li class='topsubmenu'><a href='#' class='ptsans topsubmenu'>Page 1</a></li>
<li class='topsubmenu'><a href='#' class='ptsans topsubmenu'><i class='fa fa-fw fa-angle-right small'></i> Demo page</a></li><li class='topsubmenu'><a href='#' class='ptsans topsubmenu'><i class='fa fa-fw fa-long-arrow-right small'></i> Page</a></li><li class='topsubmenu'><a href='#' class='ptsans topsubmenu'><i class='fa fa-fw fa-long-arrow-right small'></i> 18+</a></li></ul></div><a href='#' class='btn btn-default ptsans topmenu'>Page</a><a href='#' class='btn btn-default ptsans topmenu'>Page</a>
<div class='btn-group' role='group'>
<button type='button' class='btn btn-default dropdown-toggle topmenu' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
Info Menu <span class='caret'></span>
</button>
<ul class='dropdown-menu'>
<li class='topsubmenu'><a href='#' class='ptsans topsubmenu'>Information</a></li>
<li class='topsubmenu'><a href='#' class='ptsans topsubmenu'><i class='fa fa-fw fa-angle-right small'></i> USA Page</a></li><li class='topsubmenu'></ul></div>
<div class='btn-group' role='group'>
<button type='button' class='btn btn-default dropdown-toggle topmenu' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
News <span class='caret'></span>
</button>
<ul class='dropdown-menu'>
<li class='topsubmenu'><a href='/index.php?page=feed' class='ptsans topsubmenu'>Feeds</a></li>
<li class='topsubmenu'><a href='#' class='#'><i class='fa fa-fw fa-angle-right small'></i> Feeds</a></li><li class='topsubmenu'><a href='#' class='ptsans topsubmenu'><i class='fa fa-fw fa-angle-right small'></i> Feed 2</a></li><li class='topsubmenu'><a href='#' class='ptsans topsubmenu'><i class='fa fa-fw fa-angle-right small'></i> RooCMS</a></li></ul></div>
</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
.tmenu {padding: 5px;border-radius: 4px;background-color: #fff;border: 1px solid #ddd;}
.topmenu {background-color: transparent;text-shadow: none;box-shadow: none;border: 0;}
.topmenu:hover,
.topsubmenu:hover {background: #545c68 none; color: #fff;}
.topsubmenu:hover > .small {color: #545c68;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: