サイドページにページを表示する - Jquery/HTML

Question

ページの読み込み時にサイドナビゲーターを表示するにはどうすればよいですか？私はまだトグルできるようにしたい。

//Toggle On/Off 
 
$("#menu-toggle").click(function(e) { 
 
    e.preventDefault(); 
 
    $("#wrapper").toggleClass("toggled"); 
 
});

body { 
 
    overflow-x: hidden; 
 
} 
 

 

 
/* Toggle Styles */ 
 

 
#wrapper { 
 
    padding-left: 0; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 

 
#wrapper.toggled { 
 
    padding-left: 325px; 
 
} 
 

 
#sidebar-wrapper { 
 
    z-index: 1000; 
 
    position: fixed; 
 
    left: 325px; 
 
    width: 0; 
 
    height: 100%; 
 
    margin-left: -325px; 
 
    overflow-y: auto; 
 
    background: #286090; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 

 
#wrapper.toggled #sidebar-wrapper { 
 
    width: 325px; 
 
} 
 

 
#page-content-wrapper { 
 
    width: 100%; 
 
    position: absolute; 
 
    padding: 15px; 
 
} 
 

 
#wrapper.toggled #page-content-wrapper { 
 
    position: absolute; 
 
    margin-right: -325px; 
 
} 
 

 

 
/* Sidebar Styles */ 
 

 
.sidebar-nav { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 325px; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
.sidebar-nav li { 
 
    text-indent: 20px; 
 
    line-height: 40px; 
 
} 
 

 
.sidebar-nav li a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: #fff; 
 
} 
 

 
.sidebar-nav li a:hover { 
 
    text-decoration: none; 
 
    color: #f2f2f2; 
 
    background: rgba(255, 255, 255, 0.2); 
 
} 
 

 
.sidebar-nav li a:active, 
 
.sidebar-nav li a:focus { 
 
    text-decoration: none; 
 
} 
 

 
.sidebar-nav>.sidebar-brand { 
 
    height: 65px; 
 
    font-size: 22px; 
 
    line-height: 60px; 
 
} 
 

 
.sidebar-nav>.sidebar-brand a { 
 
    color: #ffffff; 
 
} 
 

 
.sidebar-nav>.sidebar-brand a:hover { 
 
    color: #fff; 
 
    background: none; 
 
} 
 

 
@media(min-width:768px) { 
 
    #wrapper { 
 
    padding-left: 0; 
 
    } 
 
    #wrapper.toggled { 
 
    padding-left: 325px; 
 
    } 
 
    #sidebar-wrapper { 
 
    width: 0; 
 
    } 
 
    #wrapper.toggled #sidebar-wrapper { 
 
    width: 325px; 
 
    } 
 
    #page-content-wrapper { 
 
    padding: 20px; 
 
    position: relative; 
 
    } 
 
    #wrapper.toggled #page-content-wrapper { 
 
    position: relative; 
 
    margin-right: 0; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="wrapper"> 
 
    <!-- Sidebar --> 
 
    <div id="sidebar-wrapper"> 
 
    <div id="page-content-wrapper"> 
 
     <div class="container-fluid"> 
 
     <div class="row"> 
 
      <div class="col-lg-12"> 
 
      <a class="pull-right btn btn-primary btn-lg" href="#menu-toggle" id="menu-toggle">☰</a> 
 
      </div><br> 
 
      <br> 
 
     </div> 
 
     </div> 
 
    </div>

Answer 1

単に.click()

//Toggle On/Off 
 
$("#menu-toggle").click(function(e) { 
 
    e.preventDefault(); 
 
    $("#wrapper").toggleClass("toggled"); 
 
}).click(); //<<<<<<<<<<<<<<<<<<<<< add .click() here

body { 
 
    overflow-x: hidden; 
 
} 
 

 

 
/* Toggle Styles */ 
 

 
#wrapper { 
 
    padding-left: 0; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 

 
#wrapper.toggled { 
 
    padding-left: 325px; 
 
} 
 

 
#sidebar-wrapper { 
 
    z-index: 1000; 
 
    position: fixed; 
 
    left: 325px; 
 
    width: 0; 
 
    height: 100%; 
 
    margin-left: -325px; 
 
    overflow-y: auto; 
 
    background: #286090; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 

 
#wrapper.toggled #sidebar-wrapper { 
 
    width: 325px; 
 
} 
 

 
#page-content-wrapper { 
 
    width: 100%; 
 
    position: absolute; 
 
    padding: 15px; 
 
} 
 

 
#wrapper.toggled #page-content-wrapper { 
 
    position: absolute; 
 
    margin-right: -325px; 
 
} 
 

 

 
/* Sidebar Styles */ 
 

 
.sidebar-nav { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 325px; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
.sidebar-nav li { 
 
    text-indent: 20px; 
 
    line-height: 40px; 
 
} 
 

 
.sidebar-nav li a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: #fff; 
 
} 
 

 
.sidebar-nav li a:hover { 
 
    text-decoration: none; 
 
    color: #f2f2f2; 
 
    background: rgba(255, 255, 255, 0.2); 
 
} 
 

 
.sidebar-nav li a:active, 
 
.sidebar-nav li a:focus { 
 
    text-decoration: none; 
 
} 
 

 
.sidebar-nav>.sidebar-brand { 
 
    height: 65px; 
 
    font-size: 22px; 
 
    line-height: 60px; 
 
} 
 

 
.sidebar-nav>.sidebar-brand a { 
 
    color: #ffffff; 
 
} 
 

 
.sidebar-nav>.sidebar-brand a:hover { 
 
    color: #fff; 
 
    background: none; 
 
} 
 

 
@media(min-width:768px) { 
 
    #wrapper { 
 
    padding-left: 0; 
 
    } 
 
    #wrapper.toggled { 
 
    padding-left: 325px; 
 
    } 
 
    #sidebar-wrapper { 
 
    width: 0; 
 
    } 
 
    #wrapper.toggled #sidebar-wrapper { 
 
    width: 325px; 
 
    } 
 
    #page-content-wrapper { 
 
    padding: 20px; 
 
    position: relative; 
 
    } 
 
    #wrapper.toggled #page-content-wrapper { 
 
    position: relative; 
 
    margin-right: 0; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="wrapper"> 
 
    <!-- Sidebar --> 
 
    <div id="sidebar-wrapper"> 
 
    <div id="page-content-wrapper"> 
 
     <div class="container-fluid"> 
 
     <div class="row"> 
 
      <div class="col-lg-12"> 
 
      <a class="pull-right btn btn-primary btn-lg" href="#menu-toggle" id="menu-toggle">☰</a> 
 
      </div><br> 
 
      <br> 
 
     </div> 
 
     </div> 
 
    </div>

Answer 2

body { 
    overflow-x: hidden; 
} 

/* Toggle Styles */ 

#wrapper { 
    padding-left: 0; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 

#wrapper.toggled { 
    padding-left: 325px; 
} 

#sidebar-wrapper { 
    z-index: 1000; 
    position: fixed; 
    left: 325px; 
    width: 0; 
    height: 100%; 
    margin-left: -325px; 
    overflow-y: auto; 
    background: #286090; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 

#wrapper.toggled #sidebar-wrapper { 
    width: 325px; 
} 

#page-content-wrapper { 
    width: 100%; 
    position: absolute; 
    padding: 15px; 
} 

#wrapper.toggled #page-content-wrapper { 
    position: absolute; 
    margin-right: -325px; 
} 

/* Sidebar Styles */ 

.sidebar-nav { 
    position: absolute; 
    top: 0; 
    width: 325px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

.sidebar-nav li { 
    text-indent: 20px; 
    line-height: 40px; 
} 

.sidebar-nav li a { 
    display: block; 
    text-decoration: none; 
    color: #fff; 
} 

.sidebar-nav li a:hover { 
    text-decoration: none; 
    color: #f2f2f2; 
    background: rgba(255,255,255,0.2); 
} 

.sidebar-nav li a:active, 
.sidebar-nav li a:focus { 
    text-decoration: none; 
} 

.sidebar-nav > .sidebar-brand { 
    height: 65px; 
    font-size: 22px; 
    line-height: 60px; 
} 

.sidebar-nav > .sidebar-brand a { 
    color: #ffffff; 
} 

.sidebar-nav > .sidebar-brand a:hover { 
    color: #fff; 
    background: none; 
} 

@media(min-width:768px) { 
    #wrapper { 
     padding-left: 0; 
    } 

    #wrapper.toggled { 
     padding-left: 325px; 
    } 

    #sidebar-wrapper { 
     width: 0; 
    } 

    #wrapper.toggled #sidebar-wrapper { 
     width: 325px; 
    } 

    #page-content-wrapper { 
     padding: 20px; 
     position: relative; 
    } 

    #wrapper.toggled #page-content-wrapper { 
     position: relative; 
     margin-right: 0; 
    } 
} 

Answer 3

を追加することによって、私はあなたのコードを使用するつもりはない...しかし、これはfocuを助けるべきですs。あなたができる最初のことは、すぐにクラスを切り替えるためのクリックイベントをトリガすることです。あなたができるもう一つのことは、CSSクラス 'menu-open'をデフォルトでボディに置き、そこでそこから切り替えます。また、そのクラスをJSで追加することもできます。

ページの読み込み時にサイドナビゲーターを表示するにはどうすればよいですか？私はまだ トグルすることができますしたいと思います。

// using some jQuery 
 
var $body = $('body'); 
 
var $menuToggle = $('[rel="menu-toggle"]'); 
 

 
$menuToggle.on('click', function() { 
 
    $body.toggleClass('menu-open'); 
 
}).trigger('click'); 
 
// trigger a click to start (on load or whatever) 
 

 
// or not as a chained method like this: 
 
// $menuToggle.trigger('click');

.sidebar { 
 
    background: gray; 
 
    padding: 1rem; 
 
} 
 

 
body.menu-open .sidebar { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class='menu-toggle' rel='menu-toggle'>☰</button> 
 

 
<aside class='sidebar'>sidebar</aside>

Answer 4

どのように私は私の側のNAVは、ページの読み込みに表示することができますか？私はまだトグルできるようにしたい。

• まず、私はそれがゆえ、閉じた後に再度トグルする防止、サイドバーを非表示にしていませんので、あなたは、そのHTML構造のうち、トグルボタンを取ることをお勧めしたいです。
• トグルが外れて常に存在する場合は、希望の位置に配置します。この場合は、.pull-rightクラスのために右に配置されます。
• 文書の読み込みが完了したら、document.ready()のサイドバーを開いて表示するように切り替えます。あなたのページにこのスクリプトで

$(document).ready(function() { 
 
    //toggle sidebar on document ready 
 
    $("#wrapper").toggleClass("toggled"); 
 
}); 
 

 
//Toggle On/Off 
 
$("#menu-toggle").on("click", function(e) { 
 
    e.preventDefault(); 
 
    $("#wrapper").toggleClass("toggled"); 
 
});

body { 
 
    overflow-x: hidden; 
 
} 
 

 
/* Toggle Styles */ 
 

 
#wrapper { 
 
    padding-left: 0; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 

 
#wrapper.toggled { 
 
    padding-left: 325px; 
 
} 
 

 
#sidebar-wrapper { 
 
    z-index: 1000; 
 
    position: fixed; 
 
    left: 325px; 
 
    width: 0; 
 
    height: 100%; 
 
    margin-left: -325px; 
 
    overflow-y: auto; 
 
    background: #286090; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 

 
#wrapper.toggled #sidebar-wrapper { 
 
    width: 325px; 
 
} 
 

 
#page-content-wrapper { 
 
    width: 100%; 
 
    position: absolute; 
 
    padding: 15px; 
 
} 
 

 
#wrapper.toggled #page-content-wrapper { 
 
    position: absolute; 
 
    margin-right: -325px; 
 
} 
 

 
/* Sidebar Styles */ 
 

 
.sidebar-nav { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 325px; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
.sidebar-nav li { 
 
    text-indent: 20px; 
 
    line-height: 40px; 
 
} 
 

 
.sidebar-nav li a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: #fff; 
 
} 
 

 
.sidebar-nav li a:hover { 
 
    text-decoration: none; 
 
    color: #f2f2f2; 
 
    background: rgba(255, 255, 255, 0.2); 
 
} 
 

 
.sidebar-nav li a:active, 
 
.sidebar-nav li a:focus { 
 
    text-decoration: none; 
 
} 
 

 
.sidebar-nav>.sidebar-brand { 
 
    height: 65px; 
 
    font-size: 22px; 
 
    line-height: 60px; 
 
} 
 

 
.sidebar-nav>.sidebar-brand a { 
 
    color: #ffffff; 
 
} 
 

 
.sidebar-nav>.sidebar-brand a:hover { 
 
    color: #fff; 
 
    background: none; 
 
} 
 

 
@media(min-width:768px) { 
 
    #wrapper { 
 
    padding-left: 0; 
 
    } 
 
    #wrapper.toggled { 
 
    padding-left: 325px; 
 
    } 
 
    #sidebar-wrapper { 
 
    width: 0; 
 
    } 
 
    #wrapper.toggled #sidebar-wrapper { 
 
    width: 325px; 
 
    } 
 
    #page-content-wrapper { 
 
    padding: 20px; 
 
    position: relative; 
 
    } 
 
    #wrapper.toggled #page-content-wrapper { 
 
    position: relative; 
 
    margin-right: 0; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="wrapper"> 
 
    <!-- Sidebar --> 
 
    <div id="sidebar-wrapper"> 
 
    <div id="page-content-wrapper"> 
 
     <div class="container-fluid"> 
 
     <div class="row"> 
 
      <div class="col-lg-12"> 
 
      <br> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <a class="pull-right btn btn-primary btn-lg" href="#menu-toggle" id="menu-toggle">☰</a>