para - menu horizontal html sin css

Submenú horizontal para un menú principal vertical usando bootstrap

Question

¿Hay alguna manera de crear un submenú horizontal para una estructura de menú vertical usando bootstrap? No he visto ningún submenú con orientación vertical del menú principal. Una estructura de muestra de la estructura del menú es similar a esta

Answer 1

¡Aquí vamos!

Los menús desplegables funcionan con "ul" anidado, posiciones absolutas y cambiaremos desde la display: none; para display:block; cuando sea necesario con los titulares.

Algo como esto:

<ul>
<li><a href="#">…</a>
<ul>
<li><a href="#">…</a>
<ul> … <!-- And so on. -->
</ul>
</li>
<li>
</ul>

El html de tu ejemplo

<nav id="main-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a>
<ul>
<li><a href="#">Project 1</a>
<ul>
<li><a href="#">Project 2</a>
<ul>
<li><a href="#">Project 3</a>
<ul>
<li><a href="#">Project 4</a>
<ul>
<li><a href="#">Project 5</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

SCSS de su explicación: (Utilicé sass porque es más fácil de leer y escribir, pero también pegaré CSS a continuación)

#main-nav{
ul{ /* Those lines are used only for styling */
margin: 0;
padding: 0;
border-right: 1px solid black;
width: 150px;
list-style-type: none;
li{
position: relative; /* This is important when using absolute positions. */
&:hover{
&:before{ /* arrow styles */
content: "";
top: 0;
bottom: 0;
right: 0;
border-top: 5px solid transparent;
border-right: 5px solid #999;
border-bottom: 5px solid transparent;
border-left: 5px solid transparent;
position: absolute;
height: 0px;
width: 0px;
margin: auto;
}
> ul{
display: block; /* IMPORTANT: This will show your dropdown menus when hover in the parent li. */
/*&:before { // I don''t like this part but if you enable it, it will make child ul''s look closer to your design.
content: "";
position: absolute;
right: 0;
top: -65px;
bottom: -35px;
width: 1px;
background-color: #ccc;
}*/
}
}//:hover
a{ /* Those lines are used only for styling */
padding: 7px 10px;
display: block;
&:hover{
color: red;
}
}// a
> ul{ /* This is what makes the magic happen. */
display: none; /* Dropdown menus are always hidden, except when you hover it''s li parent */
position: absolute; /* This will position the ul */
top: 0;
left: 100%; /* This will push the ul where it is needed. */
border-right: 1px solid #ccc;
}
}// li
}// ul
}

Un ejemplo en vivo: https://jsfiddle.net/xwazzo/3spxxk1z/

Y la versión prometida de CSS:

#main-nav ul {
margin: 0;
padding: 0;
border-right: 1px solid black;
width: 150px;
list-style-type: none;
}
#main-nav ul li { position: relative; }
#main-nav ul li:hover:before {
content: "";
top: 0;
bottom: 0;
right: 0;
border-top: 5px solid transparent;
border-right: 5px solid #999;
border-bottom: 5px solid transparent;
border-left: 5px solid transparent;
position: absolute;
height: 0px;
width: 0px;
margin: auto;
}
#main-nav ul li:hover > ul { display: block; }
#main-nav ul li a {
padding: 7px 10px;
display: block;
}
#main-nav ul li a:hover { color: red; }
#main-nav ul li > ul {
display: none;
position: absolute;
top: 0;
left: 100%;
border-right: 1px solid #ccc;
}

Answer 2

Esto podría ser útil para ti. se puede encontrar aquí

HTML:

<div class="container-fluid">
<ul class="nav nav-justified navbar-default">
<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>
<li class="dropdown">
<a href="#" data-toggle="collapse" data-target="#four">Four</a>
</li>
<li class="dropdown">
<a href="#" data-toggle="collapse" data-target="#five">Five</a>
</li>
</ul>
</div>
<div class="container-fluid">
<nav id="submenu">
<ul class="nav nav-justified">
<li>
<ul class="nav nav-justified 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>
</li>
<li>
<ul class="nav nav-justified 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>
</li>
<li>
<ul class="nav nav-justified collapse" id="three">
<li><a href="#" id="">Three sub 1</a></li>
<li><a href="#" id="">Three sub 2</a></li>
</ul>
</li>
<li>
<ul class="nav nav-justified collapse" id="four">
<li><a href="#" id="">Four sub 1</a></li>
<li><a href="#" id="">Four sub 2</a></li>
</ul>
</li>
<li>
<ul class="nav nav-justified collapse" id="five">
<li><a href="#" id="">Link</a></li>
<li><a href="#" id="">Link</a></li>
</ul>
</li>
</ul>
</nav>
</div>

CSS:

.navbar {
margin-bottom:-1px;
border-radius:0;
}
#submenu {
background-color: none;
margin-bottom:10px;
padding-bottom:15px;
margin-top:-20px
margin-left:10px;
margin-right:10px;
display:none;
}
.collapsing {
display:none;
}
#submenu.navbar {
background-color:transparent;
border:0;
}

JS:

$(''.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'');
$("#submenu").show();
});