Mobile version

Home Forums Older releases 0.9.x Mobile version

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1278
    Jachym
    Participant

    Hi, I have a question. I have a horizontal menu just like the one on this page. I also use the vertical mobile version. But the problem is that the vertical version takes up about half of the screen.
    A solution would be to have another item called “Menu”, which would stand above all the rest and upon clicking it, the rest would roll down just like the submenus. But the problem is that I only want this in the vertical display. Is it somehow possible to do this? Or is there any other smart way of making the vertical display of the menu more compact by having an extra button above it to open it?

    #1479
    admin
    Keymaster

    Hi, there is a quick tutorial in the docs how you can add menu toggle button on small screens:

    http://www.smartmenus.org/docs/#menu-toggle-button

    Please take a look and let me know if you have any questions.

    Cheers!

    #1680
    jesus_angeles
    Participant

    First of all, I want to thank the author of the menu codes. Its great.

    This topic above, and the link provided was very useful.

    For me, I did something like below, to customize the toggle button:

    
    	<div class="sm sm-blue" style="width: 100%;">
    		<a id="menu-button" style="width: 100%;"></a>
    	</div>
    	<ul id="main-menu" class="sm sm-blue collapsed"> 
    .
    .
    .
    

    I added width:100% so that the toggle button is of the same length as the menu.

    I also added ‘collapsed’ on the css class for the ul element with id of main-menu, to prevent the blink effect of the menu showing on next page, and then being collapsed (in other words, when a new page is being loaded, the menu is displayed, and then undisplayed. Adding the ‘collapsed’ class makes the menu undisplayed by default).

    Thanks again for this great menu.

    #1681
    admin
    Keymaster

    I also added ‘collapsed’ on the css class for the ul element with id of main-menu, to prevent the blink effect of the menu showing on next page, and then being collapsed (in other words, when a new page is being loaded, the menu is displayed, and then undisplayed. Adding the ‘collapsed’ class makes the menu undisplayed by default).

    Yes, that is indeed a slight issue with the default code sample. I will update the docs now with a fix.

    Thanks very much!

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?