Customizable menu with images in a fluid grid layout

Report · Feb 11, 2017

Apologies, but I'm fairly new to web design. Although I have a specific question, if what I am doing isn't possible (or if nobody has an answer), in the end I'd like to know the best way to create a customizable menu (with the ability to insert images into the menu) in a fluid grid layout. So that is the ultimate goal here.

I am using CS6 and my website is in a fluid grid layout. I am building menus with the Ajatix Advanced CSS 5 Dreamweaver Extension add-on because it allows one to insert images into the menu. With the Ajatix menu builder I am able to build the menu exactly how I want it. However, when I insert it into the website, it does not conform to the fluid grid layout CSS. So the menu does not resize and it does not appear that CSS stylesheet created for the Ajatix menu and the CSS stylesheet of the fluid grid layout are communicating with each other, or one is overriding the other.

If anyone knows that this Ajatix menu builder is completely and forever incompatible with the fluid grid layout then I guess you can provide a quick answer. But if you could then please advise on other solutions I'd greatly appreciate it. I haven't included any code in this question because I thought I would start general and get more specific upon request.

The end-goal is to have the user click on the image box (see below) in my website and have the menu pop-out. Each menu item within is also an image file designed in photoshop, not the standard text provided in the spry menus. Is what I am doing possible? Or am I simply going about this the wrong way? Or am I missing something very simple here? I attempted to use the spry menu but it did not appear to allow for images and it simply did not have the functionality that I needed. I also read that spry menus do not work with fluid grid layouts, but it appears that the Ajatix menu builder also doesn't work with fluid grid layouts either. Am I wrong about the spry menu though? Should I revisit that option? Or what should I be using instead?

This is what the website looks like and each image box will potentially be a menu “button,” although right now, only the first one to the left is and all the rest are simply image placeholders to demonstrate how the first one to the left (as a menu) does not resize.

This is what the menu button looks like when it is clicked:

But this is what happens when the website is resized smaller, as everything shrinks except for the menu (the other image buttons have not been turned into menus yet):

Thanks and best.

Report · Feb 11, 2017

1) I don't recommend using legacy Fluid Grid layouts. They were a nice idea at the time (2012) but have since been trumped by other better methods -- Bootstrap and CSS Flexbox for example. FGLayouts were removed from the latest version of Dreamweaver.

2) Making responsive menus can be challenging because they must be well... er.... responsive to fit on mobile, tablet and desktop displays. Links must also be finger tap friendly for non-mouse devices.

Bootstrap uses the navicon (aka hamburger) menu. When the icon is tapped a vertical list of links appears. This works very well on mobile devices. On Desktops, links are displayed horizontally.

You will very rarely find a responsive menu that uses bitmap graphics anymore because it's a hassle to maintain and visually poor when re-scaled on Retina/Hi-Res displays. Images of text can't be indexed, searched or translated so for accessibility reasons, it's usually best to use simple menus made with plain text or text and SVG icons. A working Bbotstrap example in Reply #6 below.

Re: Images on top of images. Basic HTML/CSS question

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Feb 11, 2017

Thanks for your response Nancy. I had no idea fluid grid layouts were so out of date!

So it looks like Bootstrap won't be that difficult to upgrade to and start using (it's free right? it looks like it works well with Dreamweaver?). I just want to make sure that I don't spend time upgrading and then find myself still unable to design the website I want to design.

You say when the Bootstrap navicon button is pressed it displays a list horizontally on a desktop? I would like the menu list to display vertically at all times (see image example). So can this be adjusted, or is there something else in Bootstrap that will work? A vertical drop down menu?

And just a point of clarification, are you saying that I should turn my images of text into SVG icons? I haven't looked too far into it, but I think I could save the PNG files as SVG files in Illustrator. Would that work?

Most importantly, how easy is it to insert the images files/SVG files into the Bootstrap navicon menu, or vertical menu if there is one?

Thanks and Best

Report · Feb 11, 2017

To give you a leg up with Bootstrap, copy and paste the following code into a new document.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<styles>
</styles>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
  </div>
  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li><a href="#">Separated link</a></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
    </ul>
    <form class="navbar-form navbar-left" role="search">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </li>
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

The above contains a horizontal menubar that becomes a 'hamburger' in smaller screen sizes. It is easy enough to have the 'hamburger' at all times if you prefer.

You mention that you want images to represent the menubar. From experience, this will not work for a horizontal menubar. Many of my clients want that as well; one case in mind is BunchOBlokes - Men in Crisis where the horizontal arrangement of the left-hand icons did not work in a responsive design, i.e. the real-estate did not allow full size buttons and resized buttons were too small on small screens. As a compromise, I placed the images in a vertical menubar. B.t.w., the site is made using the Bootstrap framework. More on Bootstrap see Bootstrap 3 Tutorial

To work with SVG's requires a lot more knowledge. To get you started, have a look at Everything You Need To Know About SVG | CSS-Tricks. Illustrator is a top notch tool for the creation of SVG's as you will notice by following the tutorial.

Wappler, the only real Dreamweaver alternative.

Report · Feb 11, 2017

Thanks Ben! This looks like this will be useful once I get into Bootstrap and start building the menu. Glad to hear that the menu is easy to make into the "hamburger" at all times if I prefer. I'm guessing this will be somewhat self explanatory?

I'm disappointed to hear that images won't be able to represent the menu bar. If anyone else has a workaround, let me know.

The link to working with the SVG's was very informative. Definitely switching all the image files over to SVG's.

Report · Feb 12, 2017

I'm disappointed to hear that images won't be able to represent the menu bar. If anyone else has a workaround, let me know.

You could use images although I dont advice it if you are code challenged. On mobile (smartphone) you could easily have them in 2 lines of 3 or 3 line of 2 rather than 1 line of six if real estate is an issue (it might look quite nice, different) and when clicked just present the subMenu in an overlay. It would be difficult though unless you can code as a frame work doesnt offer this kind of concept out of the box so you are rather stuck with whats on offer rather than what you really want.

Also images can be 'intensive' to maintain if they are changed at anytime, another reason to possibly avoid image use in a nav bar. Perhaps the most compelling reason to not use image or icons in navbars is that a lot don't really give any clue to what the tab is about, which is annoying to users.

Report · Feb 12, 2017

Just an example using images for the navigation, although nowdays you will probably want to use svg instead of a png. Narrow the browser and click on either icon No 2 or icon No 4 to see the 'overlay effect. Just a thought.

<!DOCTYPE html>

<html>

<head>

<title>Flexbox Navigation</title>

$(document).ready(function() {

$('.sub_menu').hide();

//sub menu

$('li').css('cursor', 'pointer').click(function() {

$(this).find('ul').slideToggle().end().siblings().find('ul').hide();

});

$(document).ready(function() {

$('.sub_menu, .main_menu').mouseleave(function(){

$('.sub_menu').fadeOut();

});

</script>

<style>

body {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 14px;

line-height: 1.4;

margin: 0;

padding: 0;

}

* {

box-sizing: border-box;

}

img {

max-width: 100%;

height: auto;

}

/* header */

header h1 {

margin: 0;

padding: 30px 0 20px 0;

font-size: 35px;

text-align: center;

color: #e60000;

font-weight: 400;

}

/* MAIN MENU STYLES */

.main_menu {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

width: 70%;

max-width: 1000px;

margin: 0 auto;

padding: 0;

}

@media screen and (max-width: 920px) {

.main_menu {

width: 85%;

}

@media screen and (max-width: 480px) {

.main_menu {

width: 70%;

}

.main_menu li {

margin: 0;

padding: 0;

list-style: none;

position: relative;

width: 12%;

}

@media screen and (max-width: 1100px) {

.main_menu li {

width: 15%;

}

@media screen and (max-width: 768px) {

.main_menu li {

width: 30%;

position: static;

}

@media screen and (max-width: 480px) {

.main_menu li {

width: 48%;

}

/* SUB MENU STYLES */

.sub_menu {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-ms-flex-direction: column;

flex-direction: column;

position: absolute;

background-color: #e60000;

width: 200px;

margin: 0;

padding: 0;

}

@media screen and (max-width: 768px) {

.sub_menu {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

top: 0;

left: 0;

width: 100%;

height: 100vh;

}

.sub_menu li {

width: 100%;

border-bottom: 1px solid #fff;

}

@media screen and (max-width: 768px) {

.sub_menu li {

text-align: center;

}

.sub_menu a {

font-size: 18px;

text-decoration: none;

display: block;

padding: 10px 12px;

color: #fff;

background-color: #e60000;

width: 100%;

}

.sub_menu a:hover {

background-color: #f2f2f2;

color: #e60000;

}

</style>

</head>

<body>

<header><h1>My Company Website</h1></header>

</ul>

</li>

</ul>

</li>

</ul>

</body>

</html>

Report · Feb 16, 2017

Thanks Osgood! I've had time to play around with this code, I and found it especially helpful.

However, I was wondering if you (or anyone else) could help me understand how to edit the Flexbox Navigation in Bootstrap.

My problem is that I don't know how to fine-tune the submenu list. I'd like to be able to adjust how and where the submenu list drops down from the menu button/image. For example, on the website one of the submenus drops all the way down below the page so it isn't visible (and the user has to scroll down the page), and for the menu button on the far right of my website the submenu drops down and out to the right so that it is also out of sight when the browser window isn't at full screen.

I had originally designed the website so that the submenu would pop-out of the menu button/icon (not drop down) to the right or left (toward the center of the website) to eliminate this problem. And I was looking at Bootstrap's "Buttons," "Drop down menus," and "Popouts," and these appear to have that functionality, and even an "auto" option that decides where the best location to pop out will be at any given position. However, they do not appear to be as fluid and work as well with mobile devices as the Flexbox Navigation. But maybe these elements can work together somehow?

While I would like the submenu to pop out to the right or left (not drop down), I would just be satisfied if I could nudge the dropdown menu over so that it doesn't get cut off when it drops down.

Best and thanks.

Report · Feb 12, 2017

<Definitely switching all the image files over to SVG's.>

Warning. DO NOT SAVE bitmap images as SVG. You need to create new vector graphics in Illustrator and then Export to SVG. Otherwise your SVGs will be blurry and contain too much bitmap data resulting in really big file size. The goal is to make sharp, crisp graphics that will maintain their sharp lines when re-scaled and have a very small footprint.

When your menu changes, you will need to re-craft the images each time in your graphics program. After a few rounds of this, you'll start to hate your graphic based menus and stop updating them. That's why I said they are a hassle to maintain.

Text based menus are much simpler to work with. And if you want to add some visual pop, you can use Web Fonts from Google, Adobe Typekit or Edge Web Fonts.

In latest Dreamweaver, go to Tools > Manage Fonts.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator