Techniques for extending your website with CSS
Horizontal Nav Bars
A horizontal nav bar along the top of your site is often untidy and hard to manage. Instead, you can achieve the same effect by writing the navigation as a list and then using CSS to style the list.
Listings 5 and 6 show the code.
Listing 5
navigation.html
Listing 6
navigation.css
The screenshot shown in Figure 2 shows what this menu looks like when added to the two-column layout described previously.
The text-align: center; attribute centers everything within this <div>. Below that, the padding-right attribute gives some space between the menu items – you can adjust this to your preference.
The text-decoration: none removes the underlining that links have by default – this is tidier for a menu like this. I've also changed the text color.
The list-style-type: none statement means that the list won't have any bullets by the items – again, a neater style for a menu.
Alternatively, a variety of list-style-type values are available if you do want a bullet or number by each item. The display: inline means that, instead of the standard list structure in which each item displays on a new line, the list items will display on the same line, one after the other. With display: none, you could even choose not to display the list at all. The normal behavior for lists is display: block – this puts each element on a new line. Other elements can have a display value as well.
By tagging the list (e.g., <ul class="nav">) and editing the CSS appropriately, you could achieve a similar effect, but putting it inside a div tag is more flexible.
Rollover Menus
So you have your nav bar, but now you want to make submenus pop up on rollover. Do you think you'll need Javascript to do this?
Think again – you can make it happen with CSS. I should point out that IE6 doesn't work with this technique. To get around this problem, make sure the parent link is clickable and goes to a page that indexes the submenu, which is good practice anyway for accessibility reasons. Alternatively, you can set up Javascript that runs only if it detects an IE6 browser.
In Listing 7, the navigation is again set up as a list, but this time with submenus as sublists (Figure 3). This configuration is very basic, aesthetically speaking, but you can do much more to make it look more attractive.
Listing 7
rollover.html
Listing 8 shows the CSS. The basic list setup (which will apply to both the outer and the inner lists) has no margin but a little padding and a contrasting background. The sublists do not display by default; otherwise, they would just be there all the time rather than appearing only on mouseover.
Listing 8
rollover.css
Locating the list items by relative position means that they are positioned within the general flow of the page (in other words, they are positioned after the elements before them, and before the elements after them!), although values such as top and right are honored. As in an earlier example, you don't want bullets; hence, you set list-style-type.
The magic happens in the final section. When you rollover a list item that has a list child element, it will now display. It displays as a block list, with absolute position (meaning it doesn't get pushed out of the way by any other elements) underneath the parent element (set by top: 100%, meaning the parent element is on top, which is slightly counterintuitive). The left: 0% value means that the sublist will appear exactly beneath the relevant menu item, rather than being offset. Without this value, the sublist will appear way over on the left-hand side of the page, which is its default.
Also, you could choose to have the sublist appear to the left, up, or down. For example, if you want to have a side menu, you would probably want the submenus to appear to the left. The best way to learn the various options is to play around with the settings.
The final background image element is an IE7 bug fix – without this, in some circumstances your rollover menus wouldn't be "sticky" in IE7. That is, instead of staying put for long enough for you to click on whichever submenu item you want, the submenu would vanish immediately when you take your mouse off the main parent list item. The background image fixes this – you should either use a transparent image, or a file with no content because it is the image call itself that resolves the bug. Of course, you can make this design more attractive by defining borders, custom bullets, different colored backgrounds, and anything else your heart desires.
Marking External Links or Formats
At times, you might want some means for marking external links on your site. Some users also might want to identify links to non-HTML files (Word documents or PDF files).
First, you need to set up a small image file with an appropriate icon – as shown in Figure 4. Adobe and Microsoft make appropriate icons for PDF and .doc files available on their websites; you'll have to find your "external link" icon from somewhere else. Then, you can set up the CSS to pick up on these sorts of links.
Listing 9 shows the HTML for this, and Listing 10 shows the CSS.
Listing 9
links.html
Listing 10
links.css
The first section in the CSS uses a regular expression to set up the external link image as a background image for all links that begin with http. It's set to sit at the top right of the link and not to repeat. The padding ensures the image doesn't crowd into the right-hand side of the link itself. If you need to vary this padding according to the size of the icon, you could use slightly different settings for each icon, as I've done here.
The first section should automatically exclude any internal links because it's good practice to refer to internal links without the http in front of them. However, for cases in which the full form has been used, the second section cancels out the first for links within your site (obviously, you need to replace http://www.example.com with your own URL).
The last two sections do the same as the first, but they only apply to links ending with .pdf or .doc. Because these sections occur later on in the CSS, they'll override the external link icon. If you would prefer to display the external link icon, rather than a file-type icon, for a document on an external site, rearrange the order, but be aware that the first and second sections must be in order or the second section won't override the first.
« Previous 1 2 3 Next »
Buy this article as PDF
(incl. VAT)
Buy Linux Magazine
Subscribe to our Linux Newsletters
Find Linux and Open Source Jobs
Subscribe to our ADMIN Newsletters
Support Our Work
Linux Magazine content is made possible with support from readers like you. Please consider contributing when you've found an article to be beneficial.
News
-
The GNU Project Celebrates Its 40th Birthday
September 27 marks the 40th anniversary of the GNU Project, and it was celebrated with a hacker meeting in Biel/Bienne, Switzerland.
-
Linux Kernel Reducing Long-Term Support
LTS support for the Linux kernel is about to undergo some serious changes that will have a considerable impact on the future.
-
Fedora 39 Beta Now Available for Testing
For fans and users of Fedora Linux, the first beta of release 39 is now available, which is a minor upgrade but does include GNOME 45.
-
Fedora Linux 40 to Drop X11 for KDE Plasma
When Fedora 40 arrives in 2024, there will be a few big changes coming, especially for the KDE Plasma option.
-
Real-Time Ubuntu Available in AWS Marketplace
Anyone looking for a Linux distribution for real-time processing could do a whole lot worse than Real-Time Ubuntu.
-
KSMBD Finally Reaches a Stable State
For those who've been looking forward to the first release of KSMBD, after two years it's no longer considered experimental.
-
Nitrux 3.0.0 Has Been Released
The latest version of Nitrux brings plenty of innovation and fresh apps to the table.
-
Linux From Scratch 12.0 Now Available
If you're looking to roll your own Linux distribution, the latest version of Linux From Scratch is now available with plenty of updates.
-
Linux Kernel 6.5 Has Been Released
The newest Linux kernel, version 6.5, now includes initial support for two very exciting features.
-
UbuntuDDE 23.04 Now Available
A new version of the UbuntuDDE remix has finally arrived with all the updates from the Deepin desktop and everything that comes with the Ubuntu 23.04 base.