Horizontal subnavigation in bootstrap 3?

HTML & CSS
1

hi,

i cannot seem to find how to create a horizontal subnav in bootstrap? Like on this site for example: http://woonveste.com/projecten

where if an item is clicked the subnav is horizontal across the screen ?

Anybody here got some info/samples for this?

2

There seems to be something similar here:

http://www.bootply.com/WjsCLRE3d6

3

hi, yes i found that one, but on mobile it behaves very strange.

4

Doesn’t look too bad to me with a couple of margin tweaks.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 3</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.navbar {
	margin-bottom:-1px;
    border-radius:0;
}
#submenu {
    background-color: #e7e7e7;
    margin-bottom:20px;
	min-height:0;
}
.navbar-nav{margin:0}
.collapsing {
	display:none;
}

</style>
</head>
<body>
<div class="container">
  <nav class="navbar navbar-default" role="navigation" id="topmenu">
    <ul class="nav navbar-nav">
      <li class="dropdown"> <a href="#" data-toggle="collapse" data-target="#one">One</a> </li>
      <li class="dropdown"> <a href="#" data-toggle="collapse" data-target="#two">Two</a> </li>
      <li class="dropdown"> <a href="#" data-toggle="collapse" data-target="#three">Three</a> </li>
    </ul>
  </nav>
</div>
<div class="container">
  <nav class="navbar navbar-default" role="navigation" id="submenu">
    <ul class="nav navbar-nav collapse" id="one">
      <li><a href="#" id="">One sub 1</a></li>
      <li><a href="#" id="">One sub 2</a></li>
      <li><a href="#" id="">One sub 3</a></li>
      <li><a href="#" id="">One sub 4</a></li>
    </ul>
    <ul class="nav navbar-nav collapse" id="two">
      <li><a href="#" id="">Two sub 1</a></li>
      <li><a href="#" id="">Two sub 2</a></li>
      <li><a href="#" id="">Two sub 3</a></li>
    </ul>
    <ul class="nav navbar-nav collapse" id="three">
      <li><a href="#" id="">Three sub 1</a></li>
      <li><a href="#" id="">Three sub 2</a></li>
    </ul>
  </nav>
</div>
<script>

$('.collapse').on('shown.bs.collapse', function (e) {
  $('.collapse').not(this).removeClass('in');
});

$('[data-toggle=collapse]').click(function (e) {
  $('[data-toggle=collapse]').parent('li').removeClass('active');
  $(this).parent('li').toggleClass('active');
});

</script>
</body>
</html>

You will obviously need to style it as you want but should serve as a base for the effect.

5

Hi there willems,

personally, I avoid “Bootstrap” like the plague. :mask:
I also avoid using “JavaScript” for navigation. :mask:

Here is a responsive rendering of your site
example - http://woonveste.com/projecten …

[code]

untitled document body { background: #f9f9f8; font: 1em/1.5em arial, helvetica, sans serif; } #container { max-width: 62.5em; margin: auto; } #navbar, #navbar ul { position: relative; display: table; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; text-transform: uppercase; background: rgba(0,0,0,0.75); } #navbar li { display: table-cell; } #navbar a { position: relative; display: block; line-height: 3.5em; padding: 0 1em; font-size: 0.9em; color: #fff; text-decoration: none; } #navbar ul { position: absolute; display: none; left: 0; padding-left: 1.6em; box-sizing: border-box; text-align: left; background: rgba(124,193,65,0.9); } #navbar ul li { display: inline-block; margin-right: 1em; } #navbar li:hover ul{ display: block; } #navbar span { position: absolute; display: none; bottom: 0; left: 44%; width: 0; border: 0.6em solid transparent; border-bottom-color: rgba(124,193,65,1); } #navbar #selected span, #navbar li:hover span { display: block; } @media screen and (max-width:39em) { #navbar, #navbar ul, #navbar li { position: static; display: block; padding-left: 0; text-align: left; background: transparent; } #navbar ul li { display: block; margin-right: 0; } #navbar #selected span, #navbar li:hover span { display: none; } #navbar a { line-height: 2em; background: rgba(0,0,0,0.75); } #navbar a:hover { background: rgba(124,193,65,0.9); } }
[/code]

coothead

2 Likes
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.