Fluid Grid Menu

I Created a simple menu in Fluid Grid Layout. But how can I create a drop down menu using the same Fluid Grid feature? Is there a website or tutorial I can see in order to create this effect?

You can find the HTML & CSS here:
Edit fiddle - JSFiddle
If this is not suitable, please upload your test files to your server, and post a link.
Here is a good tutorial
How Fluid Grids Work in Responsive Web Design

Similar Messages

Using fluid grid layout in Dreamweaver CC - how do I create a dropdown menu within my main navigation?

I am new to using the responsive fluid grid layouts in Dreamweaver CC - and I am unable to find any information on creating a dropdown menu within my main navigation.
Any ideas?

You'll need to find a menu system that is responsive and mobile friendly for touch screen devices.
If you have a budget to work with, Project Seven's Pop-Menu Magic3 is a commercial extension for DW that works great out of the box.
http://projectseven.com/products/menusystems/pmm3/index.htm
If you don't have a budget, you'll need to create a desktop menu and add a jQuery plugin for mobile devices.
Basic CSS Drop Menu
http://jsfiddle.net/mD4zW/28/
jQuery MeanMenu for mobile/tablet devices
MeanThemes | MeanMenu
This is a working example inside a FluidGrid Layout (resize viewport)
Alt-Web :: Fluid Grid Test
Nancy O.

Fluid grid layout-how to keep an image on same line as menu

I am starting a new page and at the header I am trying to have a logo stay on the same line horizontily as the spry menu.
the spry menu seems to always go under the logo instead.
I am assuming the log and the menu should be in the same fluid grid layout div? or do I insert another div, but just not have another row checked.
I am working in CS6 and I am obvousley not a web designer. any imput would be appreciated... thanks...

Float the logo.
<img src="logo.jpg" style="float:left">
Nancy O.

CS6, Fluid Grid Layouts, and Spry Menu - sizing issues

Hi. I am a full-fledged nubie to Dreamweaver, so please forgive my ignorance. But I really need to build a new site, and I really like DW so far (much better than what I was using).
I am building a site with fluid grid layouts so it is properly sized across all decices. I have inserted a spry horizontal menu as my primary navigation. I got the menu to look like I want it as far as formatting goes.
But when I view the page live and change the size of my browser, the menu wraps around to the next row, even with fairly large browser windows.
Can anyone tell me how to scale the spry menu bar the same as an image does in a fluid grid layout?
Thanks,
Steven

Don't use Spry Menus. #1 they're not Responsive. #2 They don't work all that well on Touch Screen devices. #3 Adobe abandoned the Spry framework last year. Is that enough to convince you? See links below for alternatives.
Pop-Menu Magic2 by PVII (commercial DW Extension)
http://www.projectseven.com/products/menusystems/pmm2/index.htm
jQuery Superfish
http://users.tpg.com.au/j_birch/plugins/superfish/
jQuery Mega Menus http://www.javascriptkit.com/script/script2/jkmegamenu.shtml
CSS3 Dropdown Menus
http://www.red-team-design.com/css3-dropdown-menu
10 Responsive Menus
http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/
Nancy O.

DW CS6 fluid grid insert menu options

I'm using Dreamweaver CS6, purchased via Adobe Creative Cloud Suite. I've created a new site and fluid grid. I want to begin inserting fluid grid divs, however, my Insert>Layout menu does not have a menu pick for "insert fluid grid layout div tag"?

The 12.2 update added improvements to the Fluid Grid interface. You no longer need to insert FluidGrid Div. Just insert Div and DW will know what you need.
Creative Cloud 12.2 - Updated Fluid Grid Layouts
http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html
Nancy O.

More insight on divs with fluid grids please!

Help me come further up the CS6 fluid grid learning curve, please!
I'm adapting an exiting site to fluid grids. After creating the template for the primary pages, I have two major issues at this point(yeah, only two, SO FAR).
1- I have a vertically expanding menu in the first layout div. For tablets, I want to preserve the left grid column space for the menu, regardless of its length, and all other content would use just the right gid columns. But when the menu happens to be short, the "excess" content floats left under the menu grid columns. How can I force main page content to only occupy the right grid columns, regardless of the length of the menu?
As a side point to the menu, what happens when I try to put this (or the footer) all back in an SSI, as it originally was?
2 - I've seen the note about no support for nested layout divs. Thru trial and error, I'm still trying to figure out just what this means. Pragmatically, what is the greater implication of this? Can format be controlled only on fluid grid layout divs? Can't I have divs inside of a grid layout div to control image palcement around the text for instance? I've had hit=n-miss experience with this so far.
Can anybody point me to a more in-depth discussion on this topic?
Sorry if this ol' dog seems like he's learning div layout all over again. But hey! That IS how it feels!
Thanks for any education, or pointers to such, that you can provide.

Not sure I completely understand what you want. But in this example, I have set nav and LayoutDivs 5, 6, 7 to display:none in smaller devices.
http://alt-web.com/FluidGrid/Fluid2.html
I did this inside a media query within my Content.css file:
/* Special Rules for Mobiles. */
@media only screen and (max-width: 480px) {
   /**hide some divs**/
     nav, #LayoutDiv5, #LayoutDiv6, #LayoutDiv7 { display: none }
     /**show jQuery buttons**/
     #togglenav { display: block }
     #showDivs { display: block }
Then I used a simple jQuery toggle to show/hide divs.
http://jsfiddle.net/NancyO/AP9Hm/
Nancy O.

DW CC Fluid grid layout how to change px width for desktop layout

Hi there,
I have been going through the various tutorials about fluid grid layout and setting up our bureau's website in a responsive layout.
The width of the original design was 960 px and the hero pic and others have been exported at that size.
The first divs in the design look fine, header with the 960 px pic in it, and also the BC menu which is set to 960 wide.
However the body text goes out to the right, past the 960 px and this is because, right at the start, when starting the file in DW the desktop screen width is set to 1232px.
How can you change this setting when starting a new fluid grid layout?
I have tried changing the number of columns, or the percentage, and the width for desktop remains at 1232px.
Why is this?
Not all of our clients want a site 1232px wide on a pc.
Thanks so much.

Hi Ben and Nancy,
Thanks for your replies, but maybe you both don't realise I am asking specifically about DW CC and setting up a responsive design using a fluid grid layout?
I have been following the recent videos from Adobe on this.
As far as the width of 960 goes, Nancy I am only shortchanging myself, as this is the website for our agency. The original design is 960px wide as I did read somewhere that this width is recommended now that responsive is coming, as it is easily divided into a grid layout. I also am quoting for a client at the moment who wants a responsive design for their website, and they have specifically requested that the site have a maximum width of 960 px. So I would like to find out if this is possible in DW CC at the moment when doing a fluid grid layout.
So what I am trying to do here is follow the Adobe tutorials on responsive design, using DW CC and I am using the current design for our agency website as a trial to set this up and try and get it working as a responsive website.
It does not seem to me that many other people are doing this, as most people are recommending that I try Github or Bootstrap.
However, I am not a coder and I am used to using DW, so I would like to get the DW CC responsive design features working if possible.
Ben the CSS you are looking at is being generated by DW CC as I follow the steps in the Adobe demonstration videos to set up a fluid grid layout in DW CC.
One of the things they say in the videos is that you can't program the CSS directly when doing a fluid grid layout, or you break the CSS and it all stops working. So I am using the new panels in DW CC to set up the layout. One thing I cannot get access to is the ability to set a maximum width for the site. It seems to be set in concrete when you start the fluid design up in DW CC.
Here is a pic of the screen I am talking about that sets the maximum width:
I cannot click in the pixel width at the top and change it. Also if I adjust the number of gridlines or the percentage for the pc layout, the default maximum pixel width does not change.
If you click on the preferences button and go into the Window sizes screen, there does not seem to be a way to set the maximum pc width here either, so I am a bit stumped.
Maybe I just have say to my clients that if you want a responsive design then the max width for pc can only be 1232px? It does seem strange to me that this cannot be changed.

Templates in Fluid Grid Designs

I have been searching until my eyes are bleeding trying to find out if you can use templates with fluid grid layouts. No one seems to be able to answer this as far as I can see. And Adobe is their usual useless self on this matter with no information that is easy to find on the subject. I have sites up that require similar looks to many pages, thus the need for templates. Without this ability, Fluid Grid Designs in Dreamweaver are a joke unless you only one or two pages in your site.
Again, CAN DREAMWEAVER FLUID GRID DESIGN SUPPORT THE USE OF TEMPLATES???????

DW Templates are nothing like SSIs.
SSI's are server-side code statements (either in PHP or ASP files) that pull content from one file into the parent page. That's why they are ideal for re-usable bits of code like site wide headers, footers and menus. Everything on the parent page is fully editable in DW.
Include files are nothing more than snippets of html code. An include statement is inserted into the parent page where you want the content to appear. For this demo, I have three pre-built SSI files in my Includes folder:
    Header.html
    Menu.html
    Footer.html
My parent page has been saved as index.shtml (.shtml or .shtm tells the server there are include statements in the page). Depending on your type of web server, you may also use .php or .asp however those include statements look different than the ones in this demo.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header">

</header>
<nav>

</nav>
<div id="mainContent">
<h1>Main Content H1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing odio.</p>
 </div>
<div id="footer">

 </div>
</body>
</html>
My include file for Menu.html looks like this -- no body tags, no doc type, just the relevant menu code:
<a class="intro" href="index.shtml">home</a>
<a class="gallery" href="gallery.shtml">gallery</a>
<a class="tools" href="tools.shtml">tools</a>
<a class="portfolio" href="portfolio.shtml">portfolio</a>
<a class="fees" href="Fees.shtml">fees</a>
<a class="contact" href="contact.shtml">contact</a>

One last thing, you won't see includes appear on the page until you publish to a server. If you want to test pages locally, you will need to install a local testing server such as WAMP, MAMP or XAMPP on your local computer.
Nancy O.

Fluid Grid Templates

Hey all,
I'm looking to rebuild my company's current website and I'd like to use Fluid Grid Layouts to make it more appealing to my customers. My concern is that I've noticed their doesn't seem to be a way to be able to use this feature with the Templates feature.
I very much like the templates feature as I'd like knowing I can make a change to the content of the website and have it cascade across every other page (such as changing the navigation menu, adding a new image or link that I want to show up on every page, etc..) very quickly rather than having to go to each individual page one by one making the changes.
My question is: Is there a way to make these two items work or is there a better, newer way of doing this now in which I can still make use of the Fluid Grid Feature?

This sounds a bit "off" to me, I don't use DWCS6, but you should be able to turn any page made with DW into a site template.
Do you have a Defined Site set up?
What happens when you open a new fluid grid page, add a few of the basics then choose File > Save as Template?

The html5 tags nav in the broilerplate.css file - fluid grid

Ok. I am working with the fluid grid system in DW CS6.
in the broiler plate.css file i see the below code which seems to control the styling for the listed html 5 elements.
HTML5 display definitions
   ========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
/* =============================================================================
   Base
   ========================================================================== */
why did adobe set the nav id to display as a block element.
this is causing me issues with using the above tags.
My navigation bars name is nav. I attempted to create another css rule with the display set to INLINE for my menu.
The boiler plate code is overwriting my rule. Why? What is the best way to label my divs. I was tring to go HTML 5 but fluid grid already has some rules in place. Can i modify that without problems? what is the best thing to do. Not label my divs with the HTML5 labels?
why are all html5 tags set up to display that way. How are you supposed to have individual control? without breaking the fluid grids factory helper rules?

Thanks for those charts. I am building the site for both myself and my visitors. After looking at your chart I think 90% is good enough for me. My old website that I am rebuilding used framed pages and front page to build it.   I am making my layout so that IF i find that the fixed nav box is too Dicey I will just pull it off the site.
I am not suse which browser dreamweaver has built in. I moved into a new windows 8 computer with CS6 at the same time. I have not downloaded any browsers yet. I was just building this based on the newest stuff released. I am far from testing it out and should have gotten some done by now. AS of right now I have 140 hours in building my new layout and learning CSS coding. I have not uploaded yet to a URL so I will need to get back to you when I do. The little bugs keep setting me back to zero. The layout looked like it all snapped to the grid. My layout divs were 12 column with 4 divs approx 200 px 400px 300px and 300px everything snapped to and looked fine. When I started adding my PS images and content to my divs the 4th div fell back down a row in the view. I then click the arrow to move it down a row which it did then I tried to move it back up. It would not go. I have boxes with borders, radius corners, and dropped shadows on the containing box. I looked at it and starting thinking the CSS styles made it wider than the fluid grid would allow. So i then removed the styles and it is still stuck a row below where it should be.
Futher down my page I have 4 more rows with 4 divs in each row. The last 4 all drop down so that it is totaly different than what I a laid out. It is weird because my div is three colums wide. I have the last three colums open on the lay out but it will not move up and it seems like the margins are tight or the gutter is wrong. I am not sure.

PLEASE LET ME KNOW IF THIS IS POSSIBLE WITH FLUID GRID LAYOUT?

This is an example of what I'm trying to do. Excel was the best way for me to provide a visual. Is this possible? Every time I try to place divs in a similar layout, the div will not take up multiple rows. For example div 4 would move down and where row 7 is would now be row 4. Div 2 would have also moved down because of 5. I have a large image that needs to be placed to the left of a header and vertical menu. I'm trying to keep the header and menu seperate and the image needs to be aligned to the top left of the text. I'm sorry that I'm overcomplicating this. I must admit it surprises me that the fluid grid appears to be dictated by rows. I'm wondering if for this particular design I should just stick to a table.

I'm perplexing by your question. How do you expect the divs to move in other resolutions? For the question to be whether this is possible with a fluid grid there has to be some transformation between the layouts. If you are just looking for a static layout, that is possible. If the heights are to be fixed like that you could just specify the heights on the divs to make the height. If the divs are moving down then add the attribute clear:none; to the div, in this case 2 and 4. This will prevent the float from being cleared and pushing the element down.

Understanding Fluid Grid Layout

Hi,
First of all - I apologize - my English is bad, but I hope you will understand me.
I'm currently watching some video tutorials about responsive web design, particularly about Fluid Grid Layout/Dreamweaver.
To get to the point and to be as simple as possible, my question is: In what cases elements do NOT need to have class="fluid"?
For example, here's part of the code from one video tutorial:
<body>
    <div class="gridContainer clearfix">
        <header id="header" class="fluid">
            <h1>The Best Site Ever!</h1>
            <nav id="mainnav" class="fluid">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About Us</a></li>
                    <li><a href="products.html">Products</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </header>
        <article id="intro" class="fluid">
            <h2>Some Title</h2>
            <p>Some thext... </p>
        </article>
As you can see above, <header> and <article> elements that are child-elements of <div class="gridContainer clearfix"> have class="fluid". But, let's look inside <header> element - there are two child-elemets: <h1> without and <nav> with class="fluid".
Now, correct me if I'm wrong - If some element has child-elements - it must have class="fluid" (except for the case with ul/ol and its child-elements li), right? For example, element <article id="intro"> must have class="fluid" because it has child element <h2> and <p>, but those child elements will not have class="fluid" because they don't have child-elements. On the other side, child-element (of the <header id="header" class="fluid">) <nav id="mainnav" will have class="fluid" because it has child element (ul). Only in case of lists there are exceptions...

Thank you for your response. It isn't the snapping that appears to be the problem. This is an example of what I'm trying to do. Excel was the best way for me to provide a visual. Is this possible? Every time I try to place divs in a similar layout, the div will not take up multiple rows. For example div 4 would move down and where row 7 is would now be row 4. Div 2 would have also moved down because of 5. I have a large image that needs to be placed to the left of a header and vertical menu. I'm trying to keep the header and menu seperate and the image needs to be aligned to the top left of the text. I'm sorry that I'm overcomplicating this. I must admit it surprises me that the fluid grid appears to be dictated by rows. I'm wondering if for this particular design I should just stick to a table.

Margins, Padding, no effect in "multiple columns" Fluid Grid Layout

Mac Pro
Adobe DW CS6
Testing URL: http://0343be5.netsolhost.com/satgraphics_02/index.html
First time using multiple columns in fluid grid layout----------------------------------------
<style>
.newspaper
          column-count: 2;
          column-gap: normal;
          column-rule: 2px outset #000000;
          /* Firefox */
          -moz-column-count: 2;
          -moz-column-gap: normal;
          -moz-column-rule: 2px outset #000000;
          /* Safari and Chrome */
          -webkit-column-count: 2;
          -webkit-column-gap: normal;
          -webkit-column-rule: 2px outset #000000;
Text goes to border of container, and I've run out of ideas on margins and padding options on not only the .newspaper <style> but using its container, LayOutDiv1. All appears good in "Live" view, text easily readable, but Safari, FireFox, Opera ignores css. When viewed with padding/margins input, it just shifts the div to right, outside grid.
Indent first line in paragraph works well, wrapping image properly, and column flow smooth.
Set padding in p,h2, h3 at 10px but no results visable. (Retset to "0" padding.)
On laptop PC…can't seem to access live testing URL so unsure of IE 10 operational functionality.
Thank You...

Testing URL: http://0343be5.netsolhost.com/satgraphics_02/index.htmlYes, very helpful in furthering my overall understanding; however, I remain perplexed at being unable to keep div#column.newspaper from moving to right, thus negating the padding and text abuts right margin viewed in browsers.
(Appearance when viewing in "layout backgrounds' shows equal padding shift to right to edge of div.gridContainer.clearfix box.)
Base problem is that the borders on outside of layoutDiv1 (or the column itself) continues to be pusher right, thus misaligning outside borders of three seperate divs; header, menu, and LayoutDiv1.
Am i missing something in how to contain without borders (full width) being overrun. Or, maybe improper insertion of padding rules?
Testing URL:     http://0343be5.netsolhost.com/satgraphics_02/index.html
Thank You.

Problem in Fluid Grid Layout

I am trying to edit an My existing html site with a fluid grid layout. My Layout toolbar doesn't show a fluid grid div widget, and when I go to the 'Insert:Layout' menu, the fluid grid option is also gone. It used to be there. How do I get it back? I'm dead in the water until I figure this out.

Screenshots don't tell us if your code is actually in a fluid grid layout. My guess is not which is why the icon is not displaying.
Nancy O.

Sliding background banner in fluid grid layout

Hello all...
Hope someone can help me. Kind of new to programming and dream weavers fluid grids. But I've started working on a website and encounted a problem.
How do you implement a sliding background banner in the fluid grid design?
PS: My design looks like this and I plan to use a javascript slider for the banner (don't mind the danish language) :

the logo, menu, headlines and slider navigation is placed on top of the slider.
This is going to fail for several reasons.
#1 FGLayouts resize as do the foreground images inside them. However, menus & headlines don't resize. They stay the same size regardless of viewport unless you invoke your own special CSS media queries to change them.
#2 Background images don't re-size to layout.
#3 To have a slider appear behind your logo, menu and headines, you'll need to layer elements with absolute positioning. And as we all know from multiple discussions on this forum, absolute positioning doesn't work well in Responsive layouts because eventually everything becomes a jumbled mess.
The best advice, keep your slider separate from your site menu and headlines. You'll have fewer problems that way.
Nancy O.

Fluid Grid Menu

Similar Messages

Maybe you are looking for