Need help with CSS ONLY Mobile Menus please...

[Coleenh]

Hi I'm new here and could really use some help.

I've looked high and low over the Internet for a CSS Only Mobile menu that is 3 levels deep. I.e., a vertical menu that allows for the Main Menu Item, one level below that, and One sub level to that! Or:

Menu Item

Menu Category


Menu Category Article

I found some code from Stu Nichols (http://www.cssplay.co.uk/menus/cssplay-responsive-click-droplist-menu-v2.html) (which is where I found the link to the Dynamic Drive website and forums) but it includes some javascript and I honestly can't quite make heads or tails of the complete source code. So I came to the Dynamic Drive full screen menu (http://www.dynamicdrive.com/style/csslibrary/item/mobile_full_screen_expand_menu/).

And I need some help. Please. First, on the Dynamic Drive menu - it includes a snippet of javascript - which would be fine if I understood javascrip even a little bit, but since I don't, can anyone tell me where to include the javascript included in that menu? And second, can the menu be adapted to have three levels? Like the one I linked to from Stu Nichols above...

[ddadmin]

The JavaScript inside Full Screen Menu (http://www.dynamicdrive.com/style/csslibrary/item/mobile_full_screen_expand_menu/) should just be added to your page as it relative to the CSS. There are two code chunks you need to add to your page- the "CSS" portion goes into the HEAD section of your page (which includes the JavaScript code), and the "HTML" section in the BODY section of your page.

As far as changing the menu to have multiple levels, it's possible, though with extra real estate offered by a full screen menu, you're better off just flatting the menu and showing everything all at once inside it.

[Coleenh]

Thanks for the response, it is very appreciated.

Okay, I get the CSS and HTML code and understand where the CSS link to a style sheet goes and where the HTML goes (I do know both CSS and HTML fairly well, I just don't know Javascropt) but this is the snippet of code I don't know where to put:

expandfullscreenmenu(action)

The problem with inserting the entire 3-level menu into a a full screen menu - it wouldn't fit. My website has over 190 pages! My main menu has 11 Top level items. Many of them have not just one, but two levels below that. In other words, my example expanded would look like this:

Menu Item1

Menu1 Category1


Menu1 Category1 Article1


Menu1 Category1 Article2


Menu1 Category1 Article3

Menu1 Category2


Menu1 Category2 Article1


Menu1 Category2 Article2


Menu1 Category2 Article3

Menu1 Category3


Menu1 Category3 Article1


Menu1 Category3 Article2


Menu1 Category3 Article3
Menu Item2

Menu2 Category1


Menu2 Category1 Article1


Menu2 Category1 Article2


Menu2 Category1 Article3

Menu2 Category2


Menu2 Category2 Article1


Menu2 Category2 Article2


Menu2 Category2 Article3

And so on, for 11 different main menu items! That many menu items will not fit on one vertical menu! There-in lies my dilemma. (sigh) I realize that's a lot of info, but the website covers a LOT of information.

Any suggestions?

[Coleenh]

I figured out the javascript snippet (I feel kind-of stupid now, but it was way more simple than I thought!) :o)

However, I'm getting a weird effect. When I size my screen down to what the width of a mobile device would be (unfortunately I don't have a "smart phone" to be able to test this on) but the top level menu item disappears - it moves up out of the view of the menu. Here's a link to my "test" full page menu TestDDVerticalMenu (http://www.aheartbreakingchoice.com/TestMobileMenus/DynamicCSSMenu.htm) Note: I do not have this set up to actually link to the website as of now, once I get it working correctly I will add the actual website to it so that when you click on a link it will actually work ;)
Thanks for any help on this weird issue...

[ddadmin]

However, I'm getting a weird effect. When I size my screen down to what the width of a mobile device would be (unfortunately I don't have a "smart phone" to be able to test this on) but the top level menu item disappears

Ah this is a bug of the menu itself. Inside its CSS, try adding the line in red to the existing CSS code block:


nav#expand-fullpagemenu ul{
list-style: none;
margin: 0;
padding: 0;
position: relative;
max-height: 100%;
top: 50%; /* center UL vertically inside nav */
-webkit-transform: translateY(-50%); /* center UL vertically inside nav */
transform: translateY(-50%);
font: bold 2em 'Bitter', sans-serif; /* use google font inside nav UL */
}

[Coleenh]

Perfect! Thank you SO much!

Now I just have to figure out how to make each of those menu items have an "accordion" (and some of them will need two levels!) but at least now I am looking at a working mobile menu!

If/when I get the code working, I'll post it here so others will have it to use. Thanks again for the help. If you have any suggestions for the accordion code, I'd sure love the assistance ;)

[Coleenh]

Hmmm, I was just testing in other browsers (I try to test using Firefox, Chrome, IE8 and Opera) and in Safari, which I admit I have an old version - I think it's 5.1x, but it doesn't work in Safari. The icon shows up just fine, but when you click on it the menu does not open. Any suggestions?

[ddadmin]

Which accordion menu are you trying to integrate with Full screen menu? You mentioned 5.1x?

[Coleenh]

Hi DD - thanks for responding. It's the one I linked to above - but here is the URL:

http://www.dynamicdrive.com/style/csslibrary/item/mobile_full_screen_expand_menu/

I have it working perfectly in Firefox, IE8, Opera, Chrome - but in Safari (I think it's v5.1) it doesn't even show up :confused: Maybe it's the old version of Safari - but since I'm not a Mac user, I have never updated. If anyone has a more current version of Safari and it works, then I'll update, but truly - don't we want to program for some (not all, but some) of the older browsers? Any help is much appreciated. :o

[ddadmin]

Ah ok you're referring to Safari 5.1 (I thought it was the version of an accordion menu you're adding inside the full screen menu). I see the issue. It seems like older Safari has issues animating the "visibility" property. Inside the following two selectors:


nav#expand-fullpagemenu{

}

and


input[type="checkbox"]#togglebox:checked ~ nav#expand-fullpagemenu{ /* nav state when corresponding checkbox is checked */


}

Try removing the property "visibility: hidden" and "visibility: visible" from the two selectors, respectively.

[ddadmin]

Or better yet, try the updated CSS at http://www.dynamicdrive.com/style/csslibrary/item/mobile_full_screen_expand_menu/ It retains the use of the "visibility" property, which may be needed depending on the z-index ordering of elements on your page, but overcomes the Safari 5.1x bug.

[Coleenh]

Thanks for the responses DD and ramarjun. DD, I am currently working on this and will post up the results when I'm done. :) Ramarjun, unfortunately I don't know a thing about jscript or jquery, and have to rely on pre-written scripts, or on .css and HTML alone. I would rather use .css and HTML because I am very familiar with them. If you meant to attach a jscript file, it did not come through. Thanks!