So much flexibility!
One of the great things about CSS is how we may use it to control the layout of elements on our pages (and tinker with those layouts very easily). In this challenge we will experiment with the layout and placement of a menu on the page
In this challenge we'll investigate the followign concepts:
Copy the starting template code below into a text file (remember to save with a .html extension) and open it up in a browser to see what it looks like.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis tristique lectus ut maximus. Nulla sit amet nisi at sapien pellentesque auctor. Vivamus et ex ut tortor sollicitudin varius. Vestibulum sed posuere urna, eget tempus ante. Phasellus ornare odio tempor velit tempor, in ullamcorper lectus suscipit. Fusce tellus justo, posuere in quam a, sollicitudin varius elit. Morbi pretium tellus et ex molestie mattis. Pellentesque pulvinar dictum lacus, vitae sollicitudin felis lacinia ac.
Vivamus elementum magna enim, sit amet facilisis felis cursus id. Sed viverra elit nisi, id ultricies urna ultrices sed. Donec pulvinar justo erat, at volutpat orci gravida et. In ac nulla turpis. Maecenas id quam dapibus, ornare ex ac, iaculis lectus. Vivamus metus nibh, scelerisque et massa ut, placerat sagittis ipsum. Integer quis volutpat erat, vel facilisis nunc. Nam efficitur orci nec neque volutpat, a feugiat tortor efficitur. Donec venenatis sodales nibh, eget ornare ligula pellentesque eu.
The dummy content was obtained from a Lorem Ipsum generator. It is an industry standard way of including dummy content.
For each of the steps below, make sure to save and view the file regularly so see what affect the elements you are adding and changing has on your page.
At the moment we have some simple content with a menu that is actually just a bullet point list at the bottom of the page. Over the next few steps we will tinker with this and see what we can do. One thing to notice is that we're pretty much only going to be playing with CSS. The HTML we won't touch.
We've put the menu at the bottom in our code so that it is out of the way. This puts our content right at the top of our page which is convenient from a coding point of view but is also good from an SEO (Search Engine Optimisation) point of view. This is because search enginges prioritise content higher up in our code meaning our content gets higher value than the menu.
Just because our menu is at the bottom in our code doesn't mean it has to be there when viewed in the browser. Copy the code below and place it in between your <style> tags.
What we did here was first position the menu absolutely on the page. The top and left properties specify where to abolutely position the element on the page. We give it a width as well as absolutely positioned elements will only be as wide as their content by default. You can adjust this value to suit the width of your menu items. You can also adjust the value of the top property to align the menu with your content, or heading or something else.
We have added a margin-left to the content so that there is space on the side of it for the menu to live. You can tweak this value to adjust the amount of gap between the menu and content to your liking / sidth of your menu items.
The menu still looks like a list though. Let's make it look a bit more like a menu. Copy the styles below and place them after the styles we copied in on the previous step.
The first rule removes the spaceing to the left of the bullet points. The second rule removes the bullet points, spaces out the menu items adn indents them a bit.
This is just one example of how the menu items could look. You can be very creative here in how you style them and I would encourage you to come up with your own style rather than just accept my example. With a bit more tinkering I'm sure you can come up with a more stylish menu than mine.
Menu's are always more user friendly with a bit of feedback so let's make the menu items react to being hovered over. Copy the rule below and place it just after the previous rules.
You can actually make any item on your page react to being hovered over by simply creating a rule relating to the item and adding :hover to the end of it. With a bit of creativity you can do some really funky things.
The page is starting to look better but then a new trend comes along and it's now the in thing to have menu's on the right hand side. No worry, that's easy. Just need a few tweaks to our code and it's done.
Done!
And if you have developed your pages using a single external linked CSS file then you would make those changes in a single file and all your pages would automatically be changed over. How cool is that?
For the sake of completeness, let's now put the menu along the top.
Refreshing the page in the browser we can see that the menu and content are in the right places but the menu is still going down whereas we would like it to go across the page. This is another easy fix.
Let's add a final bit of style to the top menu, just to see what's possible.
Instead of a line under each menu item, it would be nicer to have the line to the side, to act as a divider.
This will set the line to the side but it is also in front of the first item and it would be nice to have the dividers only between items. Add the rule below to the bottom of your CSS rules.
Adding :first-child to a rule means it will only apply to the first item of that kind. You can all manner of things. Eg. maybe you wish the first paragraph on a page to be styled differently to others.
How about we also add something to the beginning of the menu item on hover. Add the following rule to your code.
The :before after the rule means that this will be implemented before the item when it is displayed in the browser. The content property states what is it we want to put before the item. In this case we are printing a special character (hence the character code) but we can print anything. Try replacing the character code with a normal word and see what happens.
We've investigated quite a few concepts quite quickly here. At every stage we've left the content and menu quite rough around the edges. You should now go back and use your knowledge of HTML and CSS to style them up and make the page look a little more finished.
Experiment and see what you can come up with. Have fun!
Education is the kindling of a flame,
not the filling of a vessel.
- Socrates
