-1

I'm trying to get the sliding menu from this layout http://tympanus.net/codrops/2012/12/11/fullscreen-pageflip-layout/ to be displayed by default upon coming to the website. As it is, some of our clients might not understand how to display the menu. I don't normally work with JavaScript but I am assuming that is the way to fix it... I've tried everything I can think of but I must be missing something. Any help would be greatly appreciated!

Thanks

rubyroux
  • 1
  • 1

2 Answers2

0

I checked the example on codrops

It seems they show the menu by giving the container a left: 240px; property

#container {
  left: 240px;
}

Should make the menu visible on page load.

or give the container the .slideRight class so the plugins functionality stays intact, this means the menu is still closable.

The first solution means its fixed on the open position.

Whatever suits you best ;)

Fabian de Pabian
  • 599
  • 4
  • 20
  • Hi there, I couldn't get it to work with your suggestion but I did this and the slide function is now working how I want it to: `.container { position: relative; **left: 240px;** -webkit-transition: left 0.3s ease-in-out; -o-transition: left 0.3s ease-in-out; transition: left 0.3s ease-in-out; } .slideRight { **left: 0px;** }` The only problem is that the links don't work now! Does anyone know what might be the problem there? Again, here is the in process [site](http://brdprinting.com/NewES/index.html) Thanks! – rubyroux Mar 27 '14 at 13:15
  • I see on your site that the links point to `Anchors`. #hashtags. This is old native browser functionality that scrolls the page to the element with that id. If you want the links to go to actual pages just change the href attribute in the page source to whatever page you want to link. – Fabian de Pabian Mar 31 '14 at 10:02
0

Since Javascript is not your specialty, I will cut the explanation. Here's the easiest solution: that demo page use a <span> to trigger the side-menu when click on it, so you can simply simulate click on when page loading completed.

Put this code at the bottom of your JS code, make sure it runs when page loaded, and change the ID to your trigger element.

$('#tblcontents').trigger('click');

If you don't want to touch the JS code, add class slideRight and add attribute data-open="true" to your side-menu container, this will work either.

nightire
  • 1,371
  • 2
  • 11
  • 21
  • Thanks for your answer. I tried to add the JS code (to the html) and it seems to be working except that you can't close the menu anymore and non of the menu links work... I'm not sure if I wrote the JS incorrectly or if I need to add something else now. This is the in process site: [link](http://brdprinting.com/NewES/index.html) – rubyroux Mar 25 '14 at 17:38