CSS rollover w/o javascript — OZONE Asylum, home of the Mad Scientists

XML - XSL - XSLT - XHTML - CSS - DOM

CSS rollover w/o javascript

This page's ID: 10806

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Hi there ;) I also fell in love with scanspeds rollovers, they do look great! I took the principle and made the menu here: [url=http://www.qm-konsult.se/]http://www.qm-konsult.se/[/url] for a client. It's all CSS and some javascript (no NS4/Opera though) The idea is quite simple (as all the really nifty things are) when it comes to the rollovers. First you can give a link a class that specifies that the link should be 150px wide and 20px high with a 1px border and you set the std color/font all that. Place this absolutley or relatively according to your needs. Give all the links that class, then you go into the link-states [code] /----------------Links Spec------------------/ a:link { background-color: #0099CC; text-decoration: none; color: #0007F5; font-weight: bold; } a:visited { background-color: #0099CC; text-decoration: none; color: #C5063D; font-weight: bold; } a:hover{ background-color: #0099CC; text-decoration: underline; color: #fff; font-weight: bold; } [/code] And this controls the rollovers... that's it. To create the submenus, I simply enclosed the sublinks in a div that I'm showing and hiding through js. The interesting part was to write all of this dynamically through php as pages are added through a cms in the background... but that's another story. /Dan [url=http://www.dmsproject.com/] [img]http://www.dmsproject.com/gif/sig3.gif[/img] [/url] [url=http://faq.ozoneasylum.com/FaqWiki/shownode.php?sortby=rating&id=260]{cell 260}[/url] -{ a vibration is a movement that doesn't know which way to go }- Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu