Posted by wiliam_steven on March 8, 2012 at 6:58am
Guys, right now i have been design a mobile first display and countering the superfish menu with child is very annoying, is there any trick to overcome this ? I mean i want to make it simple (mobile display is must be simple right?)
thank you
Comments
This article seems like
This article seems like something you may be interested http://css-tricks.com/convert-menu-to-dropdown/
--
http://jmolivas.com/
@jmolivas
Try this
Please try this link: http://ivanchaquea.com/creating-responsive-menu-omega-subthemes.html
Ivan showed you how to make an accordion menu on mobile screen using Omega.
I had this post when googling for related content. So I think it is good to provide some tips.
Symphony Themes
Reponsive Mobile Theme Provider
Bootstrap like menu with Omega 3
Hi,
I am new to Drupal so excuse me if my questions are a bit confusing, if you need more details to help me please let me know.
I am using Drupal 7.17 with Omega 3.x theme.
I am using nice-menus module for my main menu links.
I want the menu to behave like the bootstrap framework menu, which means that on normal/wide layouts it will appear styled on top, and on the narrow layout, it will be a button on the bottom left of the screen. Clicking the button will pop the menu to the right. If you go to Bootstrap link here: http://twitter.github.com/bootstrap/ and change your browser's size to mobile size, you will see the menu on top changes to a 3 lines button and scrolls down when the button is clicked.
I have a few questions:
How do I move the menu from top to bottom if the menu is assigned to a region in the omega sub theme? Do I change the menu's position with css?
How do I change the menu to display just the button and pop to the right when the button is clicked?
Can someone please help?
This tutorial explains how
This tutorial explains how you can create a hard coded menu like the one on Bootstrap for Omega 3.x Subtheme http://www.webmar.com.au/blog/how-create-responsive-mobile-menu-omega-su...
.yourmenuelementclass {
position:absolute;
top:0;
left:30%;
width:70%;
}
Drupal web developer and Search Engine Optimisation consultant at Webmar Design & Development Brisbane, Australia
Google+
I hope this can help
If you want to use CSS;
1, You need to have two regions (May be Branding and Footer first)
2, Create two instances of the main menu (eg using Nice menus) This will also help you in the styling.
3, Use media queries to show one and hide the other where and when you need to. eg
/* Hides the big desktop main menu on smaller devices.*/
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
div#region-menu1 { display: none; }
#zone-branding-wrapper { margin-top: 0; }
}
If you want to use mobile tools and context;
1, You need to have two regions (May be Branding and Footer first)
2, Create two instances of the main menu. (One styled as the )
3, Use the mobile context that ships with mobile tools to trigger off the desktop version of the menu and replace it with a mobile version.
And the fact that you are already using omega, you can also consider using delta layouts.
And for the button with a menu in a popup, have a look at this; http://ivanchaquea.com/creating-responsive-menu-omega-subthemes.html
You can also look at the bamboo theme
The bamboo theme has the piece of functionality you're looking for and i suggest you just look at it and see how they implemented it
http://drupal.org/project/bamboo