Css Snippets » links

Open en toe met CSS & Jquery

Mark — Wed, 24 Mar 2010 09:41:37 +0000

Het is altijd weer het wiel opnieuw uitvinden, een eenvoudige manier om via een klik op een element een ander element te tonen of te verbergen.

HTML

Open & Toe

	
		Inhoud titel

Afbeeldingen

CSS

h2.trigger {
padding: 0 0 0 50px;
margin: 0 0 5px 0;
background: url(h2_trigger_a.gif) no-repeat;
height: 46px;
line-height: 46px;
width: 450px;
font-size: 2em;
font-weight: normal;
float: left;
}
h2.trigger a {
color: #fff;
text-decoration: none;
display: block;
}
h2.trigger a:hover { color: #ccc; }
h2.active {background-position: left bottom;}
.toggle_container {
margin: 0 0 5px;
padding: 0;
border-top: 1px solid #d6d6d6;
background: #f0f0f0 url(toggle_block_stretch.gif) repeat-y left top;
overflow: hidden;
font-size: 1.2em;
width: 500px;
clear: both;
}
.toggle_container .block {
padding: 20px;
background: url(toggle_block_btm.gif) no-repeat left bottom;
}

Jquery/Javascript

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Dik onderlijnde navigatie

Mark — Tue, 29 Dec 2009 07:02:01 +0000

Een navigatie kan zoveel vormen aannemen, hier een eenvoudige maar fraaie navigatie met onderlijning bij mouseover.

HTML


	Home
	CSS Codes
	Forums
	Webmaster Tools
	JavaScript
	Gallery

CSS

ul{
padding: 6px 0 7px 0;
margin: 0;
text-align: right;
}
ul li{
display: inline;
}
ul li a{
color: #494949;
padding: 6px 3px 4px 3px;
margin-right: 20px;
text-decoration: none;
border-bottom: 3px solid gray;
}
ul li a:hover, ul li a.selected{
border-bottom-color: black;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Met link-tabs dynamisch inhoud veranderen

Mark — Tue, 17 Nov 2009 06:45:06 +0000

Een tabbed navigatie die zonder page-refresh inhoud verandert door middel van Jquery:

HTML


		
    		
                Top Snippets
                Handig
                Javascript
                Classics
            
    		
    			
    				Target=_blank op de XHTML manier
    				1 kolom header sidebar content 
    				Tooltip met enkel CSS
    				Check/Uncheck alle checkboxes
    				Veranderen van tekst-selectie kleur
    				CSS opacity
    				Toon applicatie icon naast link
    			
        	
            CSS Horizontaal drop-down (uitklap) navigatie
            Toon scrollbar in Firefox altijd
            Formulier velden en line-height in FireFox probleem
            Haslayout oplossen in IE6 & IE7
            Eenvoudig en valid CSS hacken
    				CSS hack voor Chrome en Safari
    				Position : fixed in MSIE6
    				Volgorde stylesheets
    				HTML hr stylen via CSS
        		Conditional comments, allemaal
    				CSS Bar Graph complex
        	
        	
        		Anything Slider jQuery Plugin
        		Moving Boxes
    				Simple jQuery Dropdowns
    				Tekst zoom
    				:before & :after voor blockquote
    				Eenvoudige CSS dropdown navigatie
    				Alles:hover, :active, :focus voor IE6
    				Styling abbrevation in IE
        	
        	
            Media type print bepalen
            Basic XHTML 1.0 Strict template
            Valid XHTML met flash
            Printen van URL naast link
            Formulier zonder tabellen
            CSS shorthand voor color

CSS

#page-wrap {
width: 440px;
margin: 20px auto;
}
ul {
list-style: none;
padding: 0;
font-size: 1.3em;
margin: 0;
}
ul li a {
display: block;
border-bottom: 1px solid #666;
padding: 4px;
color: #666;
text-decoration: none;
}
ul li a:hover {
background: #fe4902;
color: #fff;
}
ul li:last-child a {
border: none;
}
#organic-tabs {
background: #c9f2ba;
padding: 10px;
margin: 0 0 15px 0;
border: 1px solid #84c984;
}
#explore-nav {
overflow: hidden;
margin: 0 0 10px 0;
}
#explore-nav li {
width: 97px;
float: left;
margin: 0 10px 0 0;
}
#explore-nav li.last {
margin-right: 0;
}
#explore-nav li a {
display: block;
padding: 5px;
background: #959290;
color: #fff;
font-size: 10px;
text-align: center;
border: 0;
}
#explore-nav li a:hover {
background-color: #111;
}
#javascript, #handig, #classics {
display: none;
}
#explore-nav li#ex-featured a.current, ul#top li a:hover {
background-color: #0575f4;
color: #fff;
}
#explore-nav li#ex-core a.current, ul#handig li a:hover {
background-color: #d30000;
color: #fff;
}
#explore-nav li#ex-jquery a.current, ul#javascript li a:hover {
background-color: #8d01b0;
color: #fff;
}
#explore-nav li#ex-classics a.current, ul#classics li a:hover {
background-color: #FE4902;
color: #fff;
}

Jquery

Je hebt ook Jquery nodig:

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Link rollover arrow

Mark — Mon, 02 Nov 2009 08:05:52 +0000

Bij het hoveren over de links, in bijvoorbeeld een navigatie, kun je het visuele effect toevoegen dat er een pijl je muisaanwijzer volgt om aan te geven dat je over de specifieke link aan het hoveren bent. Dit kan eenvoudiger met Javascript gedaan worden, maar een pure CSS oplossing is toch weer dat beetje leuker.

Afbeelding

pointer.gif (176)

HTML

CSS

ul.crawler {
list-style: none;
margin: 1em 0 1em 0;
padding: 0;
float: left;
border: 1px solid #000;
}
ul.crawler li {
position: relative;
float: left;
background: #d2da9c;
z-index: 6;
cursor: pointer;
}
ul.crawler li.x2 {z-index: 5}
ul.crawler li.x3 {z-index: 4}
ul.crawler li.x4 {z-index: 3}
ul.crawler li.x5 {z-index: 2}
ul.crawler li.x6 {z-index: 1}
ul.crawler li a {
float: left;
width: 10px;
height: 25px;
line-height: 25px;
text-decoration: none;
z-index: 2;
position: relative;
cursor: pointer;
background: transparent
}
ul.crawler li a.link {
width: 100px;
position: absolute;
left : 0;
top : 0;
text-align: center;
z-index: 0;
text-decoration: underline;
}
ul.crawler li a: hover span {
position: absolute;
width: 78px;
top : -12px;
left : auto;
margin-left: -30px;
z-index: 3;
background: url(images/pointer.gif) no-repeat left top;
}
a: hover {visibility: visible;background: url(images/transparent.gif)}/* ie needs this*/

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Vertikaal uitgeklapt menu

Mark — Sun, 18 Oct 2009 07:39:49 +0000

Een simpel navigatie menu door gebruik van in elkaar geneste lijsten om zo een uitgeklapt menu te realiseren.

HTML



Item one

Subitem one
Subitem two
Subitem three
Subitem four


Item two
Item three
Item four

CSS

#navlist {
list-style-type: none;
color: #333;
background-color: #eee;
margin-left: 5px;
}
#active:hover li {
display: block;
}
#active li {
display: none;
}
#navcontainer {
width: 220px;
background-color: #eee;
border: 1px #999 solid;
}
#navcontainer a {
color: #999;
background-color: #eee;
width: 120px;
display: block;
}
#navcontainer a:visited {
color: #900;
background-color: #eee;
}
#navcontainer a:active {
color: #fff;
background-color: #000;
}
#navcontainer a:hover {
color: #fff;
background-color: #000;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

CSS Specificiteit – spiekbrief

Mark — Mon, 12 Oct 2009 07:16:50 +0000

CSS Specificity – Cheat Sheet

CSS specificiteit is het grootste hindernis nadat je denkt CSS te beheersen, deze spiekbrief (cheat sheet) kan je helpen bij het dag dagelijkse uitdokteren welke CSS regel nu wel, en als niet, waarom niet, uitgevoerd wordt. Je kan het ook proberen te begrijpen met dit Nederlandstalig artikel op Gigadesign

Download naar believen en behoefte

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Animate een menu met een gif

Mark — Sun, 20 Sep 2009 07:33:28 +0000

Herinner je je de tijd dat animated gif’s cool waren, overal (soms in overuse) gebruikt werden en het niemand scheelde dat bandbreedte een issue was? Natuurlijk kan je Jquery gebruiken, maar laten we eens terug gaan in de tijd een een good old fashion animated gif gebruiken om een menu te animeren:

Download animated gif

HTML



Home
About
Contact


HEADLINE
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ut dui ut mauris congue bibendum. Vestibulum fringilla purus nec turpis. Nunc ut ante eu purus eleifend convallis. Nulla euismod ornare arcu. Donec enim enim, sodales sit amet, egestas a, suscipit at, lorem. Ut congue consequat lectus. Aliquam porttitor aliquam dui. Donec ipsum. Donec pharetra leo vel ante. Curabitur ac ligula id felis scelerisque imperdiet. Sed ullamcorper lectus at urna. Pellentesque blandit iaculis risus. Donec facilisis neque nec lorem. Aliquam erat volutpat. Morbi a nunc. Aenean feugiat tellus vitae nulla.
HEADLINE 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ut dui ut mauris congue bibendum. Vestibulum fringilla purus nec turpis. Nunc ut ante eu purus eleifend convallis. Nulla euismod ornare arcu. Donec enim enim, sodales sit amet, egestas a, suscipit at, lorem. Ut congue consequat lectus. Aliquam porttitor aliquam dui. Donec ipsum. Donec pharetra leo vel ante. Curabitur ac ligula id felis scelerisque imperdiet. Sed ullamcorper lectus at urna. Pellentesque blandit iaculis risus. Donec facilisis neque nec lorem. Aliquam erat volutpat. Morbi a nunc. Aenean feugiat tellus vitae nulla.

CSS

body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #fff;
background: #2d2d2d;
}
#content {
width: 600px;
padding: 0 0 0 20px;
}
#main_nav {
list-style: none;
margin: 0;
padding: 0;
}
#main_nav li {
float: left;
}
#main_nav li a {
display: block;
width: 150px;
height: 65px;
padding: 85px 0 0 0px;
color: #fff;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-size: 18px;
letter-spacing: 1px;
background: url(twinkle.gif) no-repeat 0 0;
}
#main_nav li a:hover {
background-position: -150px 0; color: #fff;
}
.post {
padding-top: 18px;
line-height: 18px;
}
h4 {
margin: 8px 0 6px 0;
}
p {
line-height: 18px;
font-size: 12px;
margin: 0 0 18px 0;
}
.clear {
clear: both;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Target=_blank op de XHTML manier

Mark — Fri, 18 Sep 2009 10:35:24 +0000

Soms kan je niet anders en moeten links naar een externe site openen in een nieuw venster, maar je kan niet target=_blank gebruiken omdat dan je XHTML niet meer XHTML zou zijn. Met een beetje javascript kan je dit oplossen:

HTML

Je originele link

external link

Aangepaste link

external link

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Jquery detecteer links naar documenten

Mark — Wed, 16 Sep 2009 10:03:43 +0000

Detecteer links in je website naar documenten – *.doc, *.xls, *.pdf – en voeg de betreffende class toe aan de links, voor als je bijvoorbeeld een icoon wilt toevoegen via CSS. Er bestaat ook een pure CSS oplossing hiervoor.

Jquery

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Navigatie centreren door display:inline

Mark — Mon, 10 Aug 2009 08:25:20 +0000

Een navigatie centreren als je float gebruikt heeft het nadeel dat je een container element moet hebben en de exacte afmetingen moet weten om het te centreren, door display:inline te gebruiken vereenvoudig je dit door geen specifieke afmetingen nodig te hebben en text-align:center doet het werk voor jouw, om het even hoeveel navigatie-items je hebt.

HTML


    home
    about us
    products
    services
    contact

CSS

body{
padding-top: 60px;
background: #FFF;
font: 76% Arial,sans-serif;
}
ul#minitabs{
list-style: none;
margin: 0;
padding: 7px 0;
border-bottom: 1px solid #CCC;
font-weight: bold;
text-align: center;
white-space: nowrap;
}
ul#minitabs li{
display: inline;
margin: 0 2px;
}
ul#minitabs a{
text-decoration: none;
padding: 0 0 3px;
border-bottom: 4px solid #FFF;
color: #999;
}
ul#minitabs a#current{
border-color: #F60;
color: #06F;
}
ul#minitabs a:hover{
border-color: #F60;
color: #666;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon