How do I do a dropdown menu that works only in mobile sizes in CSS3?


(Lawrence Standifer Stevens) #1

The first 10 persons who answer my question will be allowed to set my hair on fire! So, go for it and good luck.

The question really speaks for itself. I just wanted to post a question to test whether or not there are any active participants in this “community.” In several posts, including the one this one replaces, I’ve not had but ONE person respond out of a couple hundred views. And that was a developer offering a free stack for coming back into the RW fold.

I’m not really sure I understand why, but the difference between the Rapidweaver community today and the Rapidweaver community from several years ago is startling. Back then, being on the forums was almost a real-time experience, somewhat like using a text messaging client today. Now? Seems this wheel is not squeaking loud enough to get any attention.

Don’t misunderstand me; I’m not bitter or complaining or whining about it. . . I just don’t understand. What does one have to do in order to have a simple question answered on the forum? I’ve looked over all my previous posts and I think that there’s nothing in them that could be off-putting or that could be misinterpreted, though I’m open to being corrected. So. . . I’m at a loss.

This offer of allowing the first ten respondents to this question to set fire to my hair is subject to local laws and fire regulations. Void where prohibited, taxed, titled or licensed. Must be 18 to enter and you have to be THISSSS tall to ride this ride. Thank you and good night.

LSS


(Brad Halstead) #2

Hi @TangoArtist, maybe nobody knows the answer and is just viewing the question. Maybe there are only very few people that actually hand code (Mostly I assume being developers). From what I have seen RapidWeaver users are Stacks users and Theme users.

So, my answer to your query would be, have you done a google search? Have you perused the many CSS sites and asked for direct code on their forums?

The answer you previously received about a stack is likely the best solution that anyone knows of.

Just thoughts I am throwing out there, not interested in burning your hair… lol

But seriously, do try Searching CSS tutorial websites that have pre-made code, I am confident you will find something :smile:

Brad


(Will Woodgate) #3

I’m having a hard job trying to visualise what a dropdown menu would look like on a mobile device. I suspect others are too, in the absence of a link to an example website or a mockup. Normally a dropdown menu is a horizontal row of parent navigation links, and when you mouseover them a panel is shown, containing the child (subpage) links. This instantly presents two potential issues on devices like smartphones:

  1. A line of horizontal navigation links typically consumes quite a lot of horizontal space; often exceeding the width of the screen. Having links wrap and reflow on smaller screens is certainly less than desirable. It would certainly make for a confusing UX. I know I wouldn’t accept it.
  2. Most smartphones and tablets are without support for mouse input and hover gestures, therefore making dropdown menus less than ideal on touch devices. They’ll still work to some degree, but might not be as pleasant to use.

Perhaps what you are really asking for instead is an accordion style menu, whereby you click or tap subheadings and panels slide open? This is exactly how most responsive RapidWeaver themes typically already handle navigation - a dropdown menu on wider screen widths and a toggle or accordion menu on smaller widths. It might be worth investing into some newer themes and catching up with the latest trends, if your current theme is not responsive or mobile optimised!

If you are custom building your own menu using Stacks, then you will typically want a stack like UsefulStack to conditionally do something within a range of screen sizes and then simply drag and drop your desired menu or accordion stack within; for which there are many available. A search of StackCentral or Google will present many options.

A pure CSS3 menu is hard to find; and you might otherwise have to sacrifice some functionality like animation effects or support on touch devices. Most dropdown and accordion menu structures that exist in modern websites and themes are a combination of both CSS and Javascript.


(Lawrence Standifer Stevens) #4

Hello Turtle (Like that User ID!)

Thanks for the response. And I appreciate you self-disqualifying yourself in the hair-burning tournament!

I have, indeed, been searching for a suitable solution on Code Canyon and other such sites. I’m not really finding solutions that work very well for me. Mostly from an aesthetic point of view because the functionality seems to be there for the most part.

I do appreciate the suggestions.

LSS


(Lawrence Standifer Stevens) #5

Will, at your suggestion, I’ve created a mockup and it’s available on a temporary page. It displays the two states that should make it clear what I’m after: Hidden and Displayed. UPDATE: I did a quick and dirty video of the animation that may help.

I tried finding the proper term for what I wanted and, evidently, I settled on the term that makes sense to me but was, in the end, a misuse of the term. My apologies for the confusion. I hope that this mockup provides enough detail to provide a point in the right direction. I believe you’re right about the accordion menu. I was just afraid that, too, was not the proper term.

I’m thinking that some subtle animation (ease in/out, fade, etc.) will also help to make the appearance/disappearance of the menu less jarring and a more natural UX. I also think a scrolling submenu (under All Access) of all the SRO Shows available would help with random navigation. I plan to use SuperFlex3 for sequential navigation between shows. They assure me that it would work perfectly for this purpose. UPDATE: Turns out they were wrong. Going with Complete Carousel for now until I can find something that works more smoothly.

I’ve been looking at (and have purchased) some of the better looking more modern themes. None, however, seem to be as flexible or provide me with the look and feel that Foundation does.

Last night, I downloaded UsefulStack to investigate its “usefulness.” (Sorry. NPI.) Let me take a look at that and see if that works to recreate what’s in my mind’s eye.

After looking through several dozen CSS3 and CSS+JS menus, I think your suggestion about UsefulStack may be the best solution.

Thanks for the response, Will. I guess this makes it official: You are Numero Uno in the Hair-Burning Tournament. Gentlemen, light your matches! :smile:

Lawrence Standifer Stevens


(Stuart) #6

Have you seen this one from CodeCanyon?
http://codecanyon.net/item/css3-responsive-mega-drop-down-menu/full_screen_preview/10690936

Launch the preview then resize your browser to force it to the responsive mode.
I’m sure that some custom CSS would get the menu items styled the way your demo indicated.


(Will Woodgate) #7

I’m on the road at the moment so can’t look in detail. But the menu in the video you show is frequently referred to as a toggle or accordion style menu. It’s a standard feature in most responsive RapidWeaver themes and is what many designers use already to display the RapidWeaver generated navigation links on smartphones and smaller tablet devices. Most examples I’ve seen slide open and close with subtle animation effects and support subpages too.


(Lawrence Standifer Stevens) #8

Kryten,

This looks like it may very well work for me. Thank you very much! I’ll let you know how it goes as soon as I can.

LSS