Spotfire Developer: Slide menu

html

<script src='//cdn.muicss.com/mui-0.4.6/js/mui.js'></script>

<style>

#sidedrawer {
position: fixed;
top: 0;
bottom: 0;
width: 300px;
left: -300px;
overflow: auto;
z-index: 2;
background-color: #fff;
border:1px solid lightblue;
top:27px;
transition: transform 0.2s;
}

@media (min-width: 768px) {
#sidedrawer {
transform: translate(300px);
}

body.hide-sidedrawer #sidedrawer {
transform: translate(0px);
}
}

#sidedrawer ul {
list-style: none;
}

#sidedrawer > ul {
padding-left: 0px;
}

#sidedrawer > ul > li:first-child {
padding-top: 15px;
}

#sidedrawer strong {
display: block;
padding: 15px 22px;
cursor: pointer;
}

#sidedrawer strong:hover {
background-color: #E0E0E0;
}

#sidedrawer strong + ul > li {
padding: 6px 0px;
}

.closebtn{
cursor: pointer;
}
</style>

<b class="closebtn js-hide-sidedrawer"><font size=4>☰</font></b> click the hamburger to to open the menu

<div id="sidedrawer" class="mui--no-user-select">
click the top right button to close the menu
<div style='float:right;cursor:hand;font-size:20px' class="closebtn js-hide-sidedrawer">☒</div>
<div class="mui-divider"></div>
<ul>
<li class="active">
<strong>Options</strong>
<ul>
<li>This is a List Box filter </li>
<li><SpotfireControl id="8e46dc29e17746e38b69ed088933e1fc" /></li>
</ul>
</li>
<li>
<strong>More Options</strong>
<ul>
<li>This is a Check Box filter</li>
<li><SpotfireControl id="a5d461b193084a338c6b4c4d0cfb0cea" /></li>
</ul>
</li>
</ul>
</div>
</div>
</div>

js

var $bodyEl = $('body');
var $sidedrawerEl = $('#sidedrawer');


function showSidedrawer() {
// show overlay
var options = {
onclose: function() {
$sidedrawerEl
.removeClass('active')
.appendTo(document.body);
}
};

var $overlayEl = $(mui.overlay('on', options));

// show element
$sidedrawerEl.appendTo($overlayEl);
setTimeout(function() {
$sidedrawerEl.addClass('active');
}, 20);
}


function hideSidedrawer() {
$bodyEl.toggleClass('hide-sidedrawer');
}


$('.js-show-sidedrawer').on('click', showSidedrawer);
$('.js-hide-sidedrawer').on('click', hideSidedrawer);


var $titleEls = $('strong', $sidedrawerEl);

$titleEls.next().hide();

$titleEls.on('click', function() {
$(this).next().slideToggle(200);
});

$bodyEl.toggleClass('hide-sidedrawer');

.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: #474747;
    overflow-x: hidden;
    transition: 0.5s;
    z-index: 3;
}

.overlay-content {
    position: relative;
    top: 10%;
    width: 100%;
    text-align: left;
    margin-top: 10px;
    padding-left: 15px;

}

.overlay a {
    padding-left: 35px;
    padding-bottom: 10px;
    text-decoration: none;
    font-size: 20px;
    color: #fafafa;
    display: block;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #d2d2d2;
}

.overlay .closebtn {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 40px;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

.box {
  text-align: center;
  position: relative;
  line-height: 50px;
  background: none;
  height: 50px;
  width: 100%;
}

.box:after {
  background: linear-gradient(to right, #e86000 25%,#e86000 25%, #e86000 50%, #e86000 50%, #e86000 75%, #e86000 75%);
  position: absolute;
  content: '';
  height: 4px;
  right: 0;
  left: 0;
  top: 0;
}

.boxa {
  text-align: center;
  position: relative;
  line-height: 50px;
  background: none;
  height: 0px;
  width: 100%;
  margin-top: 50px;
}

.boxa:after {
  background: linear-gradient(to right, #bcbcbc 25%,#ffcd02 25%, #ffcd02 50%, #e84f47 50%, #e84f47 75%, #65c1ac 75%);
  position: absolute;
  content: '';
  height: 0.5px;
  right: 0;
  left: 0;
  top: 0;
}
.titulo{
    padding: 8px;
    text-decoration: none;
    font-size: 25px;
    color: #fafafa;
    display: block;
    transition: 0.3s;
}
#toggle {
  background-color: rgba(71,71,71,0.4);
  height: 100%;
  min-height: 100%;
  width: 0px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0px;
  z-index: 2;
  -webkit-transition: all .7s ease;
  /*transition: all .7s ease;*/
}

#toggle:hover { cursor: pointer; }

#toggle.closed {
  left: 0px;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: .9;
}

button.accordion {
    background-color: #474747;
    color: black;
    cursor: pointer;
    padding: 10px;
    width: 90%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 14px;
    transition: 0.4s;
}
button.accordion:after {
    content: '\002B';
    color:#e86000;                 
    font-weight: bold;
    float: right;
    margin-left: 5px;
}
button.accordion.active, button.accordion:hover {
    background-color: #7a7a7a;
    COLOR:#FFF;
}
button.accordion.active:after {
    content: "\2796"; 
    color: #F0433D;
}

div.panel {
    padding: 0 16px;
    background-color: f8f8f8;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
    COLOR:#FFF;
}

div.panel.show {
    opacity: 1;
    max-height: 500px;
    
    COLOR:black;
}

</style>
</head>
<body class="bodya">

var nav_is_open = false;

function openNav() {
    document.getElementById("myNav").style.width = "25%";
    $( "#toggle" ).click()
    nav_is_open = true

}

function closeNav() {
    document.getElementById("myNav").style.width = "0%";
 nav_is_open = false
$( "#toggle" ).click()

}

//Botones
$("#bpg").on('click',
 function() {
  $('#botonpg > input').click()
 }
);

$("#bpg1").on('click',
 function() {
  $('#botonpg1 > input').click()
 }
);

$("#bpg2").on('click',
 function() {
  $('#botonpg2 > input').click()
 }
);

$("#bpg3").on('click',
 function() {
  $('#botonpg3 > input').click()
 }
);

$("#bpg4").on('click',
 function() {
  $('#botonpg4 > input').click()
 }
);

$("#bpg5").on('click',
 function() {
  $('#botonpg5 > input').click()
 }
);

$("#bpg6").on('click',
 function() {
  $('#botonpg6 > input').click()
 }
);

$("#bpg7").on('click',
 function() {
  $('#botonpg7> input').click()
 }
);

$( "#toggle" ).on("click", function() {
 console.log(nav_is_open);
  $(".menu").toggleClass("closed");
  $(this).toggleClass("closed");
  $(".content").toggleClass("closed");
  $("#wrapper").toggleClass("closed");
 if(nav_is_open){
 console.log(22);
 closeNav();
  $(".menu").toggleClass("closed");
  $(this).toggleClass("closed");
  $(".content").toggleClass("closed");
  $("#wrapper").toggleClass("closed");
 }
});

</script>

2 comments:

Angela said...: This sidebar works great, but it defaults to being open rather than closed. How would you alter the script to make the sidebar default to a closed position?; January 27, 2021 at 12:18 PM
Jose Leviaguirre said...: Hello Angela,

The menu shows hidden for me the first time. Try putting the js in the textarea by wrapping with <-script-> tag

I recommend using pure CSS and avoid javascript for the menu such as the simple popup post

https://spotfired.blogspot.com/2019/08/simple-popup.html; January 27, 2021 at 3:35 PM

Customer Banners (Ads) - SpiceUp. AX and SpotfireX Disclaimer

Slide menu

2 comments: