www.tuljo.com

Flyout CSS

When one line from alt tag is not enough. Ideas, playing around, bits and pieces.

Flyout aside

 

Code

<div id="foo">
<a href="#">Coffee<span>Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee </span></a>
<br />
<a href="#">Cacao<span>Cacao Cacao Cacao Cacao Cacao Cacao Cacao Cacao Cacao Cacao </span></a>
<br />
<a href="#">Beer<span><img alt="" src="beer.gif" /></span></a>
</div>

CSS

#foo a:hover{
	border:none;/*Something must be in here. Kind a trigger? Background has the same effect.*/
}
#foo a span{
	display:none;
}
#foo a:hover span{
	display:block;
	position:absolute;
	top:130px;
	left:100px;
	width:120px;
}

Flyout below, one item

Code

<div id="single"><a href="#">baaa<span>bauu<br />bauu<br />bauu<br /></span></a></div>

CSS

#single{
	height:33px;
}
#single a:link span,
#single a:visited span{
	display:none;
}
#single a:hover{/*IE6 trigger*/
	height:auto;
}
#single a:hover span,
#single a:active span{
	display:block;
}

Callout below, more items

Callout needs some space reserved around it. For validation use span or some other inline element here, <b> serves well.

Code

<div class="bar"><a href="#">item-1</a></div>
<div class="bar"><a href="#">item-2</a></div>
<div class="bar"><a href="#">item-3<span class="maid">call out text<br />call out text<br />call out text</span></a></div>
<div class="bar"><a href="#">item-4</a></div>

CSS

.bar{
	float:left;
	width:auto;
}
a .maid{
	display:none;
}
.bar a:hover,
a:hover .maid{
	display:block;
}

CSS, alt way to command the callout

a div{
	left:-9999px;
	position:absolute;
}
a:hover div{
	display:block;
	left:0;
	position:relative;
}

Callout below, more polished

Code

<div class="item"><a href="#">item-1</a></div>
<div class="item"><a href="#">item-2</a></div>
<div class="item"><a href="#">item-3<span class="callout">call out text call out text call out text</span></a></div>
<div class="item"><a href="#">item-4</a></div>
<div style="clear:both;"></div>

CSS

.item{
	height:77px;
	float:left;
	overflow:hidden;/*good to have here, shows out well if height too short*/
	width:111px; /*horisontal space for callout text*/
}
a .callout{
	display:none;
}
.item a:hover,
a:hover .callout{
	display:block;
	text-decoration:none;
}
.callout{
	background:#eee;
	color:#333;
}

Callout below whatever

Some notices - element <label> enables to check a radio even by clicking on text. For IE6 add for="foo1" and id="foo1". <a href="#"> class="first-shot" ...

 

Code

<div class="tequila">
	<label class="first-label" for="foo1">
	<a href="#">
	<input id="foo1" type="radio" name="#" />
	&#160;National Tequila Day
	<span>July is a month of celebration. We celebrate National Tequila Day. Viva Mexico!</span>
	</a>
	</label>

	<label for="foo2">
	<a href="#">
	<input id="foo2" type="radio" name="#" />
	&#160;Navy Seal
	<span>Jager, tequila, rum. Mix together and serve in three shot glasses. Have two buddies drink them with you.</span>
	</a>
	</label>

	<label for="foo3">
	<a href="#">
	<input id="foo3" type="radio" name="#" />
	&#160;Herradura Mango Mojito
	<span>Muddle the mint leaves, sugar and lime juice in the bottom of a tall glass. Add Herradura and mango juice. Add a splash of club soda and ice cubes. Serve with a mint leaf garnish.</span>
	</a>
	</label>
</div>

CSS

.tequila label{
	background:#ddd;
	float:left;
	height:150px;
	width:200px;
	margin-left:33px;
}
.tequila .first-label{
	margin-left:0px;
}
.tequila a{
	color:#333;
	cursor:default;
	text-decoration:none;
}
.tequila a:link span,
.tequila a:visited span{
	display:none;
}
.tequila a:hover{/*IE6 trigger*/
	height:auto;
}
.tequila a:hover span,
.tequila a:active span{
	display:block;
}

Callout below, using JavaScript

I wouldn't call it beautiful or anything, but it works... Reading and learning: http://www.scribd.com/doc/87058/70-Expert-Ideas-for-Better-CSS-Coding http://www.cssplay.co.uk/menus/hovercraft.html#nogo

2008

Web Development - XHTML CSS JavaScript jQuery.