Help! How to create a navigation bar by tabs on the width 100% accordion that pushes also down of content

Hello

I keep seeing 100% width beautiful navigation bars that work like accordions, they open upward and push down the content of Web sites. But no idea how to do myself in Adobe Muse.

An example is Adobe Muse Widgets Web site: http://www.muse-themes.com/collections/adobe-muse-widgets

I want to create something similar in the top gray navigation bar. When you click on the 'support' section it drops in a submenu that is 100% fixed width and pushes down the rest of the content on the Web page. I know that the current accordion can be created as 100% width and can push down content when opened. But it does not feet, so I don't think I can create the navigation bar I'm after.

If anyone knows how to do this, please can you help me to get this effect.

Thank you

Kirsty

Take a look at this small sample file:

https://DL.dropboxusercontent.com/u/7046655/sample.Muse

He he, what you want?

Tags: Adobe Muse

Similar Questions

  • How to create a navigation bar that does not move

    I'll keep it short:

    How to create a navigation as abduzeedo.com bar? Just on the screen.

    You can use a div with CSS position: fixed; top: 0 defined.  This will allow the div to 'stick' to the top of the page, regardless of the place where the document is scrolled.

  • problem getting my navigation bar to appear across the width

    Hi guys,.

    having trouble getting my navigation bar manually to stick on the right side of the page so that it extends with the screen. It is striking the 'red line' and I clicked on the icon of the entire width as well.

    any advice?

    Hello

    I'm afraid at this point Menu widget cannot be set to appear in full width. You can request a feature here: ideas for features in Adobe Muse

  • How to make a horizontal bar stretch to fill the width of the browser outside the wrappe always

    When I get 100% in the width field, that it will fill the wrapper which is 1000px, I want just some horizontal bars to fill the width of the browser at any time.

    Example is at http://www.hollywoodunderground.com - bar under the header/links and the bar above the footer. Trying to figure out how to get both of those always fill the width of the browser while keeping the original packaging for all other content. I can just find a way to get these 2 bars outside of the package in a new package, or can I do it in the wrapper?

    You need to configure your build slightly differently.

    You will place the logo and icons of social media in their own

    the value of 1000px, margin 0 auto to Center horizontally

    Then you would have your black bar

    the value of width: 100% (no need to set even if, as it will fill the available space).

    Then you'd have your youtube videos

    the 1000px, auto margin 0 value.

    Then another black bar

    :

    Get it?

  • DW CC sensitive site, Image problem, how can I get my image to stretch in the width 100% in the div container (wrapper)?

    I have a HomeHeader (upper Div) homebody (body div), 4 low box divs (not important). Im trying to get my homebody (body div) to stretch 100% width on the container as My HomeHeader (upper div) did. The two albums div and body divs are IMAGE backgrounds!

    Capture 1.PNG

    Now, I did something interesting that is, changed my homebody (body div) of the background color in the Red image background and it streched:

    Capture 2.PNG

    I don't want a solid color! I want the image that I designed in photoshop CC. I don't understand how I could get my div image to stretch, but not the image of the body. Help, please!

    PS. This is a copy of my CSS

    ICWOT:

    @media only screen and (min-width: 769px) {}

    {.gridContainer}

    Width: 100%;

    margin: 0;

    Clear: none;

    padding: 0;

    float: none;

    }

    {#HomeHeader}

    background-image: url (.. / WebDesign-assets/images/TopFooterH.jpg);

    height: 61px;

    }

    {#HomeBody}

    background-image: url (.. / WebDesign-assets/images/BodyH.jpg);

    height: 653px;

    }

    {#Home1AboutBlock}

    Width: 24.1758%;

    }

    {#Home2ProjectsBlock}

    Width: 24.1758%;

    margin left: 1.0989 per cent;

    Clear: none;

    }

    {#Home3StoreBlock3}

    margin left: 1.0989 per cent;

    Clear: none;

    Width: 24.1758%;

    height: auto;

    }

    {#Home4ContactBlock4}

    Width: 24.1758%;

    margin left: 1.0989 per cent;

    Clear: none;

    }

    {.zeroMargin_desktop}

    left margin: 0;

    }

    {.hide_desktop}

    display: none;

    }

    }

    Please help once again!

    You realize that will only look great on your screen, right?    Background images don't re - adapt to windows.  So for people on larger or smaller screens, it won't have the same experience.

    You could significantly reduce bandwidth by using a smaller picture with this method.

    Resizable background image full Page

    Nancy O.

  • How to create a signature to emails customized with the fonts and colors that I select instead of the default values?

    create a snazzy to my e-mail signature

    Hi, I want to create a signature in my windows mail email... He will be only with the police, which is the standard... How do I create a jazzy, as have the font and the color I want? Thank you

    Note: The HTML Signatures must be less than 4 KB.

    Open a new Message window and create your signature. (Insert the graphic & text). Click on the Source tab (view |) Source Edit if not already checked). Highlight the complete source code and copy / paste into Notepad. File | Save under and in the file name field, save as htm, (i.e. Sig1.htm). It will be saved in My Documents by default. Go to tools | Options | Signatures. Click: File | Browse and insert your saved signature | Apply. You can now rename it if you wish.

    Of course, if the recipient reads in plain text, they don't see the it.

  • I have 5 html pages that share a common header, footer and sidebar. How to use my navigation bar to change the content of the body without duplicating a lot of code?

    I have 5 html pages that share a common header, footer and sidebar. How to use my navigation bar to change the content of the body without duplicating a lot of code? Thank you!

    Read the help section of DW on models.

    Using Dreamweaver | Creating a Dreamweaver template

    Or use Server-Side Includes

    Nancy O.

  • type in the navigation bar does not display the web page

    Type the URL in the navigation bar does not appear the page. But when you click on the same URL in bookmarks, page displays OK.

    Hi sidonius,.

    I'll try from Firefox Firefox to solve the issues in Safe Mode. If you do not have the issue so that all your modules, extensions, and themes are disabled, you can try adding them in one by one until you find the culprit. You should look at the guide to troubleshooting Extensions and themes and article troubleshooting issues with plugins like Flash or Java to solve common Firefox problems as well.

    Hope this helps!

  • How to create (or delete) a new tag for a Web site, so that his tag appears (or does not appear) whenever I restart Firefox?

    How to create (or delete) a new tag for a Web site, so that his tag appears (or does not appear) whenever I restart Firefox?

    See this - https://support.mozilla.org/en-US/kb/How%20to%20set%20the%20home%20page

  • Some how my email was requested to be removed and the link to verify that I DON'T want be removed takes me to some site randomly, please help.

    Some how my email was requested to be removed and the link to verify that I DON'T want be removed takes me to some site randomly, please help.

    Your post is a little vague, but I fear that you may have received a phishing e-mail. Please tell us all about this request but do not follow any links or give any information at this stage.

  • How to create a button to download files in the form?

    How to create a button to download files in the form?

    Hello

    Please refer to the link below with a similar discussion.

    Download file button

    Kind regards

    Vivek

  • Please help me out here. I want to know if the story of adobe that I use is free or not?

    Please help me out here. I want to know if the story of adobe that I use is free or not?

    In the free version of history, once you log in, you'll notice an "Update now" link in the upper right demand.

  • How to create a navigation entirely in CSS bar

    I have a long navigation bar that I'll change regularly and add to, but also have a lot of pages on the site with this navigation bar. Is there a way to create a completely in CSS navigation bar so that I don't have to make a change in the css file that will fill all navbars in all pages? Don't need the images in the navigation bar, but would like to have the hover, active States etc. available. I would just have a HTML reference on each page in the navigation bar.

    As I said earlier, Server - Side Includes are ideal for large menus site, headers & footers. You change a file and upload it to your server.  Fact.

    If you are not yet comfortable with SSIs, watch F1 help under Dreamweaver templates (.dwt).

    Or library items. The only downside to these 2 exclusive features in DW is that you re - publish your entire site whenever you modify menus, but it's still faster than do it on each page.

    Nancy O.

  • How to create a search bar for mounting with ActionScript 2.0 in flash CS4

    I have a timeline that contains a video track and audio track.  I have created a work and the pause button play button, but failed to get a bar of research or volume control works.

    I can't use ActionScript 3.0 because I have video integrated in the timeline, since I was hot spots throughout the video.  How can I create a seek bar using behaviors/actions with actionscrip 2.0 to control the video/audio?

    I have little to zero knowledge of scripting.  Help, please.  Let me know if I need to provide more information.  Thank you

    replace this code with:

    ////////////////////////////////////////

    var tl:MovieClip =;

    tl.onEnterFrame = playF;

    paramF(tl,1,0,tl._totalframes,sb_mc._width-sb_mc.drag_mc._width);

    paramF (sb_mc.drag_mc, 0, 1, sb_mc._width - sb_mc.drag_mc._width, tl._totalfr souls);

    sb_mc.drag_mc.onPress = function() {}

    this.startDrag (false, 0, this ._y, sb_mc._width - sb_mc.drag_mc._width, this ._y);

    this.onEnterFrame = scrollTL;

    delete tl.onEnterFrame;

    }

    sb_mc.drag_mc.onRelease = sb_mc.drag_mc.onReleaseOutside = function() {}

    this.stopDrag ();

    delete this.onEnterFrame;

    tl.onEnterFrame = playF;

    TL. Play();

    }

    function playF (): Void {}

    sb_mc.drag_mc._x = this ._currentframe * this ".m" + this .b;

    }

    function scrollTL (): Void {}

    tl.gotoAndStop (Math.round(this._x*this.m+this.b));

    }

    function paramF(mc:MovieClip,x1:Number,y1:Number,x2:Number,y2:Number):Void {}

    MC.m = (y1 - y2) /(x1-x2);

    MC.b = y1 - mc.m * x 1;

    }

    //////////////////////

  • How to create a character bar header that is displayed correctly in all resolutions - Firefox Linux 20

    I am trying to learn how to create Personas for Firefox and already have one that I use locally, but I came across some unexpected behavior: if I create a header bar that is 3000 X 200 pixels, as specified in the guidelines, only the right third or greater displays in my browser when the theme is applied. To get this header to display 'properly' (which I find cosmetic) I have to resize the header to 1280 X 85 pixels.

    Must not the scale of the bar header automatically, or do I have to produce a header of persona to each width of possible resolution so it can display correctly?

    For what it's worth, the page footer appears at the third showing the left hand, but it's not so reprehensible in this case.

    A screenshot of the character is available at http://www2.netdoor.com/~horus/Persona_2013-04.png.

    Thanks for the ideas. I feel that I must be misunderstanding something here.

    (I tried to send troubleshooting information the first time, but it overflowed the limit of characters...)

    Persona pictures 'adapt', only as a large part of the image is displayed as you have resolution for. IOW, 1280px wide only about 1/3 of the image appears, as you discovered. This is the way in which Personas were designed to work.

Maybe you are looking for

  • After 40 minutes the screen goes white on Satellite P200D

    I have the laptop P200D, after about 40 minutes, my screen turns off, the only way I can get this back on the work is to turn off the laptop with the power butten.All my power settings are set to never turn off. All ideas Steve

  • Straight line between two polar points

    Hi all I created a VI that could be traced a Polar curve according to time-distance formula. The VI has present Mag and target Mag. each with its own angle (Polar form that is (r, theta)). I want to draw a straight line from the current point to the

  • Update pavilion touchsmart 14 v046tx with msata?

    I just bought a pavilion touchsmart v046tx 14, J6L60PA. I wonder t - he msata suport? Thank you.

  • Driver vga VPCCw16FA

    I tried to get the VGA driver for my model, but when I downloaded from the sony website I got "i/o error occurred during the installation of a file" Please help I use win 7 64 bit

  • How to buy some product keys for Win 7 Ultimate SP1 x 86?

    Hi you all,. We have a handful of XP Pro SP3 PC to upgrade to Win 7 Pro (or more) x 86. Win 7 Compatibility Checker found no problem with the hardware. I started the first upgrade using a DVD Win 7 Ultimate x 86 retail licensed, but had problems with