---

Greased 1.15.1B - Advanced HTML Lists: Horizontal Menus

November 6th, 2015

Finally we're going to get our feet wet in a little bit of advanced territory. Truthfully this would be easier if you had access to site's CSS file or if WP would let you create (and actually use) style tags within the document (and you can...sort of...we'll get to that...), but there's still a doable workaround. If by chance you end up crafting something really nifty, talk to me and we'll get it in the site's CSS file. What we're going to do here is make a horizontal list! Why is that important? For one thing, it's an awesome start to a small navigation menu. You can put these at the bottom of your posts to link to similar posts, make them for the hub page of your column, or really anywhere that might require a handful of links. For a working example, check out my Favorite 90's Albums, click on any album, and check out the working menus at the top and bottom of each page. Yours doesn't have to look like this - there are a lot of options - but it's just one cool use of horizontal lists.

If you read through all of this and if it seems too daunting but you still like the idea, you may want to check out how to do the same thing with HTML tables. Is it any easier? I don't know. But the more I started looking at what I'd created, the more I got to thinking, "hey, I think I could make the same thing with a table," and as it turns out, in less time than I expected, I replicated it exactly using a table instead of a horizontal list. Using tables is a bit more "old school" but it's also a little more intuitive and less abstract. Most people can understand concepts like "columns, rows, and cells" easier than stuff like "block elements, inline, and float." Go take a look!

Before we get into full swing, I should probably warn you that these horizontal lists will not look horizontal in the Visual editor. I don't know why the Visual editor won't accept this type of coding, but it doesn't. However, if you've coded it right, once you click the Preview button it should show up like it's supposed to in the final document. If you get really serious (or perhaps really frustrated with trying to pull this off on the site itself), there are some ways to "practice" all of the information below (and in 1.15.1) that will be simpler and cleaner than doing so on-site.

For playing with quick snippets of code with instant results I recommend the W3School's "Try It" Editor. It's a great tool and I use it all the time to test out simple concepts before I implement them in a larger context. It's a cool way to see if something works before you construct an entire document around something.

If and when you're ready to try your hand at a full-fledged original piece of work, there are lots of standalone HTML editors available. These can simplify the process to varying degrees, however, I strongly urge against "WYSIWYG"-type editors or those that automatically generate tags. It's best to learn syntax and tagging on your own; trust me, you'll be better for it in the long haul. For this reason, I like to go with something simple like Notepad++. It's free and lightweight, and it's basically what it sounds like - an enhanced version of Notepad. What's great about it is that each time you create a document, you can specificy the language you're writing it in, including both HTML and CSS. Notepad++ won't do the hard stuff for you, but it will help you keep track of things like open tags within HTML documents and open declarations within CSS. It doesn't do the work for you, but it does help organize the work you've done.

You should be able to do a wide range of things within WordPress itself (even much of what we're about to go over next), so don't feel like you really need anything extra, but I do want to throw these suggestions out there for those of you who may wish to keep on experimenting and tackle the really difficult stuff.

---

As I said, this is a little bit advanced, and we're going to have to do some legwork without being able to easily create a style section or get into the main CSS file, but once you have the menu laid out, you can copy and paste the code wherever you need it. You can even change out the links as needed without having to redo the entire segment. So let's get to it; first we have to start with a list, and in this case an unordered list. Since the list is horizontal, we won't be needing the bullets, and even if you wanted them, the default spacing won't allow you to put them to any real use. It'll just be an overlapping jumble of words and bullets. We also don't want or need all that default spacing we previously discussed, so that's got to go too. We already know how to do all of this, right? We use <ul style="list-style-type: none; margin: 0; padding: 0;"> and our list will look like...

• Peach
• Viridian
• Gold
• Blue
• Cyan
• Indigo

Nothing new just yet, right? Good. The simplest way to create a horizontal list takes just one more step! Now we're going to designate each one of the li elements to display inline. Normally li is what's called a block element, meaning there are line breaks before and after. This is essentially what makes a "list" a "list," the fact that each item is on a separate line. By changing the display properly to inline, we remove those line breaks. Technically this is all you really need to make a horizontal list, but we had to do all that other stuff to make sure that it looks normal when those line breaks are removed. To display the li elements inline, we need to do the following for all <li> tags: <li style="display: inline;">. Now our list looks like this:

• Peach
• Viridian
• Gold
• Blue
• Cyan
• Indigo

From there we just add links (you can use WordPress to do this simply and easily) to each item and we've got a basic but functional menu! It looks better than a vertical list of links in some cases, and although you can accomplish the same thing using trial and error and a bunch of  's, this is a lot easier. You can even space the words out a little by adding some padding to each item. It might look a little something like <li style="display: inline; padding: 10px;">. Yes, you'll have to do this for each and every li, but copy and paste can make quick work of it. Here's the list with links and 10 pixels worth of padding:

• Peach
• Viridian
• Gold
• Blue
• Cyan
• Indigo

Not bad, huh? Overall this method is pretty easy, but it does leave some aspects harder to control than others. For instance even though the items are now displayed inline, the ul element itself is a block element, meaning it takes up the entire width of its parent container, thus making it a little harder to center. Similarly, if you try to put a border around it, you'll notice it goes well on past the words themselves. However, you can get around this by specifying an exact width that comes close to all the items put together and then setting the left and right margins to "auto." Still, this is bit imperfect and if you want to take it to the next level you're going to have to do things a little differently.

---

Let us rewind just a little bit, back before we started messing with the <li> tags. This time the list items are going to remain as block elements and we're going to get them to sit next to one another by using float. There are a lot of options when it comes to alignment, but to make things easy, we're going to float all of these items to the left. This may not make much sense but hang tight; for now imagine each li as an actual block, and "float" is our way of telling them to sit side-by-side intead of on top of each other. Right now, every block is the length of its contents (plus any margins, padding, or borders, but we're not dealing with that right now). To make our "menu" look a little more like a "menu" and less like a horizontal list of linked words, we're doing to make all these blocks the same size by defining a common width for each li. And for just one more extra bit of polish, we're going to center the text of each li within that block.

Remember, we want to keep the stuff in the <ul> tag that we already placed earlier, we just need to add one thing so that everything lines up properly. I'm not 100% clear on what's "overflowing" and how "hiding it" gives us the line break we need, but it does. I'm not the only one baffled by this mystery either, but apparently it has something to do with floating elements and ul behavior, which is exactly what we have here. It's a well documented but poorly explained phenomenon. As much as I'd like to be able to tell you why you're doing what you're doing (and as much as I'd like to know myself) I don't have a good answer. Just know that you'll need to add overflow: hidden to your <ul> tag. Your completed ul should look like the following: <ul style="list-style-type: none; margin: 0; padding: 0; overflow: hidden;">. Now we're going to make the adjustments to each and every <li> tag. The completed tag will look like this: <li style="float: left; width: 60px; text-align: center;">. With float: left, we're telling all the blocks to file in, starting on the left. Next, width: 60px; is defining each block as being 60 pixels wide. You may need to adjust this depending on the length of the items in your list, just make sure it's the same for all of them. Finally, text-align: center is centering the text within the block. Here's what all that looks like put together:

• Peach
• Viridian
• Gold
• Blue
• Cyan
• Indigo

Not bad, but we're still just kind of shoving things around. It doesn't look much like a menu yet, or at least not any more so than when we first broke the list up horizontally. Our next job is going to be to add some flair, which will be done using the links themselves. Once you've gotten this far, go ahead and use WordPress to insert your links. You should see the links expressed as <a href="LINK URL HERE">. This is the snippet we're going to play with. We're not going to remove or modify anything that's already there, but we will add some stuff. First we're going to give it some color by using background. You can set the color to whatever you like through a variety of methods; I recommend going with simple hex codes which can be found in abundance across the web. In this case, I'm going to use a fairly dark purple, #800080. This is a good juncture to explain why we did something earlier - the fixed widths. Without them, the background color would sprawl out everywhere, but since we've told our lis to behave as neat little 60 pixel blocks, that's as far as the color goes. Next, we want these blocks to act more like buttons. To do that, we're going to make the whole block clickable, not just the text, and we'll do it by defining the links as blocks.

So what does all this look like? Well it's not too bad. Within the <a> tag, we need to add style="background: #800080; display: block;". Keep in mind that there's already gonna be other stuff in the tag - don't mess with it! Just add to it. It doesn't really matter what order each attribute is placed in, just so long as everything inside is the same. For instance <a href="LINK URL HERE" style="background: #800080; display: block;"> functions identically to <a style="background: #800080; display: block;" href="LINK URL HERE">. Make sure you link up all of your items and make additions to all of the links. Once we put all this together, we have...

• Peach
• Viridian
• Gold
• Blue
• Cyan
• Indigo

Now that's starting to look a little more like a menu! With a little more touching up here and there, we can really turn this into something special. Almost all of this can be done with inline CSS, though the pseudoclasses involved with links cannot. Previously I thought it was impossible to use style within a WP document (meaning one would have to have access to the main CSS file to get certain features to work) but just moments ago I discovered an interesting workaround that I'll share in a moment. For right now though, let's look at this fully styled menu. Go ahead and hover over a few squares and check out what happens!

• Peach
• Viridian
• Gold
• Blue
• Cyan
• Indigo

Admittedly this is a little more complex that what I've been going over, but fundamentally it's the same thing - a horizonal list with block elements. Much of the polish is achieved through the use of borders and "font tricks," some of which I discussed back in issue #6. A lot of being good with HTML/CSS and being a good designer in general (not that I'm one of them) isn't so much about endlessly memorizing tags and properties and attributes and values and declarations and elements, but instead having the foresight to put these various concepts together in novel and interesting configurations.

---

Alright, if you've made it this far, you probably don't want to hear me ramble on about HTML and CSS - you want to know exactly how I made the previous menu! Providing the raw markup for this menu would be somewhat misleading since that's not exactly how I wrote it. Instead I defined certain elements using an internal style sheet that I wrote along with the actual HTML. Because of this, the HTML itself is much simpler and much less repetitive. Remember how each time we added something to an li tag we had to add it to each and every li? Well style sheets, both internal and external, provide a bit of a shortcut. To put it simply, let's take the style="float: left;" that we needed to add into every <li> tag as an example. Sure, we can paste that bit into each and every li tag, but there's an easier way. With a style sheet, we can define a class that contains float: left; as an attribute. We can name that class anything we want; designers usually use something short and vaguely descriptive of its function. Let's call ours "fleft" as in "float left." Now all we have to do is assign this class to whichever lis need the float: left; property. Each li tag then becomes <li class="fleft"> as opposed to <li style="float: left;">.

This is better than before, but I think we can make it easier still. What if we had 100 or 200 or 1,000 list items? To save even more time and text, we can instead define properties for an element that li occurs "within." This will vary from case to case depending on exactly what tag you're working with, but in this example, we know that li always occurs within a ul (or ol) tag. What we can then do is create a class for ul - let's call it "eezee" (like "easy," since that's what it'll make our job). Then, through the use of the style sheet, we can basically say "all li tags within an 'eezee' class ul must float: left;." When it comes to the markup, we kick off the list with <ul class="eezee"> and then proceed with each li as normal. Now all li tags within ul class="eezee" will have the attribute float: left;! You can also go back to using just ul for regular lists, and go on to define even more classes with several properties. This concept is pretty much what modern CSS and HTML is founded upon - define elements in CSS, implement them using HTML. And of course we can use inline CSS (which is what we've been doing) for all the little quirks in between.

With all that being said, it is technically possible for me to provide inline CSS and thus the raw markup from our latest menu that will account for most of what you see. I'm hesitant to do so due to the length and complexity, but if even one reader picks up on this, it'll be worth it. Afterwards, I'm going to a) show you the internal style sheet I derived from all that inline CSS, b) show you the actual HTML that works with the style sheet, and c) tell you how to work around WP's limitations of apparently not supporting internal style sheets. Deep breath, here we go...

<ul style="list-style-type: none; margin: 0; padding: 0; overflow: hidden; width: 485px; margin-left: auto; margin-right: auto; border: groove 3px #000;">

<li style="float: left; width: 80px; text-align: center; text-shadow: 2px 2px #000; font-weight: bold; border-right: solid 1px #000;">

<a href="1-15.html" style="background: #800080; display: block; padding: 5px;">

Peach</a></li>

<li style="float: left; width: 80px; text-align: center; text-shadow: 2px 2px #000; font-weight: bold; border-right: solid 1px #000;">

<a href="1-14-S.html" style="background: #800080; display: block; padding: 5px;">

Viridian</a></li>

<li style="float: left; width: 80px; text-align: center; text-shadow: 2px 2px #000; font-weight: bold; border-right: solid 1px #000;">

<a href="1-13-1.html" style="background: #800080; display: block; padding: 5px;">

Gold</a></li>

<li style="float: left; width: 80px; text-align: center; text-shadow: 2px 2px #000; font-weight: bold; border-right: solid 1px #000;">

<a href="1-13.html" style="background: #800080; display: block; padding: 5px;">

Blue</a></li>

<li style="float: left; width: 80px; text-align: center; text-shadow: 2px 2px #000; font-weight: bold; border-right: solid 1px #000;">

<a href="1-12.html" style="background: #800080; display: block; padding: 5px;">

Cyan</a></li>

<li style="float: left; width: 80px; text-align: center; text-shadow: 2px 2px #000; font-weight: bold; border-right: 0;">

<a href="1-11-S.html" style="background: #800080; display: block; padding: 5px;">

Indigo</a></li>

</ul>

See what a mess that is? And that's even with me trying to organize it - first the opening ul on a line, then the li and all its properties on a line, followed by a line of a and all of its attributes, and then the actual li and closing tags. Six items equals 6 li tags; 6 links equals 6 a tags. All this and we still don't have everything. Notice how when you mouseover a box the background changes, the font color changes, the shadowing disappears, and the text becomes both italicized and turned into "smal caps." This cannot be done with inline CSS due to the pseudoclasses used (it's one of only a very few things that can't be done inline) and the information must be provided via internal or external style sheet.

Actually, let's take a moment and see just how far the above markup will get us; how close to my "fancy" menu can we get? Here's that same HTML put to purpose:

• Peach
• Viridian
• Gold
• Blue
• Cyan
• Indigo

I hadn't originally thought to see exactly what this would yeild, but I'm glad I took the time. We're missing the "fancy" hover effects (what you see is only what I've set in the external style sheet that applies to links in general throughout this document) but otherwise things are looking pretty darn good - proof that as tedious as using this much inline CSS can be, it still can and will work if you take it one element at a time.

---

Now let's go back to the "fancy" version and take a look at the quick internal style sheet I wrote (everything between the <style> tags; you'll notice the syntax is a bit different than what we've been looking at for the most part) as well as the raw HTML that uses this style sheet. It is much simpler and neater.

It's at least easier to say which looks neater, right? Plus, the above example lacks all that endless repetition! And we can repeat this menu over and over throughout the document using the same internal style sheet, without having to repeat it again and again. Even better, if we put this snippet of CSS (everything between the <style> tags) into the site's main CSS file, we can use that same small piece of HTML across multiple documents without ever having to type up (or copy/paste) that batch of CSS ever again! The advantages are obvious, but of course the learning curve is higher as well, and it's easier to run through a few pieces of inline CSS and tell you exactly how and where to use them rather than inundate you with internal style sheets.

---

A few times now I've mentioned that WordPress "sanitizes" any attempts at inserting one's own internal style sheet in a document. However, I started playing around with it to figure out just what was specifically happening to the text, and the answer is pretty simple - and so is the workaround - unfortunately, it's kind of a pain in the ass to implement. Normally in WP's Visual editor, pressing "Enter" (or "Return") will automatically insert a paragraph break (<p>; more specifically it wraps all the text from the last carriage return to the current with <p> / </p> tags). You should notice that pressing "Enter" not only moves you down a line, but leaves a blank line as well. When you move into the Text editor, and thus move into editing the document's raw markup, pressing "Enter" only moves you down a single line! Now within regular text it will interpret this as a simple line break (<br />) where you move down one line without creating an empty space. Fortunately though, if you're "within" a tag, a single press of "Enter" will act as nothing more but a cosmetic change within the markup. However, if you build or paste an internal style sheet into the Text editor and there are any blank lines, WP will turn these into full-fledged paragraph breaks in the finished document, thus ruining your style sheet. Why? I'm not sure. I suppose it's just a simple shortcut imposed by WP and there's no doubt that it saves more headaches than it causes. I guess the idea is to let the writer play around with the more obvious points of HTML without having to worry about minutiae like <p> tags. Anyway, that's what's happening when trying to build an internal style sheet in WP's Text editor - all of those blank lines are being translated as paragraph stops in the final document, and although it recognizes the actual <style> tags, all the stuff in between is peppered with <p> and </p>, which pretty much renders it useless.

Have you figured it out yet? If WP recognizes style yet 2 or more carriage returns interrupt the content within, what's the solution? That's right - no multiple carriage returns! In a normal HTML document, you can press return all day long - or never - the final document doesn't take carriage returns into account. At all. That's why we have to use things like paragraph breaks (<p> tags) and line breaks (<br />). Visible breaks in a raw HTML document are inserted purely at the author's discretion, typically to organize the content visually, but when it comes to the end result, it's the tags that tell the browser what to display. So an internal style sheet with no "empty lines"...this means we can either do something crazy like type it all out as a single line and let the Text editor wrap it where it may (not recommend; you'll never find your mistakes...) or to be careful and never press "Enter" more than once while between those style tags.

More trouble than it's worth? Maybe. It depends on how badly you want to add a bit of flair to your piece. The easiest thing to do is to type out the style sheet however you want, and then go back through and close up any blank lines using "Backspace" or "Delete." I've been playing with this at length with small bits of CSS and barring blank lines, internal style sheets seem to work in WordPress! This is very good news! But there is a rough drawback: if at any point you switch back over to the Visual editor, it will elimate those style tags and everything in between. Now normally when we switch to the Visual editor all the HTML tags simply "disappear," but they're still actually there. Not so with style. Switch to Visual, watch it disappear, go back to Text, and it's like you never put it in there. This may be more hassle than you're willing to deal with. Sure, you can make sure the article is perfect otherwise and then switch to the Text editor and create/test the style sheet, but get this: if and when you need to edit that document, if you land on it in the Visual editor, it's gone again (although it's not totally "gone" since it hasn't been saved). When you access a document for editing in WP, WP loads it in the editor that you most previously saved from. So if I just saved a document while the Text editor was on my screen, the very next time I edit a document, I'll be presented with the Text editor. Same goes for Visual. So in order to really get above the aforementioned mess, before you edit the article in question, you'll want to go into a neutral article, switch it over to the Text editor, save it, and then open up the document containing the internal style sheet. Yeah, kinda sucks.

In the end, while possible, internal style sheets may not be worth the hassle. I wish WordPress didn't have some of these quirks, but quite honestly it's probably quirks like these that keep the system so easy to use for those who would be scared off by anything looking too unfamiliar. And that's ok. Inline CSS can, does, and will work reliably within a WP document, and as we demonstrated earlier, we can almost fully realize my "fancy" menu. We'll call it "Fancy Jr." The truth is if you're serious about doing something like this and want to try your hand at it, I'll be glad to help and I'll be glad to stick whatever bits of CSS you need in the site's main file if that's what it comes down to. I wholeheartedly encourage any and all of you to give this a shot if you think it could even be mildly useful. I know my example was a little vivid and flashy, but I just wanted to show off several possibilities while sticking to a familiar(ish) example. You can do more or less with yours and I'd be glad to assist as time allows. Give it a shot and let me know how it goes!

---

Oh and one last thing: I hate do to all of this and leave someone in the dark, and it always makes me angry when I try and work my through a tutorial, carefully plodding away, only for the author to say, "and now check out this totally awesome thing you can do if you know as much as I do!" And I'm starting to feel just a little like that's what I've done. This "guide" is long enough already and I'm not really the person to learn CSS from, but for those who care, I am going to explain all those little extra flourishes in the style sheet and where some of the tricky stuff comes to play. Everything above is all you'll need to replicate the menu, but if you want to know more about what's happening and why it's happening, check out the advanced CSS explained. Even if you don't play on doing something this complicated, it might be worth a quick read-through just to see how crazy CSS can get. And although not stricty required, it might be helpful to understand what's going on here if you plan on giving doing the same thing with tables a look. It's a good way to see which parts are the same and which are done differently!

---

Advanced CSS Explained

---

Doing It with Tables

---

Example Variations

---

NerdBerry NerdBerry@NerdBacon.com	The Cubist TheCubist@NerdBacon.com
Doc Croc DocCroc@NerdBacon.com