Home/ Questions/Q 6572993
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T15:04:33+00:00

I have a JavaScript slide-out menu on my page. As the page is loading

  • 0

I have a JavaScript slide-out menu on my page. As the page is loading the menu shows in the wrong place and as opened (it should be closed by default). It then jumps into the correct position and state once the page has loaded.

I would like the menu to either load last or be in the correct position to start with. I have tried making the style for the menu hidden and the display it as a block on page load with JavaScript but the menu just stays hidden.

<link rel="stylesheet" type="text/css" media="all" href="<css/style.css" />
<link rel="stylesheet" type="text/css" media="all" href="</css/reset.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tabSlideOut.v1.3.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('.slide-out-div').tabSlideOut({
        tabHandle: '.handle',  
        pathToTabImage: 'images/closed_menu.png', //class of the element that will become your tab
        imageHeight: '230px',                     //height of tab image           //Optionally can be set using css
        imageWidth: '62px',                       //width of tab image            //Optionally can be set using css
        tabLocation: 'left',                      //side of screen where tab lives, top, right, bottom, or left
        speed: 600,                               //speed of animation
        action: 'hover',                          //options: 'click' or 'hover', action to trigger animation
        topPos: '270px',                          //position from the top/ use if tabLocation is left or right
        leftPos: '30px',                          //position from left/ use if tabLocation is bottom or top
        fixedPosition: false                      //options: true makes it stick(fixed position) on scroll
    });

$("div.slide-out-div").mouseover(function(){
$('.handle').css("background-image", "url(images/open_menu.png)"); 
  }).mouseout(function(){
      $('.handle').css("background-image", "url(images/closed_menu.png)"); 
  });

$('#sliderimages').cycle({ 
    fx:     'fade', 
    speed:  'fast', 
    timeout: 0, 
    next:   '#next', 
    prev:   '#prev' 
});

 });
</script>

<body onload="javascript:document.getElementByClass('slide-out-div').style.display = 'block';">

and then the CSS

.slide-out-div {
display: none;
padding-left: 0px;
width: 200px;
z-index: 3;
position: relative;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    A possible solution might be this. In the <head> of your html add:

    <script>document.documentElement.className += ' js'</script>

    This will add a “js” class onto the <html> element.

    Next, in your css file style your menu as you would normally, but immediately after, hide it by adding the .js class. For example:

    .menu { /* your normal styling goes here */ }
.js .menu { display: none; }

    This makes sure that your menu is shown in clients that do, for whatever reason, not support JavaScript but hidden in clients that do support JavaScript.

    Next up, adapt your JavaScript file to show the slide-out menu when needed.

    • 0