Mobile version

[Jachym]

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?

[admin]

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!

[jesus_angeles]

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.

[admin]

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!

[Author]

Posts