SlideToggle() effect to open horizontally + Jquery (horizontal menu)

Asked

Viewed 499 times

0

<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-icon.png">
<link rel="icon" type="image/png" sizes="96x96" href="assets/img/favicon.png">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    

<title>Admin GUSTAVO</title>

<!-- JS on-line --> 
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>    

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">

<!-- ================================================= -->    
<!-- CSS Bloco - Referente ao Editor bootstrap-wysiwyg -->
<!-- ================================================= -->    

<!-- JS external -->
<script src="../assets/js/bootstrap-wysiwyg/js/external/google-code-prettify/prettify.js"></script>

<script src="../assets/js/bootstrap-wysiwyg/js/external/jquery.hotkeys.js"></script>

<!-- JS editor -->    

<script src="../assets/js/bootstrap-wysiwyg/js/bootstrap-wysiwyg.js"></script>

<script src="../assets/js/bootstrap-wysiwyg/js/ferramentas.js" type="text/javascript"></script>    

<!-- CSS editor -->

<link href="../assets/css/bootstrap-wysiwyg/css/prettify.css" rel="stylesheet">

<link href="../assets/css/bootstrap-wysiwyg/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">  

<!-- ================================================= -->    
<!-- CSS Bloco - Referente ao Editor bootstrap-wysiwyg -->
<!-- ================================================= -->    

<!-- JS Jquery -->
<!--<script src="../assets/js/jquery.min.js" type="text/javascript"></script>--> 

<!-- Core CSS -->    
<link href="../assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">

<!-- Personalizações CSS -->  
<link href="../assets/css/personalizado.css" rel="stylesheet" type="text/css">

<!-- Dashborad Painel CSS -->  
<link href="../assets/css/dashborad-painel.css" rel="stylesheet" type="text/css">    



<!-- ================================================ -->    
<!-- JS e CSS Bloco - Referente ao efeito de fancybox -->
<!-- ================================================ -->    

<!-- Add jQuery library --><!-- JS ocultar e apresentar -->
<!--<script language="javascript" type="text/javascript" src="../js/jquery-1.12.0.min.js"></script>-->

<!-- biblioteca on-line -->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> -->

<!-- Add mousewheel plugin (this is optional) -->
<!--<script type="text/javascript" src="../fancybox/lib/jquery.mousewheel.pack.js?v=3.1.3"></script>-->

<script type="text/javascript" src="../fancybox/lib/jquery.mousewheel.pack.js?v=3.1.3"></script>

<!-- Add fancyBox main JS and CSS files -->
<!--<script type="text/javascript" src="../fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>-->

<script type="text/javascript" src="../fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>


<!--<link rel="stylesheet" type="text/css" href="../fancybox/source/jquery.fancybox.css?v=2.1.5" media="screen" />-->

<link rel="stylesheet" type="text/css" href="../fancybox/source/jquery.fancybox.css?v=2.1.5" media="screen" />

<!-- ================================================ -->    
<!-- JS e CSS Bloco - Referente ao efeito de fancybox -->
<!-- ================================================ -->    



<script type="text/javascript">

    /* ================================================================= */
    /* converte o conteúdo da DIV em textarea e envia os dados via PSOT */
    /* =============================================================== */    

    $('#btn-enviar').click(function(){
        //trata o conteudo vindo da Div e o transfere para um textarea que fica ocluto.
        $("#redacao").text($("#editor").html());
        //ativa a ação após dar o click no botão de enviar
        $('#form_redacao').submit();    
    });        

    /* =============================================================== */    
                /* efeito de ocultar listagem de produtos */
    /* =============================================================== */    
    /* efeito de listagem de produtos */    
        $(document).ready(function(){
            $("#revelar").click(function(){
                /*$("#esconder").slideToggle("slow");*/
                $("#esconder").animate({width: 'toggle'});
                /*$("#ocultar").css('display', 'none');*/
            });
        });

        /* efeito de silde com icone  */    
        $(document).ready(function () {
            $('#slideleft button').click(function () {
               $(this).toggleClass('aberto').next().toggleClass('aberto');
            });
        });    



    /* =============================================================== */    
                    /* efeito de galeria de imagens */
    /* =============================================================== */    
        $(document).ready(function() {
            $('.fancybox').fancybox();
        });      

    /* =============================================================== */    
    /* Alterar o tipo de título, velocidade sobreposição de encerramento */
    /* =============================================================== */    
        $("#fancybox-effects-a").fancybox({
            helpers: {
                title : {
                 type : 'outside'
                },
                overlay : {
                    speedOut : 0
                }
            }
        });

</script>     

</head>

<body>

    <nav class="navbar navbar-inverse navbar-static-top">
        <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>
                <a class="navbar-brand" href="#">Logo</a>               
            </div>            
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-left">
                    <li><a href="#">Dashboard</a></li>
                    <li><a href="#">Perfil</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Configurações</a></li>
                    <li><a href="#">Sair</a></li>
                </ul>

            </div>
        </div>
    </nav>
    <div class="container-fluid">
        <!--<div class="row">
            <form class="navbar-form navbar-left">
                <input type="text" class="form-control" placeholder="Pesquisar...">
            </form> 
        </div>-->
        <div class="row">
            <div class="sidebar" id="esconder">
                <div class="col-md-2">
                    <div class="menu-collapse">
                        <a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseMenu" aria-expanded="false" aria-controls="collapseMenu">
                          Home
                        </a>
                        <div class="collapse" id="collapseMenu">

                            <ul class="nav nav-sidebar">
                                <li class="active">
                                    <a href="?paginas=index" title="Home">Home</a>
                                </li>
                                <li class="">
                                    <a href="?paginas=noticia" title="noticia">Notícias</a>
                                </li>
                                <li class="">
                                    <a href="?paginas=slide" title="slide">Slide</a>
                                </li>                                
                                <li class="">
                                    <a href="?paginas=editor" title="editor">Editor</a>
                                </li>                             
                            </ul>
                        </div>
                    </div>                  
                </div>
            </div>
            <div class="col-md-10">
                <a id="revelar" class="btn btn-default" href="#">Exibir Menu</a>
                <?php include_once("paginas.php")?>
                <!--<p>teste de conteúdo</p>-->
            </div>
        </div>        
    </div>    

</body>
    <!-- JS Core -->

    <!--<script src="../assets/js/jquery.min.js" type="text/javascript"></script>-->
    <script src="../assets/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="../assets/js/npm.js" type="text/javascript"></script>

    <!--<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>-->

    <!-- JS Plugn's Bootstrap -->
    <script src="../assets/js/collapse.js" type="text/javascript"></script>
    <script src="../assets/js/dropdown.js" type="text/javascript"></script>
    <script src="../assets/js/modal.js" type="text/javascript"></script>
    <script src="../assets/js/tab.js" type="text/javascript"></script>
    <script src="../assets/js/button.js" type="text/javascript"></script>
    <script src="../assets/js/popover.js" type="text/javascript"></script>
    <script src="../assets/js/scrollspy.js" type="text/javascript"></script>
    <script src="../assets/js/tooltip.js" type="text/javascript"></script>
    <script src="../assets/js/alert.js" type="text/javascript"></script>
    <script src="../assets/js/affix.js" type="text/javascript"></script>
    <script src="../assets/js/transition.js" type="text/javascript"></script>

</html>

I need a little help here... I am creating an admin panel from scratch.. at the level of acquiring knowledge, study, etc.. So far I have achieved a similar effect using the slideToggle but I want it to open horizontally... the idea is to create a sidebar, currently is from the bottom up.. follows code created until now, I gave a poais rezumida the same is great..

below we have the main css and js calls

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="../assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">

here is the function that performs the slidetoggle effect:

 <script type="text/javascript">
        $(document).ready(function(){
            $("#revelar").click(function(){
                $("#esconder").slideToggle("slow");
                /*$("#ocultar").css('display', 'none');*/
            });
        });
</script>

and finally the html of the panel on which the effect is executed.

<html>
<body>

    <nav class="navbar navbar-inverse navbar-static-top">
        <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>
                <a class="navbar-brand" href="#">Logo</a>               
            </div>            
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-left">
                    <li><a href="#">Dashboard</a></li>
                    <li><a href="#">Perfil</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Configurações</a></li>
                    <li><a href="#">Sair</a></li>
                </ul>

            </div>
        </div>
    </nav>
    <div class="container-fluid">
        <!--<div class="row">
            <form class="navbar-form navbar-left">
                <input type="text" class="form-control" placeholder="Pesquisar...">
            </form> 
        </div>-->
        <div class="row">
            <div class="sidebar" id="esconder">
                <div class="col-md-2">
                    <div class="menu-collapse">
                        <a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseMenu" aria-expanded="false" aria-controls="collapseMenu">
                          Home
                        </a>
                        <div class="collapse" id="collapseMenu">

                            <ul class="nav nav-sidebar">
                                <li class="active">
                                    <a href="?paginas=index" title="Home">Home</a>
                                </li>
                                <li class="active">
                                    <a href="?paginas=noticia" title="noticia">Notícias</a>
                                </li>
                                <li class="active">
                                    <a href="?paginas=editor" title="editor">Editor</a>
                                </li>                             
                            </ul>
                        </div>
                    </div>                  
                </div>
            </div>
            <div class="col-md-10">
                <a id="revelar" class="btn btn-default" href="#">Exibir Menu</a>
                <?php include_once("paginas.php")?>
                <!--<p>teste de conteúdo</p>-->
            </div>
        </div>        
    </div>    

</body>
    <!-- JS Core -->

    <!--<script src="../assets/js/jquery.min.js" type="text/javascript"></script>-->
    <script src="../assets/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="../assets/js/npm.js" type="text/javascript"></script>

    <!--<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>-->

    <!-- JS Plugn's Bootstrap -->
    <script src="../assets/js/collapse.js" type="text/javascript"></script>
    <script src="../assets/js/dropdown.js" type="text/javascript"></script>
    <script src="../assets/js/modal.js" type="text/javascript"></script>
    <script src="../assets/js/tab.js" type="text/javascript"></script>
    <script src="../assets/js/button.js" type="text/javascript"></script>
    <script src="../assets/js/popover.js" type="text/javascript"></script>
    <script src="../assets/js/scrollspy.js" type="text/javascript"></script>
    <script src="../assets/js/tooltip.js" type="text/javascript"></script>
    <script src="../assets/js/alert.js" type="text/javascript"></script>
    <script src="../assets/js/affix.js" type="text/javascript"></script>
    <script src="../assets/js/transition.js" type="text/javascript"></script>

From now on I thank you all for the attention ! if you need any more information, I will be the orders.

php javascript html jquery css

1 answer

2


jQuery slide effects are only applied to height element, that is, vertically. To use the same effect horizontally, use the animate with width: 'toggle':

$(document).ready(function(){
   $("#revelar").click(function(){
       $("#esconder").animate({width: 'toggle'});
       /*$("#ocultar").css('display', 'none');*/
   });
});
#esconder{
   display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<nav class="navbar navbar-inverse navbar-static-top">
  <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>
          <a class="navbar-brand" href="#">Logo</a>               
      </div>            
      <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-left">
              <li><a href="#">Dashboard</a></li>
              <li><a href="#">Perfil</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
              <li><a href="#">Configurações</a></li>
              <li><a href="#">Sair</a></li>
          </ul>

      </div>
  </div>
</nav>
<div class="container-fluid">
  <!--<div class="row">
      <form class="navbar-form navbar-left">
          <input type="text" class="form-control" placeholder="Pesquisar...">
      </form> 
  </div>-->
  <div class="row">
      <div class="sidebar" id="esconder">
          <div class="col-md-2">
              <div class="menu-collapse">
                  <a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseMenu" aria-expanded="false" aria-controls="collapseMenu">
                    Home
                  </a>
                  <div class="collapse" id="collapseMenu">

                      <ul class="nav nav-sidebar">
                          <li class="active">
                              <a href="?paginas=index" title="Home">Home</a>
                          </li>
                          <li class="active">
                              <a href="?paginas=noticia" title="noticia">Notícias</a>
                          </li>
                          <li class="active">
                              <a href="?paginas=editor" title="editor">Editor</a>
                          </li>                             
                      </ul>
                  </div>
              </div>                  
          </div>
      </div>
      <div class="col-md-10">
          <a id="revelar" class="btn btn-default" href="#">Exibir Menu</a>
          <!--<p>teste de conteúdo</p>-->
      </div>
  </div>        
</div>

  • Hello Sam, I made the change in the line of JS and I made the inclusion of CSS, but what happens is that it makes the effect more at the end it also kept the passage from bottom to top and both lose the smoothing in the movement

  • The problem is that with this question code there is no way to play the page correctly the menu. Run the code of my reply in full screen and you will see that the menu slides sideways smoothly.

  • I understand, I will put it completely at the top of the post to see if it helps ! and you too will be able to see the effect as it is.

  • what is occurring is that the bootstrap version I am using is v3.4 and yours is 4 is causing some conflict...

Browser other questions tagged php javascript html jquery css

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