I had a hard time coming up with something here. Most blogs I frequent have just a simple text navigation. Some have effects on hover, but most do not. That's too plain for me. I also wanted the navigation links to be easily made responsive for the different designs. I knew I wanted only the 3 main categories to be displayed, and then the sub-categories appear on hover, but I wasn't exactly sure HOW that would work, or how I want it to look.
While I mulled over my possibilities for coding this part, I went ahead and tried to make some graphics for the main navigation. I wanted them to keep in with my doodle graphics that I'd already made for my pages navigation and my logo. I came up with these:
I wasn't 100% sold on them though, I couldn't figure out a way to make the space between each tag/category more transient, gradual, whatever, since I wanted each of the categories to be a different color. And also, I made the space between the 2 lines transparent, so that on hover there would be a background color that would only show through that part, but instead all I see is a colored line along the bottom on hover, as you can see for the first category in the picture above. I can't figure out why it's doing this.
Then I finally found a tutorial for a navigation bar that had what I wanted, except it was text based, no graphics. I figured I might as well just try and make the navigation work, and then worry about whether I can change the text to graphics, if I still wanted that.
The code I found, a dropline on hover navigation bar, is based on list items, which actually conventional menu bars are based on, not just images with links all in a line like I did my last one. The thing with list items is that you can easily have sub-list items, aka Categories and Sub-Categories. Also, text is more easily scalable while still keeping it's crispness at whatever size, which will be super important for viewing on high pixel density devices (aka retina screens).
Took me a long time fiddling with this code to make it work the way I wanted it to. It's one thing to find the code, and another finding a TUTORIAL with the code. I had to figure out what each line of code did exactly, since it's not exactly explained... and which code was redundant, because there was redundant code.
Here are a few things I changed to suit my needs:
- changed the text-align to center
- changed the width of the li a to 33.3333%, since I have 3 main navigation... The thing I haven't figured out is why I need to set the width to li a and not li only... but do whatever works right?
- changed the li background color to white
- apply gradient background color and add round upper corners to li a elements so they are defined more as individual tabs
- applied different background colors for the 2nd child and 3rd child of the li a so each main category is a different color like I wanted
- changed the active and hover state of li a to have a white background and for the text to be colored the respective color; added a colored border to keep the tab definition, but since border are fixed px and not % to make them look good, it's harder to make them fit and be responsive, so had to change the width of li to a guestimated # that would not break the page, in this case 33%; also had to add a border to the non active state or else it would appear as if the tabs are growing/moving to the right on hover.
Up to that point it was fairly straight forward, it was the sub-list that gave me a lot of trouble, both in understanding the existing code, and changing it to what I wanted. For one, the sub-list inherited most of the code from the main list, like the round upper corners, so I had to override by adding a 0px radius to the upper corners.
Second, the sub-list ul li is by default a little to the right of the list, like a "Tab" indent, or nesting of the sub-list under the list, which I could not figure out how to get rid of. The reason why it's not evident for the main code which I am basing this on is because he put a background color to the container containing the ul, and he used fixed pixels. If I did the same using % for the width so that it's responsive, that container extended past it's own container (past the header container) because of the indent, it keeps the same width it's just moved to the right.
And this is why sometimes it's good to explain to someone, even if that someone is invisible. I just realized that if I set my background to transparent, then I CAN just move the ul container and make everything flush!! This won't be responsive if I move it by %, but with -40px at the left margin everything's good and responsive!! 40px seems to be the default indentation for sublists in this case.
So for the sub-list I changed:
- set upper corner radius' to 0em
- set margin-left to -40px
After all that, I could not get the sublist to be the exact same width as the main list, because of the border I added to the main list. Though even adding borders to the sublist didn't work. Finally, I found a bit of code that worked its magic. Basically, the problem is that the border is not part of the width but added to it, so this bit of code tells it to be included in the width. Magic I tell ya! I found it here.
The one thing that will most probably cause me trouble is when I want to add more sub-list items, I'll have to change the set width % to accomodate for it, or else it will go below the existing ones. Also, I need to work around the fact that if a item text is longer than the 33% width, it will do a line break and continue writing, whereas I would want it to shift the other list items for the to be one after the other on the same line. So I might have to fiddle with this part a little more, remove the tab definition (rounded corners) for the sub-list and not give it a defined width, and not center the text but left align it. Yeah, I'm probably gonna have to do that... but I'm pretty tired of fiddling with this part of the code, I want to move on to something new for a bit.
With that, I'm pretty satisfied with my navigation, and I'm not planning on adding a background image to them. But, I do want to change the text font, which is an entire different post, as this one is pretty long. And also because I haven't figure out how to do it yet.
No comments:
Post a Comment