How to make animated drop down menu responsive?

Hi
I've made an animated drop down menu in Edge Animate. It works fine at 945px wide with drop downs coming from 4 of the links. When the window is resized to 700px I want to reduce the 8 top links down to 4 and have longer drop downs and the same again at 400px wide. How do I do this as Edge has no media queries. do I use symbols?
Thanks.

Hi garyt88,
Found something that could help although I have to admit that I have not tried it myself.
Adobe Edge HTML5 Interactive Drop-Down Menu Tutorial - YouTube
Thanks,
Preran

Similar Messages

How to make chooser drop down menu, Example i want choices 1 or 2 or 3 from the drop down menu or Location , Egypt , USA , Canda

how to make chooser drop down menu, Example i want choices 1 or 2 or 3 from the drop down menu or Location , Egypt , USA , Canda

Hello,
Where do you want to insert it in Muse. Do you want to add this in Muse Form widget then you can use the widget mentioned in the link below.
Forms+ Bundle Widget – Widgets.Mu
If you want to insert it anywhere else in Muse and if you have the HTML codes for that then you can insert its codes in page from Object > Insert HTML.
You may also require to use some java scripts to make them working as expected.
How to Make JavaScript Dropdown List - YouTube
Regards
Vivek

How to make dynamical drop down menu?

I am trying to make a drop down menu which is dynamical in dreamweaver? is there a way to do that? i am not good at programming.

Here are links to a couple of tutorials for this:
http://www.roscripts.com/Building_a_dynamic_drop_down_menu-216.html
http://www.finalwebsites.com/tutorials/dynamic-navigation-list.php

I need help. how to make vertical drop down menu

I need help. I want on my site to make navigation as such on this site http://www.website24.eu/einstieg/. if you can help me and explain how?

like this http://www.jqueryrain.com/?3khGEoMY

How to make each drop down a different color?

I'm looking to do a menu similar to this: http://www.cca.edu/ and I can't figure out how to make each drop down a different color? Any help or resources greatly appreciated!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style>
ul.MenuBarHorizontal li#yellow ul a,
ul.MenuBarHorizontal li#yellow a:hover, ul.MenuBarHorizontal li#yellow a:focus,
ul.MenuBarHorizonta li#yellow a.MenuBarItemHover, ul.MenuBarHorizontal li#yellow a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal li#yellow a.MenuBarSubmenuVisible {
    background-color: #FF6;
    color: #333;
ul.MenuBarHorizontal li#yellow ul a:hover, ul.MenuBarHorizontal li#yellow ul a:focus,
ul.MenuBarHorizonta li#yellow ul a.MenuBarItemHover, ul.MenuBarHorizontal li#yellow ul a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal li#yellow ul a.MenuBarSubmenuVisible {
    background-color: #FF0;
    color: #333;
ul.MenuBarHorizontal li#red ul a,
ul.MenuBarHorizontal li#red a:hover, ul.MenuBarHorizontal li#red a:focus,
ul.MenuBarHorizonta li#red a.MenuBarItemHover, ul.MenuBarHorizontal li#red a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal li#red a.MenuBarSubmenuVisible {
    background-color: #F30;
    color: #333;
ul.MenuBarHorizontal li#red ul a:hover, ul.MenuBarHorizontal li#red ul a:focus,
ul.MenuBarHorizonta li#red ul a.MenuBarItemHover, ul.MenuBarHorizontal li#red ul a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal li#red ul a.MenuBarSubmenuVisible {
    background-color: #F00;
    color: #333;
ul.MenuBarHorizontal li#blue ul a,
ul.MenuBarHorizontal li#blue a:hover, ul.MenuBarHorizontal li#blue a:focus,
ul.MenuBarHorizonta li#blue a.MenuBarItemHover, ul.MenuBarHorizontal li#blue a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal li#blue a.MenuBarSubmenuVisible {
    background-color: #6CC;
    color: #333;
ul.MenuBarHorizontal li#blue ul a:hover, ul.MenuBarHorizontal li#blue ul a:focus,
ul.MenuBarHorizonta li#blue ul a.MenuBarItemHover, ul.MenuBarHorizontal li#blue ul a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal li#blue ul a.MenuBarSubmenuVisible {
    background-color: #00F;
    color: #333;
ul.MenuBarHorizontal li#pink ul a,
ul.MenuBarHorizontal li#pink a:hover, ul.MenuBarHorizontal li#pink a:focus,
ul.MenuBarHorizonta li#pink a.MenuBarItemHover, ul.MenuBarHorizontal li#pink a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal li#pink a.MenuBarSubmenuVisible {
    background-color: #F99;
    color: #333;
ul.MenuBarHorizontal li#pink ul a:hover, ul.MenuBarHorizontal li#pink ul a:focus,
ul.MenuBarHorizonta li#pink ul a.MenuBarItemHover, ul.MenuBarHorizontal li#pink ul a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal li#pink ul a.MenuBarSubmenuVisible {
    background-color: #F36;
    color: #333;
</style>
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li id="yellow"><a class="MenuBarItemSubmenu" href="#">Item 1</a>
    <ul>
      <li><a href="#">Item 1.1</a></li>
      <li><a href="#">Item 1.2</a></li>
      <li><a href="#">Item 1.3</a></li>
    </ul>
</li>
<li id="red"><a href="#">Item 2</a></li>
<li id="blue"><a class="MenuBarItemSubmenu" href="#">Item 3</a>
    <ul>
      <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
        <ul>
          <li><a href="#">Item 3.1.1</a></li>
          <li><a href="#">Item 3.1.2</a></li>
        </ul>
      </li>
      <li><a href="#">Item 3.2</a></li>
      <li><a href="#">Item 3.3</a></li>
    </ul>
</li>
<li id="pink"><a href="#">Item 4</a></li>
</ul>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Gramps

How to add a drop-down menu to a rollover image?

Hi,
I guess my title says it all... I was wondering how to add a drop-down menu to a rollover image? I know that there's the sprymenu, but I need to have my own rollover images.
Thanks,
Kazem

Frankly, ANY link can offer a drop down.
Take a look at this turorial.
That will get you your dropdown menu. So you have that.
Now, on your top menu (or any level where you want to have an image instead of text do this:
(I am copying the HTML structure in the tutorial here):
<nav>
          <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Tutorials</a>
                              <ul>
                                        <li><a href="#">Photoshop</a></li>
                                        <li><a href="#">Illustrator</a></li>
                                        <li><a href="#">Web Design</a></li>
                              </ul>
                    </li>
                    <li><a href="#">Articles</a>
                              <ul>
                                        <li><a href="#">Web Design</a></li>
                                        <li><a href="#">User Experience</a></li>
                              </ul>
                    </li>
                    <li><a href="#">Inspiration</a></li>
          </ul>
</nav>
Now, let's pretend you want an image instead of the word "Articles." You'll want the image to be sized appropriately, and if you look at the CSS, you'll see it's 112 pixels wide by 52 high. If your image is approximately those dimensions, you're all set.
So instead of "articles" you insert your image.
Done.

Can you make a drop down menu in muse

can you make a drop down menu in muse

Yes, you can create main menu and sub menu items , with default menu the sub pages will auto create sub menu items (you should select all pages from menu type option).
These videos will help you :
https://www.youtube.com/watch?v=hncVlzYuuvQ
https://www.youtube.com/watch?v=kziCEqQpF9s
Thanks,
Sanjit

How can I do an animated drop down menu in Adobe Edge Animate?

Hi everyone! well, it's easy to create a whole animated (fade color and opacity) navigation buttons menu in Edge Animate with rollover and rollout actions, but thing get too messy when try to make an animated drop down menú. How can I do this process more easy?
Thanks!
Néss.

One useful video : http://www.adobe-edge-forum.com/2012/01/adobe-edge-html5-interactive-drop-down-menu-tutori al/
But glad to know it worked for you.
Thanks and Regards,
Sudeshna Sarkar

How do I make a drop down menu selection show up in another web page?

What I am trying to accomplish is this. I have a page with various drop down menu selections that I want to transfer the selection to a secured web page. What happens now is once the selection is made it goes to the secure page but then the user has to again select the choice again. Is there way to keep the selection chosen in the linked page?

You can set the "selected" value in the second page based on the input from the first page.
Ignor the language referance used below for the example and simple use the concept with your desired language.
Second Page form:
<form id="form1" name="form1" method="post" action="">
<select name="testing" id="testing">
<option value="Value 1" <% if ( Passed values == Value 1 ) { %>selected="selected"<% } %>>Lable 1</option>
<option value="Value 2" <% if ( Passed values == Value 2 ) { %>selected="selected"<% } %>>Lable 2</option>
</select>

How to make three drop downs in DW and link with paypal?

I have this tiresome question to which I have been looking for a solution. The solution is easy but somehow my brain synapses don't work there.
DreamWeaver + Paypal.
My form has 3 dropdowns
First is primary color - red , green etc- Visitor chooses one.
Then How does he get linked to the second dropdown form- Secondary colors- red blue green etc-
After he chooses the secondary color and Then he needs to choose the third dropdown- size -
AFTER that he presses the paypal button.
Now please can some altruistic soul give me a solution of can this be done through Dw? (3 forms+paypal)
What would you suggest- radio buttons or drop down menu?
Can all three forms be linked to paypal in one go itself? (primary color+ secondary color + size?)
Naturally I will have to make paypal forms for each color, but is there any easy way?
Also is there any way in which pressing on a button brings up an image?
If you have been patient enough to read this and can help me, I'll be so indebted to you!
Thanks,

This is called 'Dependant Dropdown' or 'Cascading Dropdown'.
There's a beautiful jQuery plugin you can use to get this done.
Download plugin here: https://github.com/dnasir/jquery-cascading-dropdown
Demo(s) here: http://dnasir.com/github/jquery-cascading-dropdown/demo.html

Drop Down Menu - Response Time

I am experiencing a slow response time with the drop down menus in FCP 7.0.3.
I experienced this with my old Mac Pro Intel (1st Gen.) but now I have a new 8-core Mac Pro (1 month old) and have the same delay.
I click in the window I need to activate then I click on a drop down menu and it seems like it may take up to 5 seconds for the menu to open. Changing tools with the keyboard or tool bar is no problem.
Any idea how can I solve this?
Thanks!
Tony

Are you running any other programs at the same time? Do you have any OS "enhancements" installed?
Try disconnecting from the interenet by either unplugging ethernet or turning the airport off.
Try deleting fcp preferences
https://discussions.apple.com/docs/DOC-2491
and here are some more troubleshooting tips
https://discussions.apple.com/docs/DOC-2591

How to add my drop down menu to my website

I have been following a dreamweaver video to create a drop down menu with pure css which has turned out great. My problem is when you follow a video I followed the instructions and started a new html and then attached the css styles to the new html called "dropdownmenu". But as I don't know how to put it in my index page. I understand that css is the rules but how to I get it in my website. Most prob an easy one for all you experts out there!
I hope someone will help me please.
Thanks Karen
Oh im useing cs5.5

Thank you very much for taking you time to answer me. I have managed to do this but I get a bit confused with the files so I hope you can just help on this one!
I went to duplicate the dropdown.css file and put it in my css folder but the file was already there, also a link was in the css file altough it did not have "media=screen". I duplicated the dropdown.css and put it in my dropdown.html, not sure if that is right. This is how I have set out my files.                                                           Folder - dropdown
                                                                                                           -navMenu.html
                                                                                                           -dropdown.css
                                                                                   Folder - css
                                                                                                          - dropdown.css
                                                                                                          -styles.css
My index page link between the "head" is <link href="css/styles.css" rel="stylesheet" type="text/css" /> ----so am I right in saying that the styles.css is determing the index page at mo and any future pages if I want.
And the link from the navMenu.html is <link href="../css/dropdown.css" rel="stylesheet" type="text/css" />------and this is getting the information from the dropdown css.
If I am correct do I need both copies of the dropdown.css? I hope this is nice and clear for you!
Once again thank you very much for your help.... it is very much appreciated! I spend most of my time learning from youtube and don't really like to bother people but after an hour of scratching my head I gave up!

Animated drop-down menu buttons won't respond onRelease

I created a drop-down menu movie clip. Within it are multiple
buttons which change their alpha values. I'm having an impossible
time of getting the buttons to respond to an onRelease from the
maintimeline.
for instance:
stop();
_root.menu_mc.print_btn.onRelease = function(){
gotoAndStop("print1");
_root.menu_mc.illustration_btn.onRelease = function(){
gotoAndStop("illustration1");
I can't place any code directly on the buttons because later
in the timeline the actionscript needs to change for the same
buttons:
stop();
_root.menu_mc.print_btn.onRelease = function(){
gotoAndStop("print2");
_root.menu_mc.illustration_btn.onRelease = function(){
gotoAndStop("illustration2");
}

i don't think so. Sorry for my ignorance, but the code you
see is basically the only code I have in the movie.
menu_mc is located directly on the maintime line. Inside of
menu_mc are the buttons. If I place a button instance inside of
menu_mc (and there are not multiple instances of it) I can use an
onRelease and it works fine.
I can create an invisible button, place it over the animated
button and get the onRelease to work, however, since the buttons
are rollovers, I loose the animation with the invisible button
covering them up. I can't seem to target multiple instances of the
same button in the movieclip. is there any way around this?

How do you get drop down menu in Yosemite to not drop down?

When I try to enter a URL or address into the window at the top of the Safari screen in Yosemite, a drop down menu appears with a bunch of icons on it which blocks the screen. I need to see the screen when I'm entering a URL line. How do I get the drop-down with the icons on it to go away?

How to fill the drop down menu in screen programming

Hi, Experts,
I have a drop down menu on the screen I want to fill that drop down menu with different values how can I do that I think that there are to ways
Value List      from     dist/flow logic
                      A from program
Please help me out in this way.
Kind regards,
Faisal.

Hi Faisal,
VRM_SET_VALUES function module is used to display drop down values in the screen.
Use the following code
* Selection screen elements                                            *
SELECTION-SCREEN BEGIN OF BLOCK BLC1 WITH FRAME
                                    TITLE TEXT-000.
PARAMETERS:
P_BUKRS TYPE BKPF-BUKRS OBLIGATORY " Company code
           DEFAULT '1000',
P_WERKS TYPE VBRP-WERKS OBLIGATORY. " Plant
SELECTION-SCREEN SKIP.
PARAMETERS:
P_GJAHR TYPE BKPF-GJAHR OBLIGATORY, " Fiscal Year
P_QUAT TYPE CHAR20                  " Quarter
            AS LISTBOX VISIBLE LENGTH 30
            LOWER CASE OBLIGATORY.
SELECTION-SCREEN END OF BLOCK BLC1.
Data:
* To hold quarter details, these details are used to display in list box of
* the parameter called Quarter in the selection screen.
T_QUARTERS TYPE VRM_VALUES.
*              AT SELECTION-SCREEN ON VALUE-REQUEST                    *
AT SELECTION-SCREEN ON VALUE-REQUEST FOR P_QUAT.
* To fill quarters......................................................
PERFORM FILL_QUARTERS.
* To display quarters in dropdown box...................................
PERFORM DISPLAY_QUARTERS.
* FORM DISPLAY_QUARTERS                                                *
* This subroutine is used to display quarters in the dropdown box.     *
* There are no interface parameters to be passed to this subroutine.   *
FORM DISPLAY_QUARTERS .
CALL FUNCTION 'VRM_SET_VALUES'
    EXPORTING
      ID              = 'P_QUAT'
      VALUES          = T_QUARTERS[]
    EXCEPTIONS
      ID_ILLEGAL_NAME = 1
      OTHERS          = 2.
IF SY-SUBRC NE 0.
    MESSAGE ID SY-MSGID TYPE SY-MSGTY NUMBER SY-MSGNO
            WITH SY-MSGV1 SY-MSGV2 SY-MSGV3 SY-MSGV4.
ENDIF.                               " F SY-SUBRC NE 0.
ENDFORM.                               " DISPLAY_QUARTERS
* FORM FILL_QUARTERS                                                   *
* This subroutine is used to fill quarters.                            *
* There are no interface parameters to be passed to this subroutine.   *
FORM FILL_QUARTERS .
* Local field string declaration........................................
DATA:
* Field string to fill quarters in the year.
    LFS_QUARTERS TYPE LINE OF VRM_VALUES.
REFRESH T_QUARTERS.
LFS_QUARTERS-KEY = '1'.
LFS_QUARTERS-TEXT = TEXT-QU1.
APPEND LFS_QUARTERS TO T_QUARTERS.
LFS_QUARTERS-KEY = '2'.
LFS_QUARTERS-TEXT = TEXT-QU2.
APPEND LFS_QUARTERS TO T_QUARTERS.
LFS_QUARTERS-KEY = '3'.
LFS_QUARTERS-TEXT = TEXT-QU3.
APPEND LFS_QUARTERS TO T_QUARTERS.
LFS_QUARTERS-KEY = '4'.
LFS_QUARTERS-TEXT = TEXT-QU4.
APPEND LFS_QUARTERS TO T_QUARTERS.
ENDFORM.                               " FILL_QUARTERS
Regards,
Mahi.

How to make animated drop down menu responsive?

Similar Messages

Maybe you are looking for