导航栏菜单左右两个按钮

时间:2014-04-19 23:03:08

标签: jquery css menu slide

您正在开发一个带有bootstrap 3的新CMS,我希望有2个按钮"<<"和">>"在菜单的每一面,当点击它滑动菜单!

原谅我的英语不好!! 这是我的代码:

<div class=" navbar navbar-inverse navbar-static-top">
    <div class="container">

        <a href="index.php"><img src="assets/img/logo2.png" class="navbar-brand"><small class="navbar-brand"> Compagnie Tunisienne De Meubles</small></a>
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<div class="collapse navbar-collapse navHeaderCollapse">
                <ul class="nav navbar-nav navbar-right">
                <li ><a href="#"><span class="glyphicon-home-2"></span>Acceuil</a></li>
                    <li class="divider-vertical"></li>
                 <li ><a href="#"><span class="glyphicon-industrial-building"></span>Société</a></li>             
                     <li class="divider-vertical"></li>
                <li class="dropdown" >
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">

                  <span class="glyphicon-glass-1"></span> Nos Produits <b class="caret"></b>
                     </a>
                     <ul class="dropdown-menu" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus">
                        <li><a href="#" >Coffres Forts</a></li>
                        <li><a href="#" >Mobiliers Métalliques</a></li>
                        <li><a href="#" >Rayonnages</a></li>
                        <li><a href="#" >Mobiliers Hospitaliers</a></li>
                        <li><a href="#" >Portes</a></li>
                        <li><a href="#" >Des produits de la poste</a></li>
                        <li><a href="#" >La sous traitance</a></li>
                        <li><a href="#" >Divers</a></li>

                        </ul>
                </li>               
                <li class="dropdown" >
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">

                   <span class="glyphicon-globe-6"></span> Nos Références <b class="caret"></b>
                     </a>
                     <ul class="dropdown-menu">
                        <li><a href="#" >Références en Tunisie</a></li>
                        <li><a href="#" >Références à l'étranger</a></li>
                        </ul>
                </li> 
                <li><a href="#"><span class="glyphicon-newspaper-1"></span>News</a></li>  
                <li ><a href="#"><span class="glyphicon-location-6"></span>Contact</a></li>                
                </ul>

            </div>
    </div>
</div>
</div>

1 个答案:

答案 0 :(得分:0)

Left/right sliding menu

接受的答案包括演示(jsfiddle的完整代码)看到它.. 您可以根据需要定位事物..

如果你不知道css ..不要问这里只是去学习css http://www.w3schools.com/css/default.asp并且在学习定位之后如果你试图实施并且遇到特定的实现/技术,你会在这里受到更好的欢迎< / p>