Greased Issues

Issue #15.1E November 6th, 2015 Volume 1
 

Azure
Edition

Greased: The Nerd Bacon Newsletter (Logo)

Greased 1.15.1E - Just For Fun: Examples of Variations

November 6th, 2015

Difficulty: 5 - 7

EasyDifficult

Check out some fun examples of menus! See something you like? Talk to me and we'll see what we can do!

Here's the "original" menu we created, in case you want to compare.

Alternating Colors, Uppercase Transform (Table)

This is probably the simplest variation on the original style. Here I just wanted to show off something that alternated colors when hovered over and demonstrate one of many examples of how to change the way the actual text looks once it's hovered over. Be careful though: if you're transforming text, you'll need to account for the width of the largest transformation and make sure that any padding of <a> doesn't get in the way, otherwise your box is going to slightly change shape when hovered over.

Peach Viridian Gold Blue Cyan Indigo

Internal Style Sheet

<style>

table.nav2
border-collapse: collapse;
border: ridge 5px red;
background: #000;
text-align: center;
margin-left: auto;
margin-right: auto;
}

table.nav2 td {
width: 90px;
border-right: solid 1px red;
padding: 0;
}

table.nav2 td.last {
border-right: 0;
}

table.nav2 a:link, table.nav2 a:visited {
color: red;
text-decoration: none;
display: block;
padding: 5px;
font-weight: bold;
}
table.nav2 a:hover, table.nav2 a:active {
color: black;
background: red;
text-transform: uppercase;
}

</style>

Raw HTML

<table class="nav2">
<tbody>
<tr>
<td><a href="1-15.html">Peach</a></td>
<td><a href="1-14-S.html">Viridian</a></td>
<td><a href="1-13-1.html">Gold</a></td>
<td><a href="1-13.html">Blue</a></td>
<td><a href="1-12.html">Cyan</a></td>
<td class="last"><a href="1-11-S.html">Indigo</a></td>
</tr>
</tbody>
</table>

Light Blue, Subtle (List)

I know that way back I told you it wasn't possible to use the bullets of an unordered list when converting it to a horizontal list. Well I was lying; I just wanted to make things easier! Turns out that if you fiddle around with the padding enough and account for the last item (which is actually blank), you can effectively use bullets within a horizontal list. However, I'm giving you fair warning: you might drive yourself crazy trying to get these numbers to work out, especially if you start playing with the sizing as much as we do in some of these other examples! The default padding of ul for most browsers is 40px, and unless you're working under the influence of a style sheet that has changed this property (which is possible, but not very likely), you can use this is a rough starting point. Still, prepare for things to get hairy. I'm actually not 100% positive if that first bullet and last bullet are equally spaced from the edges of the table. I could probably use the browser's Inspect Element to crunch some numbers and figure it out, but the bottom line is that the answer is not obvious. You could of course leave off the final bullet, but the overall impact would be lost. The real trick would be to get rid of that first one, but so far I haven't quite figured that out! Anyway, this is a nice subtle menu, vaguely reminiscent of Wikipedia's navigation boxes at the bottom of their articles. I would really love to see something like this at the bottom of all (or most) of our articles to point to similar games, others in the series, larger links to the genre and platform, etc. If anyone wants to get to work designing a template where we could all fill in the blanks, we would be most appreciative...

Internal Style Sheet

<style>

ul.nav3 {
list-style-type: disc;
overflow: hidden;
margin-left: auto;
margin-right: auto;
border: solid 1px #add8e6;
width: 470px;
}

ul.nav3 li {
float: left;
color: #1e5262;
text-align: center;
font-style: italic;
padding-left: 0;
padding-right: 25px;
font-size: small;
width: 50px;
}

ul.nav3 li.end {
padding-right: 0;
width: 0;
}

ul.nav3 a:link, ul.nav3 a:visited {
background: #fff;
display: block;
}

ul.nav3 a:hover, ul.nav3 a:active {
background: #add8e6;
color: black;
text-shadow: none;
font-style: italic;
text-decoration: none;
}

</style>

Raw HTML

<ul class="nav3">
<li><a href="1-15.html">Peach</a></li>
<li><a href="1-14-S.html">Viridian</a></li>
<li><a href="1-13-1.html">Gold</a></li>
<li><a href="1-13.html">Blue</a></li>
<li><a href="1-12.html">Cyan</a></li>
<li><a href="1-11-S.html">Indigo</a></li>
<li class="end"></li>
</ul>

Icon Menu with Fade (Table)

Here's a little fun with images! Note that if you hover over an image, it fades slightly. (This is actually the opacity decreasing, and since the background is black, it seems to fade.) Plenty of practical applications for using images, be they icons or graphic labels. One piece of advice though: it's best to keep all the images the same size. You don't necessarily have to distort images to do this either. When you come up with a size - say 25px by 25px in this case - simply resizing any image to 25 x 25 will distort it unless it's already a square (1:1 ratio of width to height). To get around this, maintain the original aspect ratio when resizing, and just make sure to resize the largest dimension to the corresponding maximum. Then create a blank image of your original size and then paste and center the resized image. For example, say we have an image that's 200 by 100 and we need to fit it into 50 x 50. We maintain original aspect ratio (2:1) and resize largest dimension, in this case 200, down to 50. This will bring 100 down to 25. your new image will be 50 x 25. Now create a blank 50 x 50 image and paste the 50 x 25 image on it. Now you've got your 50 x 50 image! All of this isn't strictly necessary, but it will give you that uniform look; the width of the cells will all the same and the space in between will all be the same, something that's not possible using words of varying lengths. If nothing else, at least make sure the height of all images is the same!

Internal Style Sheet

<style>

table.nav4 {
border-collapse: collapse;
border: groove 3px lime;
background: #000;
text-align: center;
margin-left: auto;
margin-right: auto;
}

table.nav4 img {
vertical-align: middle;
}

table.nav4 td {
width: 25px;
border-right: groove 3px lime;
padding: 0;
}

table.nav4 td.last {
border-right: 0;
}

table.nav4 a:link, table.nav4 a:visited {
text-decoration: none;
display: block;
padding: 10px;
}

table.nav4 a:hover, table.nav4 a:active {
background: #000;
}

table.nav4 a img:hover {
zoom: 1;
filter: alpha(opacity=10); opacity: 0.7;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}

</style>

Raw HTML

<table class="nav4">
<tbody>
<tr>

<td><a href="1-15.html">
<img src="Greased/badges2/sized/penguin.png" /></a></td>

<td><a href="1-14-S.html">
<img src="Greased/badges2/sized/wing.png" /></a></td>

<td><a href="1-13-1.html">
<img src="Greased/badges2/sized/spring.png" /></a></td>

<td><a href="1-13.html">
<img src="Greased/badges2/sized/mc.png" /></a></td>

<td><a href="1-12.html">
<img src="Greased/badges2/sized/ice2.png" /></a></td>

<td><a href="1-15-1a.html">
<img src="Greased/badges2/sized/joust.png" /></a></td>

<td><a href="1-15-1b.html">
<img src="Greased/badges2/sized/hammer.png" /></a></td>

<td><a href="1-15-1c.html">
<img src="Greased/badges2/sized/banana.png" /></a></td>

<td><a href="1-15-1d.html">
<img src="Greased/badges2/sized/shell.png" /></a></td>

<td class="last"><a href="1-11-S.html">
<img src="Greased/badges2/sized/shine.png" /></a></td>

<tr>
</tbody>
</table>

Big & Basic (List)

A big ol' no frills menu, or at least not that many frills. No borders, not much tricky stuff going on with backgrounds, paddings, or text transformations. The aesthetics can be modified however you wish (as can pretty much all of these), it's the simple structure I want to draw the most attention to here. Oh, I also did one other little strange thing that I don't do anywhere else in these examples. Instead of setting fixed widths for each item and adding them all up, I instead created an equal amount of padding between each item. What does this mean? This means that instead of the text of each item existing in an invisible box that's the same size for each item, the text exists in a box big enough to contain it (for instance the box containing "Gold" is smaller than the one containg "Viridian") and the space between each item is uniform. This makes it a little more difficult to deduce a width (not necessary with tables, but required for lists if you plan on centering them) - thankfully I can use my browser's Inspect Element function to show me the widths of each item. Then it's just the matter of adding them up! A little complicated for something "basic"? Maybe, but this menu can be done with fixed widths as well. I just wanted to demonstrate what consistent padding versus fixed widths looked like. Sometimes - especially in situations without dividers/borders or only a few, large items, or those with big differences in default size (like the difference between having "Bee" as one item and "Peregrine Falcon" as another) - the even spacing of the items can be more visually appealing than the fixed widths.

Internal Style Sheet

<style>

ul.nav5 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 606.7665px;
margin-left: auto;
margin-right: auto;
}

ul.nav5 li {
float: left;
width: auto;
font-size: x-large;
text-align: center;
text-shadow: 4px 4px #000;
font-weight: bold;
}

ul.nav5 a:link, ul.nav5 a:visited {
color: #fff;
background: #cc0066;
display: block;
padding: 20px;
}

ul.nav5 a:hover, ul.nav5 a:active {
background: #b30059;
color: #000;
text-shadow: 2px 2px #fff;
text-decoration: none;
}

</style>

Raw HTML

<ul class="nav5">
<li><a href="1-15.html">Peach</a></li>
<li><a href="1-14-S.html">Viridian</a></li>
<li><a href="1-13-1.html">Gold</a></li>
<li><a href="1-13.html">Blue</a></li>
<li><a href="1-12.html">Cyan</a></li>
<li><a href="1-11-S.html">Indigo</a></li>
<li></li>
</ul>

Different Backgrounds, No Text (Table)

How useful is a menu without text? I'm not sure, but here's how to do it nonetheless. Writing the CSS rules for this can be almost as time-consuming as using inline CSS...except of course here we need to rely on pseudoclasses to give us that color changing effect. What we have to do is create a class for each item, and then define that class in terms of what background color it has at rest (in its unvisited and visited states; most of the time nowadays these are identical) and also the background color as it's hovered upon (remember we can also control the color at the moment it's clicked, though most designers set this identically to the :hover pseudoclass). By setting the fixed widths and links as block elements, we're able to create clickable "areas" that don't rely on text!

Internal Style Sheet

<style>

table.nav6 {
border-collapse: collapse;
border: solid 3px #000;
text-align: center;
margin-left: auto;
margin-right: auto;
}

table.nav6 td {
width: 80px;
padding: 0;
}

table.nav6 td.item1 {
background: #00ff00;
}

table.nav6 td.item2 {
background: #ffff00;
}

table.nav6 td.item3 {
background: #ff0000;
}

table.nav6 td.item4 {
background: #0000ff;
}

table.nav6 a:link, table.nav6 a:visited {
color: #000;
text-decoration: none;
display: block;
padding: 30px;
font-weight: bold;
}

table.nav6 a:hover, table.nav6 a:active {
color: #fff;
}

table.nav6 a.item1:hover, table.nav6 a.item1:active {
background: #006200;
}

table.nav6 a.item2:hover, table.nav6 a.item2:active {
background: #626200;
}

table.nav6 a.item3:hover, table.nav6 a.item3:active {
background: #620000;
}

table.nav6 a.item4:hover, table.nav6 a.item4:active {
background: #000062;
}

</style>

Raw HTML

<table class="nav6">
<tbody>
<tr>

<td class="item1">
<a class="item1"href="1-15.html">Peach</a></td>

<td class="item2">
<a class="item2" href="1-14-S.html">Viridian</a></td>

<td class="item3">
<a class="item3" href="1-13-1.html">Gold</a></td>

<td class="item4">
<a class="item4" href="1-13.html">Blue</a></td>

</tr>
</tbody>
</table>

Rounded "Buttons" (Table)

Building on the above concept, this time I decided to round off the buttons. This can be tricky; instead of defining a background for the entire table or each td element, we have to define them through the links (<a> tags) so that we can maintain the circular shape. This is one of my personal favorites. It has an old school flair without all the hard edges and simple colors, plus it looks like a panel of lights.

Peach Viridian Gold Blue Cyan Indigo

Internal Style Sheet

<style>

table.nav7 {
border-collapse: collapse;
border: outset 5px #000;
background: #000;
text-align: center;
margin-left: auto;
margin-right: auto;
background: #000;
}

table.nav7 td {
width: 80px;
border-right: solid 1px #000;
padding: 0;
}

table.nav7 td.last {
border-right: 0;
}

table.nav7 a:link, table.nav7 a:visited {
color: #000;
text-decoration: none;
display: block;
padding: 5px;
font-weight: bold;
font-variant: small-caps;
border-radius: 20px;
}

table.nav7 a:hover, table.nav7 a:active {
color: #fff;
border-radius: 20px;
}

table.nav7 a.button1:link, table.nav7 a.button1:visited {
background: #fe2712;
}

table.nav7 a.button1:hover, table.nav7 a.button1.active {
background: #5f0900;
}

table.nav7 a.button2:link, table.nav7 a.button2:visited {
background: #fb9902;
}

table.nav7 a.button2:hover, table.nav7 a.button:active {
background: #5f3a01;
}

table.nav7 a.button3:link, table.nav7 a.button3:visited {
background: #fefe33;
}

table.nav7 a.button3:hover, table.nav7 a.button3:active {
background: #595900;
}

table.nav7 a.button4:link, table.nav7 a.button4:visited {
background: #66b032;
}

table.nav7 a.button4:hover, table.nav7 a.button4:active {
background: #284514;
}

table.nav7 a.button5:link, table.nav7 a.button5:visited {
background: #0247fe;
}

table.nav7 a.button5:hover, table.nav7 a.button5:active {
background: #00164f;
}

table.nav7 a.button6:link, table.nav7 a.button6:visited {
background: #8601af;
}

table.nav7 a.button6:hover, table.nav7 a.button6:active {
background: #4a0161;
}

</style>

Raw HTML

<table class="nav7">
<tbody>
<tr>
<td><a class="button1" href="1-15.html">Peach</a></td>
<td><a class="button2" href="1-14-S.html">Viridian</a></td>
<td><a class="button3" href="1-13-1.html">Gold</a></td>
<td><a class="button4" href="1-13.html">Blue</a></td>
<td><a class="button5" href="1-12.html">Cyan</a></td>
<td class="last"><a class="button6" href="1-11-S.html">Indigo</a></td>
</tr>
</tbody>
</table>

Big Buttons, Gradients, and No Border Collapse (Table)

It's tough to make 2 borders at once look good, but I at least wanted to demonstrate what a table without border-collapse: collapse; looks like. Notice the thin outer black border - that's the border for the entire table element. Now notice the larger red ones - these border each individual cell (td element). Alternatively we could remove the thin black border altogether, giving this the appearance of 6 discrete cells. Either way, larger borders like this around each cell can help maximize the appearance of buttons.

Peach Viridian Gold Blue Cyan Indigo

Internal Style Sheet

<style>

table.nav8 {
border-collapse: separate;
border: solid 1px #000;
background: #fff;
text-align: center;
margin-left: auto;
margin-right: auto;
}

table.nav8 td {
width: 102px;
border: 8px outset #f00;
padding: 0;
font-size: small;
}

table.nav8 a:link, table.nav8 a:visited {
color: #fff;
width: 102px;
text-transform: uppercase;
background: linear-gradient(to bottom, #000, #800020, #ff809f);
display: block;
padding-top: 20px;
padding-bottom: 20px;
}

table.nav8 a:hover, table.nav8 a:active {
color: #f00;
text-transform: capitalize;
text-decoration: underline;
background: linear-gradient(to bottom, #ff809f, #800020, #000);
}

table.nav8 td:hover {
border: outset 8px #800080;
}

</style>

Raw HTML

<table class="nav8">
<tbody>
<tr>
<td><a href="1-15.html">Peach</a></td>
<td><a href="1-14-S.html">Viridian</a></td>
<td><a href="1-13-1.html">Gold</a></td>
<td><a href="1-13.html">Blue</a></td>
<td><a href="1-12.html">Cyan</a></td>
<td><a href="1-11-S.html">Indigo</a></td>
</tr>
</tbody>
</table>

Simple Fun with Horizontal Gradients (Table)

Gradients are something I've recently discovered and although they can look a little gaudy, they can also be tasteful if the right combinations of colors are used. Gradients can have multiple stops, one can dictate where these stops happen, and gradients can be linear (vertical, horizontal, and diagonal) or radial (circular and ellipsoid).

Peach Viridian Gold Blue Cyan Indigo

Internal Style Sheet

<style>

table.nav9 {
border-collapse: collapse;
border: solid 3px blue;
background: #fff;
text-align: center;
margin-left: auto;
margin-right: auto;
}

table.nav9 td {
width: 80px;
padding: 0;
}

table.nav9 a:link, table.nav9 a:visited {
color: #00f;
text-decoration: none;
display: block;
font-weight: bold;
padding: 10px;
}

table.nav9 a:hover, table.nav9 a:active {
color: #ff0;
font-variant: small-caps;
}

table.nav9 a.odds:link, table.nav9 a.odds:visited {
background: linear-gradient(to bottom right, lime, cyan, blue);
}

table.nav9 a.odds:hover, table.nav9 a.odds:active {
background: linear-gradient(to bottom right, blue, cyan, lime);
}

table.nav9 a.evens:link, table.nav9 a.evens:visited {
background: linear-gradient(to bottom right, blue, cyan, lime);
}

table.nav9 a.evens:hover, table.nav9 a.evens:active {
background: linear-gradient(to bottom right, lime, cyan, blue);
}

</style>

Raw HTML

<table class="nav9">
<tbody>
<tr>
<td><a class="odds" href="1-15.html">Peach</a></td>
<td><a class="evens" href="1-14-S.html">Viridian</a></td>
<td><a class="odds" href="1-13-1.html">Gold</a></td>
<td><a class="evens" href="1-13.html">Blue</a></td>
<td><a class="odds" href="1-12.html">Cyan</a></td>
<td><a class="evens" href="1-11-S.html">Indigo</a></td>
</tr>
</tbody>
</table>

Discrete Buttons (Table)

My gut tells me that this is something done much easier using tables, but feel to recreate it using a list if you feel up to it! In this example we're going to use the table's ability to contain 2 different borders (one for table and one for each td) to our advantage and combine it with the border-spacing property to create some "empty" space between cells. This empty space will give us the appearance of separate, individual buttons - and the CSS is lighter than you might expect!

Peach Viridian Gold Blue Cyan Indigo

Internal Style Sheet

<style>

table.nav0 {
border-collapse: separate;
border: 0;
border-spacing: 20px;
text-align: center;
margin-left: auto;
margin-right: auto;
}

table.nav0 td {
padding: 0;
width: 100px;
}

table.nav0 a:link, table.nav0 a:visited {
display: block;
background: #00ff7f;
color: #007fff;
font-weight: bold;
text-decoration: none;
padding: 10px;
}

table.nav0 a:hover, table.nav0 a:active {
background: #00763b;
color: #003b76;
box-shadow: 5px 5px 10px #000;
}

</style>

Raw HTML

<table class="nav0">
<tbody>
<tr>
<td><a href="1-15.html">Peach</a></td>
<td><a href="1-14-S.html">Viridian</a></td>
<td><a href="1-13-1.html">Gold</a></td>
<td><a href="1-13.html">Blue</a></td>
<td><a href="1-12.html">Cyan</a></td>
<td><a href="1-11-S.html">Indigo</a></td>
</tr>
</tbody>
</table>

That's it for me! Most of these I came up with off the top of my head utilizing concepts I'm already aware of. Many of these can be combined and I'm sure there are many, many cool features I haven't touched on. Once again I definitely encourage experimentation, but I'm also willing to lend a hand if you're serious. Most of these are geared towards larger menus that would be perfect for larger divisions on a site or within a section, but that doesn't mean we can't tailor them to smaller lists and navigation boxes at the end of articles. Keep these in the back of your mind and make lists, tables, and menus part of your thought process when it comes to reviewing for Nerd Bacon!

NerdBerry
NerdBerry@NerdBacon.com		 The Cubist
TheCubist@NerdBacon.com
Doc Croc
DocCroc@NerdBacon.com
 
Issue #15.1E November 6th, 2015 Volume 1