Start a new discussion

To start a new discussion please visit the discussions section of the GitHub home page of the project.

Discussions on GitHub

You can also search our old self-hosted forums for any useful information below but please note that posting new content here is not possible any more.

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)
  • The forum ‘0.9.x’ is closed to new topics and replies.