How to create a responsive website menu?

We’re looking to create a responsive menu that adjusts from a full size horizontal menu (with 6 items) to a dynamic single menu (not a select box, but a dynamic menu).
EG:
full size menu: home, services, products, about, contact, etc
The phone menu would have “Menu” and everything would be a dynamic drop down from that.
Is this built in, any templates out there and/or is this doable?

The Edge Commons library will get you headed down the right path, in terms of different layouts for different devices.
http://tv.adobe.com/watch/learn-edge-animate/flexible-layouts-using-adobe-edge-animate-and -the-edge-commons-library/
https://github.com/simonwidjaja/EdgeCommons
You could also build a menu for desktop/mobile. Then check browser size with this:
$(window).width();
or use a library like modernizr to check capabilitie (touch for example): http://www.modernizr.com/
You could then use jQuery show/hide to display the appropriate menu.

Similar Messages

How to create a cursor in menu item???

Hi,
How to create a cursor in menu item??? and process data inside the SQL Editor of Menu Item>????
Regards,

ok, you mean: When the form is starting you want to disable some menues.
create a WHEN-NEW-FORM-INSTANCE-trigger in your form and then do the loop over the menu-item
what is ENTITIES? The name of a table ?

New to CS6 Dreamweaver, creating a "Responsive Website" having trouble getting fluid divs to behave

Trying to create a "Responsive Website" and I'm having trouble getting my fluid divs that I create to "break" their link from the "Boilerplate" .
I'm using a "Fluid Grid layout Div" to create a section that has a transparent background of rgba(0,0,0,0.3) and that's perfect, then I add two more "Fluid Grid layout Div's" inside the transparent one to create a 2-column part in the section and that's where the trouble is.
None of the "formatting" I've set for the text in my ID's or Classes are being used - just reverts to what's in the "Boilerplate" i.e. "p,h2,h3" and I can't get it to "break" it's link the "Boilerplate" so I can apply my formatting.
I have been able to select my formatting at times but it is ignored and uses what's in the "Boilerplate".
Kept trying different ways to get it to work and now I've so many of both the ID's and Class's that their not all showing up as an option to be able select them.
I'm missing something basic and after two days it still escapes me.
Please somebody, tell me what I'm missing.
Frustrated

FluidGrid Layouts are not easy to learn. You need a good grasp of fundamental RWD concepts including CSS Media Queries. Keep your layout simple and be patient. The first time I used FGLayouts, I had to start over 9 times before I got acceptable results.
Responsive Web Design
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Introduction to CSS Media Queries
http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html
CS6 Fluid Grid layouts (17 min video)
http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/
Best advice for beginners:
Build Mobile Layout first. Everything else is based on this primary layout. Then build Tablet layout and finally Desktop. Don't worry about content. Just build the layout & save often during development.
DO NOT TAMPER with the boilerplate.css or FGLayout.css code. Even experts can break the layout in a hurry. Use a separate external style sheet for content and typography styles.
If you're using CS6 ver 12.0, you cannot nest divs inside other divs. Everything must be inside the .gridContainer like this:
<body>
    <div class="gridContainer">
          <div> </div>
          <div> </div>
          <div> </div>
    </div>
</body>
If you care to post a link to your online test page, we can take a look and possibly offer more suggestions.
Nancy O.

How to create a project's Menu in PeopleSoft left hand Menu Navigation ?

Folks,
Hello. My PeopleSoft project has 3 items (item1, item2 and item3). Each item has 5 components (Component1, Component2, Component3, Component4 and Component5).
Currently, I can acces each component by type in the URL in Browser as follows:
http://127.0.0.1/psp/ps/NodeName/PortalName/c/MenuName.ComponentName.GBL
But I want my project to appear in the left hand "Menu" navigation after we sign on PeopleSoft. My project Menu will look like a hierarchical tree. When the user click on it, the user can see all the project's items and components and link to a component directly. But I don't understand how to do it.
Do any folks understand how to create a project's Menu in PeopleSoft left hand Menu navigation ?
Thanks in advance.
:

>
>
I have registered each component using Registration Wizard in Application Designer. Since each Menu holds a Component, the Menu is also registered while registering its Component. So far, I can access each component online using the URL: http://127.0.0.1/psp/ps/NodeName/PortalName/c/MenuName.ComponentName.GBL
But I want to create a Menu for my project as a hierachical tree ( Project -> Item1 -> Component1, Compoent2, ...),
and I want the project Menu appears in PeopleSoft left hand Menu navigation so that a user can simply click on it to access a component and don't need to type in the above URL. Please answer me 2 questions:
First, how to make the project Menu appear in PeopleSoft left hand Menu navigation ? I am still not sure what you are trying to do(It is surprising that you registered the component and still dont have it in the main navigation; did you run the portal security sync process?? ).
If it is all a matter of having a hierarchical structure, then you can create folders and subfolders and register each item accordingly(into different folders and subfolders as you want)
Second, if need to register each Menu seperately again, how to do it ?Delete entries for content references that you added earlier while registering(by navigating to portal), as well as the entry from permission lists. After that you should be able to register again.

Possibility to create full responsive websites with new features

Hi guys!
I think that Muse would be incredible and very professional if the develop team include the possibility to create full responsive websites, with no more problem even in the height of a site, expecially if you wanna create an horizontal scroll website.
Another great fature is the Bootstrap 3, that could be used in some layout and templates... Add more widget, like in a CMS and obviously it would be great if you can use very full-responsive icons.
What do you think about it, guys?

Fully responsive would be great.
I love the new updates from Muse, especially the library, state buttons, and ability to create mega menus.... However, I've been building more of my websites with Wordpress due to the lack of Responsive design. If Muse adds that capability, along with at least basic additions to the CMS (clients being able to add hyperlinks, link documents, modify H1,2,p text, etc), I'm likelly to go all in.

How to create / edit a website using SharePoint Designer 2013

How to EDIT a website created by Frontpage using SharePoint Designer 2013 ?
How to CREATE a new website using SharePoint Designer 2013 ?

You can edit any sharepoint site using designer not any other site.
To create a new website using designer follow below:
To create a new site, click the File tab, choose Sites, and perform one of the following:
Click New Blank Web Site to create a blank, empty SharePoint site.
Click Add Subsite to My Site to create a new site under your My Site.
Under Site Templates select a template to create a new site based on a SharePoint template.
http://office.microsoft.com/en-in/sharepoint-designer-help/get-started-with-sharepoint-designer-2010-HA010370548.aspx#BMopensites

How can I create a responsive website based in Adobe Muse?

I already created a website with Adobe Muse but I just find out that it doesn't support Responsive Websites. What can I do now? Is there a way to make my website responsive or do I have to redesign it?

Hi there! I`d recommend you to try create website from a ready-made template rather than from very start-up. It`s much easier. I like website templates based upon Joomla http://www.templatemonster.com/joomla-templates.php . Feel free to address it and convience yourself it`s as simple as rolling off a log. Good luck!

How to create Dialog Module[Screen,Menu,object navigator]

Dear All,
kindly give me. How to create Dialog Module[Object Navigator,Screen,Menu,] steps with code.

please see this link it is with screen shot from the scrach ...
<b>creating struture
creating screen
writing logic
table control
creating tcode</b> ...etc
<a href="http://">http://www.sapdevelopment.co.uk/dialog/tabcontrol/tc_basic.htm</a>
reward points if it is usefull ...
Girish

How to create a scrolling website?

Hi
I have just got started with Adobe Muse and I have a few questions.
I would like to create a website like the following: http://www.kalacafe.com/
However im having some trouble with finding the features I need in Muse.
I have created a simple spash page but I would like to know the next step.
How can I create a similar website where the user scrolls and the Navigation Bar slides in?

Here's a thread that should help in achieving that effect using Muse's Scroll motion feature - http://forums.adobe.com/message/5615399.
Thanks,
Vinayak

How to create a Pop-up menu for an Applet

I need to create a Pop-up menu that works like this:
When the user move his mouse over the applet, the menu will pop up, extending beyond the bounds of the applet.
In other words: The applet will display only the menu headings - a mouse-over should cascade a menu beneath the heading - once again: beyond the bounds of the applet.
(Hopefully, the end result will look and work pretty much like a DHTML menu that uses <div>'s.)
I thought of popping up a JFrame to act as the menu - however, the JFrame has its own title bar.
Any ideas!?

OK - I tried using a JMenuBar - and it does cascade out of the Applet box. The question is:
How do I close the menu without clicking on the Applet box? - i.e. if the user clicks on the web-page, or simply waits a second or 2, the menu should collapse?
Any ideas?

How to create a rollover popup menu from a graphic?

How to create a rollover side popup side menu from a graphic such as the one in this link when you rollover the Gallery of Projects button. http://www.waynethehandyman.com/what.htm Thanks.

Yes. Tried to replicate it. Didn't work. Will try again.
Thanks.

How to create a pop up menu or option in labview?

Hi to all,
Just want to ask, how do u create a pop up menu? when you click on a certain button, another view or option would appear like series of texts or instructions. thanks again. thanks

jmvrd wrote:
Also, how can i create a play button? a button that will run the whole program instead pressing the run mode itself. thanks
You don't actually create a play button. You need to create an architecture that has your program idle until something happens. A while loop with an event structure within it will do that. See the "Login dialog" example that ships with LabVIEW for an example of how to use an event structure. Depending on how complex you need your program to be, you may need to look into using a state machine, master-slave, or producer-consumer architecture.

How to create a revolving website list, like this...

Hi there, Im new to flash, but the main reason I got it was so I could create an object to put on a webpage. I want to be able to create a revolving website list, with pictures of the sites in the list, like on the main page of this site: http://www.tamberlow.com/
Please can somebody help me? Or point me in the right direction
Thanks for your time,
Jackie xxx

that's a (not very well-done) carousel. you can search for: flash <your actionscript version> carousel.
most are horizontal but it's not much different to make one like the site you referenced.

How to create a PJC custom menu in forms

Hello
I want to make my own menu using Java and replace the default forms menu with it.
lets say i'll make in java a JMenubar with menus inside it
how to place it as a menu of my form ?
is it possible ?
10x

ok i made a Jmenubar with some menus and i placed it into a bean area and it works, BUT :
when the bean area is in the bottom of the canvas the menus are showing just fine, but when i place the bean area in the top of the canvas the menus dont show (the popup) when i click the menubar. why is that ?
i'm not forms developer i saw forms 2 days ago for the first time, i'm java developer and the task is given to me by my boss - the aim of it is to make a butiful looking menu that is DYNAMIC , i have no idea if a forms meny can be made dynamic, but thats my boss i cant convince him that his idea is bad :)) moreover i think i'm realy close.

How to create a responsive menu using menu module V2

Hi Guys
Just wanted to know if there is an article on how to make the module_menu v2 responsive?
I don't have a problem making it vertical for mobile phones but I don't know how to change the hover state to click state to expand sub navigation items. This is because mobile devices don't have an Hover state and require click.
http://forums.adobe.com/docs/DOC-1903
Cheers
Mica

Hey Mica,
A ul li menu with no widths will always confirm to the container but will form into two lines etc. If you look at responsive designs, when it comes to the smaller device what you actually get instead is a button which does a dropdown menu instead in most cases.
This sort of thing is a combination of javascript and media queries.
But for a simple form you just loose the float on the li menu items when at a certain window width (through your media queries) and form a nice one after the other menu. Often in these you also hide all sub menus to keep it simple.

How to create a responsive website menu?

Similar Messages

Maybe you are looking for