Today I'm going to show you how to make a geometric menu for your blog's sidebar using HTML and CSS, including a neat little CSS trick to create triangle points. Your menu will look something like the title image above. You can check out a live demo here.
If you're new to web development you may wonder why I'd make simple shapes like this with CSS instead of using images or image map. I prefer to use HTML & CSS instead of images whenever possible. Once you're comfortable with it, code is more flexible and simpler to maintain or update than images.
You can quickly add, remove, or rearrange items on an HTML menu with a couple of keystrokes — when you do, the height of the menu will adjust itself accordingly. And, you can change the menu's colors or font on a whim.
Limiting the images in your template also helps improve your blog's performance. Everybody likes a fast-loading blog!
Compatibility
You can use this tutorial to create a menu on any website that allows you to add custom HTML and CSS. Blogger, Typepad, and self-hosted Wordpress users, you're good to go. Wordpress.com users will need the premium Custom CSS add-on to add CSS.
The HTML
First things first, let's put together the HTML!
All of the code for this tutorial is in a CodePen demo. As you work, the demo will refresh itself so you know everything looks right before you add the code to your blog.
Click this link to open the CodePen demo in a new window.
In the CodePen demo, the HTML tab has all of the markup you need to get started. Don't worry if the colors and fonts aren't quite what you want — I'll show you how to edit them in the CSS section of this tutorial.
For now, all you need to do is fill in the links where prompted. For example, if I were using this menu on my blog, I'd change this:
<a href="HOMEPAGE LINK HERE">Home</a>
To this:
<a href="http://www.codeitpretty.com">Home</a>
If you could use a more detailed explanation of how to write an HTML link, check out the "links" section of Practical HTML for Bloggers.
I've set up the demo with 7 links. Add or remove links as needed. If you need to add new links, make sure to keep them inside the triangles-menu div.
The CSS
Now let's move on to the CSS!
In the CodePen demo, the CSS tab is filled in with my styling for a 150px wide purple menu with a custom font, Alegreya Sans. Don't worry if that doesn't suit your blog — you'll be able to customize it!
Let's go through each CSS rule, so I can explain what each one does.
.point-top,
.point-bottom {
width: 0;
height: 0;
border-right: 75px solid transparent;
border-left: 75px solid transparent;
}
Here I've set the width and height of both the top and bottom triangle points to 0. I've also added 75px wide transparent right and left borders to the triangle point divs. These invisible lines make the triangle shape happen.
The width of the left and right borders add up to 150px, the width of the menu.
.point-top {
border-bottom: 50px solid rgb(177, 99, 163);
border-top: 0;
}
In the .point-top rule, I've given the div a bottom border that is 50px wide. This sets the color of the top triangle. The rgb number is for the shade of purple I'm using (radiant orchid — the color of the year). You can change that to another rgb color, a Hex color, or an X11 color name if you prefer.
.triangles-menu {
background-color: rgb(177, 99, 163);
width: 150px;
padding-bottom: 1em;
}
In the .triangles-menu rule, I've set the background color for the menu area to the same purple as the top triangle. I've also given the menu a width of 150px, and padding at the bottom to add a little bit of blank space below the last link in the menu.
You can change the color, width, or padding to your liking. If you change the width of the menu, you'll need to adjust the width of the triangle's left and right borders in the ".point-top, .point-bottom" rule so that each border is equal to half the menu's total width.
.triangles-menu a {
font-family: 'Alegreya Sans', sans-serif;
font-weight: 100;
font-size: 2em;
color: white;
display: block;
text-align: center;
text-decoration: none;
margin-bottom: .5em;
}
The .triangle-menu a rule has a lot going on. In the first declaration, the links in the menu are set to display: block; which means that they'll all appear on their own line instead of running together (try removing the display: block; rule for a moment to see what I mean).
Next, I set the font-family to Alegreya Sans, a Google Web Font. If you'd like to use a Google Web Font for your menu design, you can learn how to add them to your template in this tutorial. If you don't want to use a custom font, you can remove the font-family declaration.
The font-weight and font-size declarations set the "boldness" of the text and the size, respectively. You can adjust those to suit your font choice, or remove them if you're not using a custom font.
The color rule sets the link's color to white. You can adjust that using another X11 color name, an rgb color, or a Hex color.
The text-align rule centers the text inside the menu container. The text-decoration removes the underline that appears by default under links in most browsers (we'll bring the underline back in a few cases in the next two rules).
.triangles-menu a:first-of-type {
padding-top: 1em;
text-decoration: underline;
}
.triangles-menu a:hover {
text-decoration: underline;
}
In these two rules, I'm using pseudo-classes to do a few special things to links in the menu. The first, for .triangles-menu a:first-of-type, gives the very first link in the menu a bit of padding at the top and a visible underline to differentiate it from the other links in the menu.
In the next rule, .triangle-menu a:hover, I'm bringing the underline back for each link when it's hovered.
.point-bottom {
border-top: 50px solid rgb(177, 99, 163);
border-bottom: 0;
}
This one looks familiar, doesn't it? This rule creates the bottom point. This time we're making an inverted triangle, so instead of a bottom border, we use a top border.
Adding Your Menu to Your Blog
Now that you've styled your menu, you're ready to add it to your blog! Let's add the CSS first so that your menu is instantly stylish when you add the HTML.
Add the CSS
In CodePen, copy all of the CSS from the CSS window and paste it into the custom CSS field for your blogging platform. If you're on Blogger, go to Template > Customize > Advanced > Add CSS. If you're on Typepad, go to Design > Custom CSS. On Wordpress your custom CSS location will vary. If you're using Jetpack's Custom CSS option, it's under Appearance > Edit CSS.
Save your CSS. Nothing will look different on your blog yet. You'll see the CSS working once you add the HTML.
Add the HTML
Next, copy everything from the HTML window and paste it into an HTML gadget/widget on your blog. On Blogger, use an HTML/JavaScript gadget. On Wordpress, enter it in a text widget. On Typepad, use the "Embed your own HTML" option in your Content menu.
Save your new widget and you should see your new menu appear in your sidebar. Nice work!
