Submenu Bootstrap open left

Asked

Viewed 1,544 times

-1

needed my menu on the site below, open in left, so there is no layout break.

http://alertweb.com.br/desenvolvimento/novamodallayout/site/

You could help me?

<nav class="navbar navbar-inverse navbar-static-top marginBottom-0" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <img src="../assets/img/logohome.png">
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <div class="container">
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">TRANSPORTE RODO LOTAÇÃO <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                        <ul class="dropdown-menu dropdown-menu-left">
                            <li class="dropdown dropdown-submenu">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Transporte Especial <i class="fa fa-angle-right" aria-hidden="true"></i></a>
                                <ul class="dropdown-menu dropdown-menu-left">
                                    <li><a href="servicos.php">Caminhões Equipados com Guindautos</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>


                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">TRANSPORTE RODO FRACIONADO <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                        <ul class="dropdown-menu">
                            <li class="dropdown dropdown-submenu">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Transporte Especial <i class="fa fa-angle-right" aria-hidden="true"></i></a>
                                <ul class="dropdown-menu">
                                    <li><a href="servicos.php">Caminhões Equipados com Guindautos</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">TRANSPORTE AÉREO <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                        <ul class="dropdown-menu dropdown-menu-left ">
                            <li class="dropdown dropdown-submenu">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Transporte Especial <i class="fa fa-angle-right" aria-hidden="true"></i></a>
                                <ul class="dropdown-menu dropdown-menu-left">
                                    <li><a href="servicos.php">Caminhões Equipados com Guindautos</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>


                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">TRANSPORTE MARÍTIMO <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                        <ul class="dropdown-menu dropdown-menu-left">
                            <li class="dropdown dropdown-submenu">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Transporte Especial <i class="fa fa-angle-right" aria-hidden="true"></i></a>
                                <ul class="dropdown-menu dropdown-menu-left">
                                    <li><a href="servicos.php">Caminhões Equipados com Guindautos</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>



                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">IÇAMENTOS E REMOÇÕES<i class="fa fa-angle-down" aria-hidden="true"></i></a>
                        <ul class="dropdown-menu dropdown-menu-left">
                            <li class="dropdown dropdown-submenu">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Transporte Especial <i class="fa fa-angle-right" aria-hidden="true"></i></a>
                                <ul class="dropdown-menu dropdown-menu-left">
                                    <li><a href="servicos.php">Caminhões Equipados com Guindautos</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>




                </ul>
            </div>
        </div>
    </div>
</nav>

CSS

.navbar-inverse { background-color: rgba(0, 55, 104, 0.92);}
.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { background-color:  transparent; border-bottom: 3px solid #FFFFFF; color: #FFFFFF;}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus {  background-color:  transparent; border-bottom: 3px solid #FFFFFF; color: #FFFFFF;}
.dropdown-menu { background-color:  rgba(0, 55, 104, 0.92);}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-color: transparent;}
.navbar-inverse { background-image: none; }
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-image: none; }
.navbar-inverse { border-color: transparent;}
.navbar-inverse .navbar-brand { color: #FFFFFF}
.navbar-inverse .navbar-brand:hover { color: #FFFFFF}
.navbar-inverse .navbar-nav>li>a { color: #FFFFFF;     line-height: 45px;}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #FFFFFF}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #FFFFFF}
.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #FFFFFF}
.dropdown-menu>li>a { color: #FFFFFF}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: #FFFFFF}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-top-color: #FFFFFF}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #FFFFFF}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-bottom-color: #FFFFFF}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-bottom-color: #FFFFFF}
.navbar{margin-bottom:0px;}
.nav>li>a {position: relative;display: block;font-size: 11PX;padding: 10px 10px;}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {   border-color: transparent;}
.navbar-inverse .navbar-toggle {border-color: #FFFFFF;}
.navbar-toggle { background-color:  rgba(0, 55, 104, 0.92);}
.marginBottom-0{margin-bottom:0;}
.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover{background-color: rgba(0, 55, 104, 0.92);;border-color: rgba(0, 55, 104, 0.92);}
.fa-angle-right:before{margin-left:10px;}
@media (min-width: 768px){.navbar-nav { margin: 0;}}
.info span{padding:0px 10px 0px 10px;border-right:2px solid #e4e1e1;}
.info span:last-child{ border-right: none;}
.bg-menu{padding: 10px; border: none; background: #003768; color: #fff}
.social-links span{padding: 0px 10px;border-right: 2px solid #e4e1e1;}
.social-links span:last-child{border-right: none;}
.social-links span a{text-decoration: none; color: #fff; cursor: pointer;}

@media (max-width: 1099px){.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {color: #FFFFFF;}}

JS

    (function($){
    $(document).ready(function(){
        $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
            event.preventDefault(); 
            event.stopPropagation(); 
            $(this).parent().siblings().removeClass('open');
            $(this).parent().toggleClass('open');
        });
    });
})(jQuery);
javascript jquery css twitter-bootstrap bootstrap

  • You can put the code?

  • Deborah, I believe that the purpose of this site is to answer questions, and not create code for people.

  • @Matheus, I’m asking for help and it’s a question too, I’m not asking to create code, if I wanted someone to create the code, I’d be on a freelance website

  • @Paulohdsousa Ready, added

1 answer

0

Just add the pull-left class

Ex:<li class="dropdown dropdown-submenu pull-left">

Browser other questions tagged javascript jquery css twitter-bootstrap bootstrap

You are not signed in. Login or sign up in order to post.