Can anyone suggest a good piece of software for Mac which will allow me to create CSS3 web menus and rollover buttons for my website? Been Googling for ages but I can't find anything that works for me which runs on a Mac.

 

I have tried CoffeeCup's Menu Builder but I found the interface awkward and non-intuitive, with little scope for design; and it doesn't do buttons (just menus).

 

I love the look of this one, but it's Windows platform only:

http://www.easymenumaker.com

 

The only other program I found which looks like it'll give me the control I want is this, but it also doesn't include a button-maker, and since I need a commercial license I think it's quite a lot to pay just for a drop down menu:

http://css3menu.com/index.html#overview

 

Thanks in advance for your suggestions.

In my opinion they are very easy to create yourself with a text-editor like Sublime. Understanding the box model, positioning and general things for layout are more difficult to get your head around yet it's essential to know if you are gonna be building websites.

 

So I recommend against using a tool and learn some of the css principles, which shouldn't take so long. You can create an attractive flat design button by taking a link giving it display inline-block, adding some padding and a background color. You can then add border-radius, and a border. 3d looking buttons are not really 'in' at the moment, but again you can just add some box-shadow and a linear gradient. None of this is overly complex. These auto generators reproduce horrible code that is far more verbose than necessary. And what if your client wants a very specific design - then you're stumped, or left to hack away at code that you don't really understand.

 

As for menus they are a little more complex, but again if you've know the css principles and understand how the DOM tree works then they are not so difficult to construct. It is basically an undordered list that lies within some nav tags, sub-menus or dropdowns are themselves undordered lists that lie within the list items of the parent list:

<ul class="nav">
	<li>Item</li>
	<li>Item</li>
	<li class="menu-item-has-children">Item
		<ul class="sub-menu">
			<li>Item</li>
			<li>Item</li>
			<li>Item</li>
		</ul>
	</li>
	<li>Item</li>
	<li>Item</li>
</ul>

This can then be styled to your needs, for example to make the sub menu appear on hover you can do this;

.nav:before {
 */ Clearfix /*
  display: table;
  clear: both;
  content: " ";
}
.nav li {
  display: block;
  padding: 5px 20px;
}

.nav >li {
  float: left;
}

.menu-item-has-children {
  position: relative;
}

.sub-menu {
  position: absolute;
  top: 100%;
  left: -99999999px;
}

.menu-item-has-children:hover .sub-menu {
  left: 0;
}

I suggest you read some articles on the MDN website (Mozilla Developer Network) https://developer.mozilla.org/en-US/

Edited October 12, 201411 yr by rbrtsmith