Tutorial: Crazy Angle Navigation (CSS3)
There are lots of things I play around with on the odd time, little hits and tips to do something slightly better, or slightly worse. As well as little things which I think might be cool- but turn out totally crazy. Where and when do these things happen? Why when I decided its time for a new layout- which seems to be almost every time. Today is just one of those things which I’ve looked over in the past (in fact this I looked at today) to make part of the layout, but it seems it wasn’t meant to be…
Today I’m going to teach? (I think thats a horrible word- especially considering this isn’t really nothing great, least how I’ve coded it – and the fact I bitched to a few people I know on the internet for little hints as well to get this particular CSS done) how to make an angle navigation- which you can use and adapt to various things.
First I created a “header” div, which contains a few settings I wanted for the whole header. Which included font type, size, etc.
div#header{width:800px;background-image:url(‘images/header.png’);background-repeat:no-repeat;height:300px;overflow:hidden;border:5px solid #000;padding:5px;background-color:#0F0;font-family:Arial, Helvetica, sans-serif;font-size:16px;color:#000;}
The most important thing here is the overflow tag, because that removes the excess from the angle navigation. Your width and height tags are also important, because thats how big you want the section.
I have also added an excess image background, which you can either replace with your own, or remove the CSS.
The container div tag I made, is where all the magic happens. This puts the div on an angle, keep in mind the CSS used has various default settings built in which might not suit what your doing, for example playing around with this code today, I have noticed that it copies the properties outside the div tags (meaning the center tag I had) and centered it there. It also is very limited in how it is positioned etc. I haven’t really bothered to go into it, so it could well be more adaptable then what I’ve experienced, but yeah.
div#container {width:100%;-webkit-transform: rotate(-55deg);-moz-transform: rotate(-55deg);-o-transform:rotate(-55deg);}
As you can see, this div contains the 100% width (which makes the effects we have adapted to the links flow through the div frame. Remember the overflow tag in what ever div your got as its object- so it removes the excess from this action). You also have the transform CSS, we are doing a simple rotating transform. But there are other transforms you can do. (NOTE: THE TRANSFORM CSS CODE DOESN’T WORK IN INTERNET EXPLORE, AND I DO NOT KNOW/PROVIDING A FIX FOR THE BROWSER)
Just before I forget, some settings for the unordered list CSS.
ul {list-style: none;margin: 0;padding: 0;}
Normally I don’t use lists for navigation- in fact I haven’t ever used lists for navigation in a long time besides learning how its done. So its not something I know on the top of my head, but its something I can easily work out. Anyway the reason we are using lists for navigation here today is because we are making the navigation more detailed then a simple row of links.
While normally background, padding, and other things like borders can be added, by using lists we can use the CSS which is built around that, which allows more things like linking- widths etc. Least thats my understanding on how they work differently to a normal a:link or what ever, and thats how I’ve worked it out to work as well…
div#container li a {height: 32px;height: 24px;text-decoration: none;border-top:5px solid #000;}div#container li a:link, div#container li a:visited {color: #000;display: block;background-color:#3C0;padding: 8px 0 0 10px;}div#container li a:hover {color: #000;background-color:#FFF;padding: 8px 0 0 10px;}
Above is something easily to understand, its the CSS for the link settings for the main navigation (I’m going to add in a sub-navigation to this code tutorial as well).
The style for these links is a colored background (the testing here I’ve used a limish green) with a big black top border of 5px. I’ve also added in a hover of white.
That is really all there is to that code (oh and we have put the a:link, and a:visited together with a coma, because they are the same code).
We then add in another bit of CSS, this time its for the sub-navigation. (I’ve only used it once in this code, so there is no linking to special parts using say a class or id tag).
div#container ul ul li {height: 36px;text-decoration: none;}div#container ul ul a:link, div#container ul ul a:visited {color: #000;display: block;background-color:#900;padding: 8px 0 0 10px;}div#container ul ul a:hover {color: #000;background-color:#FFF;padding: 8px 0 0 10px;}
Notice that because its a deeper bit of code then a normal unordered list, it doubles up in the identifiers so it can see that its for any list which is within a list. (which is what we are using for the backbone here for the navigation).
Right now if you where to put that into a HTML document, everything will show up- which is good, but the problem here is that the sub navigation also shows up. What we are going to do is put in a bit of code which hides the subnavigation until you mouse over one of the list points which has that subnavigation.
li ul {display: none;}li:hover > ul {display: block;}
Wow! Thats all the CSS done.
You can either put that in a <style></style> in your HTML’s header, or you can make an external stylesheet.
Here is essencially what I had for the HTML.
<div id=”header”><div id=”container”><ul><li><a href=”#” title=”Link 1″>Home</a></li><li><a href=”#” title=”Link 2″>Archives</a><ul><li><a href=”#” title=”Link 1″>News</a></li><li><a href=”#” title=”Link 1″>Opionion Articles</a></li><li><a href=”#” title=”Link 1″>In Focus Articles</a></li><li><a href=”#” title=”Link 1″>How To’s</a></li><li><a href=”#” title=”Link 1″>Web Roundup</a></li></ul></li><li><a href=”#” title=”Link 3″>Porfolio</a></li><li><a href=”#” title=”Link 4″>Downloads</a></li><li><a href=”#” title=”Link 5″>Links</a></li></ul></div></div>
I also wrapped these in a <p> and <center> tags.
You can change the title of the links to suit what you want (I originally was testing it with 5 links, but then I added in the sub navigation and just copied the segment of code for the original link :/)
