<style>
body{ /* CSS for BODY transition when menu is set to push BODY content. */
-moz-transition: left 100ms ease-in-out, right 100ms ease-in-out;
-webkit-transition: left 100ms ease-in-out, right 100ms ease-in-out;
transition: left 100ms ease-in-out, right 100ms ease-in-out;
}
.sidetogglemenu{ /* shared class for side toggle menus */
border-right: 5px solid #ff573b;
background-color: white;
width: 170px; /* default menu width */
height: 100%;
position: fixed;
top: -100%;
clear: both;
display: block;
visibility: 'hidden';
box-shadow: 5px 0 5px rgba(174, 174, 174, .8);
-moz-transition: all 100ms ease-in-out; /* change 100ms to slide in animation time */
-webkit-transition: all 100ms ease-in-out;
transition: all 100ms ease-in-out;
}
.sidetogglemenu ul{
padding: 0;
margin: 0;
list-style: none;
}
.sidetogglemenu a{
font: bold 13px Verdana;
padding: 10px;
display: block;
color: #595959;
text-decoration: none;
border-bottom: 1px solid #C0C0C0;
}
.sidetogglemenu a:hover{
background: red;
color: white;
}
/* ####### Additional CSS for toggle menu #togglemenu2 ####### */
#togglemenu2{
width: 250px;
border-width: 0;
background: rgb(53,106,160);
box-shadow: -5px 0 5px rgba(174, 174, 174, .8);
}
#togglemenu2 ul a{
color: white;
border-bottom: 1px solid #eee;
font: bold 14px;
text-transform: uppercase;
}
#togglemenu2 a:hover{
background: #162a50;
color: white;
}
/* ####### Responsive Menu related CSS ####### */
div#smallscreentoggler{ /* CSS for small screen menus toggler, shown when device width is below specified */
width: 1.5em;
z-index: 10000;
color: white;
position: relative;
float: right;
overflow: hidden;
background: gray;
font: normal 1.8em Arial;
margin-bottom: 0.5em;
text-align: center;
box-shadow: -3px 3px 5px gray;
cursor: pointer;
border-radius: 2px;
display: none;
-moz-transition: all 200ms ease-in-out;
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
div#smallscreentoggler:hover{
background: #eee;
color: black;
-moz-transition: all 200ms ease-in-out;
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
@media screen and (max-width: 480px){ /* CSS when device width is 480px or less */
div#smallscreentoggler{
display: block; /* show small screen menus toggler */
}
.sidetogglemenu{ /* Set position of menus to static */
position: static;
border-width: 0;
border-top-width: 1px;
width: 98% !important;
height: auto;
box-shadow: 5px 0 5px rgba(174, 174, 174, .8) !important;
margin-left: 5px;
margin-bottom: 10px;
display: none;
}
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<!--<script src="sidetogglemenu.js">
/*
* Responsive Side Toggle Menu(c) Dynamic Drive (www.dynamicdrive.com)
* Last updated: May 28th, 13'
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
*/
</script>
-->
<script type="text/javascript">
/*
* Responsive Side Toggle Menu (c) Dynamic Drive (www.dynamicdrive.com)
* Last updated: June 2nd, 2013
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
* Requires: jQuery 1.7 or higher
*/
(function(w, $){
var mediabreakpoint = 'screen and (max-width: 480px)' // CSS media query. Should match that find in CSS above
var $smallscreentoggler = $('<div id="smallscreentoggler" data-state="closed">≡</div>') // HTML for small screen menus toggler
var defaults = {
position: 'left',
pushcontent: true,
source: 'inline',
revealamt: 0,
marginoffset: 0,
dismissonclick: true,
curstate: 'closed'
}
var menusarray = []
w.sidetogglemenu = function(options){
var s = $.extend({}, defaults, options)
if ( !window.matchMedia ){ // if browser doesn't support media query detection via JavaScript
s.pushcontent = false // disable revealing menu by pushing page content (as window.matchMedia is used in this case to restore BODY margins)
}
var thismenu = this,
$body = $('body'),
$menu = '',
expandlength = ''
menusarray.push( [this, s] )
function init(menuref){
$menu = $(menuref).css({top: 0, visibility: 'hidden', zIndex: 1000}).prependTo(document.body)
$menu.on('click', function(e){
if (e.target.tagName != 'A')
e.stopPropagation()
})
$smallscreentoggler.prependTo(document.body)
var delta = parseInt($menu.outerWidth()) - s.revealamt
if ($smallscreentoggler.css('display') != 'block')
this.toggle(s.curstate, delta)
$menu.css((s.position == 'left')? 'left' : 'right', -delta)
$menu.css({visibility: 'visible'})
return delta
}
this.getmenu = function(){
return $menu
}
this.toggle = function(action, w){
var delta = w || expandlength
s.curstate = action || ( (s.curstate == 'closed')? 'open' : 'closed' )
if ($menu.css('position') != 'static'){
var animprop = (s.position == 'left')? 'left' : 'right'
$menu.css(animprop, (s.curstate == 'open')? 0 : -delta)
if (s.pushcontent === true){
$body.css(animprop, (s.curstate == 'open')? delta + s.marginoffset : 0)
}
}
else{
$smallscreentoggler.trigger('toggle', action)
}
}
if (s.pushcontent === true){
$body.css({position: 'absolute'})
}
if (s.source == 'inline'){
expandlength = init.call(this, 'div#' + s.id)
}
else{
$.ajax({
url: s.source,
dataType: 'html',
error:function(ajaxrequest){
alert('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)
},
success:function(content){
expandlength = init.call(thismenu, content)
}
})
}
return this
}
jQuery(function(){ // run once in document load
$smallscreentoggler.prependTo(document.body)
$('body').on('click', function(e){ // dismiss menus onclick of BODY
var $target = $(e.target)
if (e.type == 'click' && !$target.hasClass('sideviewtoggle')){
for (var i=0; i < menusarray.length; i++){
if (menusarray[i][1].dismissonclick && menusarray[i][1].curstate == 'open')
menusarray[i][0].toggle('closed')
}
}
})
$smallscreentoggler.on('toggle', function(e, action){ // define custom "toggle" event on smallscreentoggler
for (var i=0; i < menusarray.length; i++){
var $menu = menusarray[i][0].getmenu()
$menu.css('display', ($menu.css('display') != 'block')? 'block' : 'none')
}
})
$smallscreentoggler.on('click', function(e){ // trigger toggle event onclick of smallscreentoggler
$smallscreentoggler.trigger('toggle')
e.stopPropagation()
})
if (window.matchMedia){
var mql = window.matchMedia( mediabreakpoint ) // CSS media queries matching
var handlemediamatch = (function t(mql){
if (mql.matches){ // if CSS media query condition met (ie: device width less than 480px)
$('body').css({left:0, right:0})
}
for (var i=0; i<menusarray.length; i++){
var $menu = menusarray[i][0].getmenu()
$menu.css('display', (mql.matches)? 'none' : 'block')
}
return t
}) (mql)
mql.addListener(function(){handlemediamatch(mql)})
}
})
}) (window, jQuery)
</script>
<script>
jQuery(function(){ // on DOM load
menu1 = new sidetogglemenu({ // initialize first menu example
id: 'togglemenu1',
marginoffset: 10
})
menu2 = new sidetogglemenu({ // initialize second menu example
id: 'togglemenu2',
position: 'right',
revealamt: -5
})
})
</script>
2. Code chèn menu :
<button onClick="menu1.toggle();" class="sideviewtoggle">Toggle Menu 1</button>
<button onClick="menu2.toggle()" class="sideviewtoggle">Toggle Menu 2</button>
<div id="togglemenu1" class="sidetogglemenu">
<ul>
<li><a href="/">Link 1</a></li>
<li><a href="/">Link 1</a></li>
<li><a href="/">Link 1</a></li>
<li><a href="/">Link 1</a></li>
<li><a href="/">Link 1</a></li>
<li><a href="/">Link 1</a></li>
<li><a href="/">Link 1</a></li>
<li><a href="/">Link 1</a></li>
</ul>
<p style="padding:10px">
Đoạn text Đoạn text Đoạn text Đoạn text Đoạn text .
</p>
</div><!--2-->
<div id="togglemenu2" class="sidetogglemenu">
<ul>
<li><a href="/">Link 2</a></li>
<li><a href="/">Link 2</a></li>
</ul>
<p style="padding:10px; color: lightyellow">
Đoạn text Đoạn text Đoạn text Đoạn text Đoạn text </p>
</div>
