michaelsinterface.de

css.menuTooltip

  • Dieses CSS-Experiment demonstriert CSS-Tooltips, die beim Überfahren der Menüpunkte eingeblendet werden, um darin dem Seitenbesucher weiterführende Informationen zum jeweiligen Verweisziel bereitzustellen.

Beispiel-Inhalt

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci.

Beispiel-Inhalt

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci.

Quellcode  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>::: css.menuTooltip :::</title>

<style type="text/css">
<!--
/* .demoWrapBox */
div.demoWrapBox {
width:600px;
margin:30px auto;
}
div.demoWrapBox * {
margin:0;
padding:0;
}


/* .clearfix */
.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */


/* .menu */
div.menu ul {
list-style:none;
}
div.menu ul a {
position:relative;
display:block;
line-height:25px;
padding:3px 5px;
border:1px solid #cfcfcf;
background:#f5f5f5;
color:#3866A6;
text-decoration:none;
font-weight:bold;
cursor:pointer;
}
div.menu ul a:hover, div.menu ul a:focus, div.menu ul a:active {
background:#fff;
color:#000;
}
div.menu ul a .menuTooltip {
position:absolute;
left:-3000px;
top:-3000px;
display:block;
line-height:25px;
background:#fff;
border:1px solid #cfcfcf;
padding:3px 5px;
font-size:.85em;
cursor:pointer;
color:#3866A6;
}


/* #menu_vertical */
div#menu_vertical {
width:160px;
float:left;
display:inline;
}
div#menu_vertical ul {
margin:0 5px;
}
div#menu_vertical ul li {
margin:0 0 5px 0;
}
div#menu_vertical ul a {
width:145px;
}
div#menu_vertical ul a:hover .menuTooltip,
div#menu_vertical ul a:focus .menuTooltip,
div#menu_vertical ul a:active .menuTooltip {
top:-1px;
left:154px;
width:419px;
border-left:0;
padding-left:15px;
}
div#content_vertical {
width:428px;
float:right;
display:inline;
}


/* #menu_horizontal */
div#menu_horizontal {
width:100%;
position:relative;
z-index:1000;
}
div#menu_horizontal ul {
border-bottom:1px solid #cfcfcf;
}
div#menu_horizontal ul li {
margin:0 0 0 5px;
float:left;
display:inline;
}
div#menu_horizontal ul a {
width:120px;
float:left;
border-bottom:0;
}
div#menu_horizontal ul a:hover .menuTooltip,
div#menu_horizontal ul a:focus .menuTooltip,
div#menu_horizontal ul a:active .menuTooltip {
top:33px;
left:-1px;
width:309px;
border-top:0;
}
div#content_horizontal {
position:relative;
top:5px;
}


/* .content */
div.content {
border:1px solid #cfcfcf;
background:#fcfcfc;
font-size:.95em;
}
div.content h2, div.content p {
margin:10px 20px !important;
}
-->
</style>

</head>
<body>

<div class="demoWrapBox clearfix">
 <div id="menu_vertical" class="menu">
      <ul>
          <li><a href="#">Link 1
                 <span class="menuTooltip">
                       <span>&raquo;</span>Info zu Link 1 +++ Info zu Link 1</span>
              </a>
          </li>
          <li><a href="#">Link 2
                 <span class="menuTooltip">
                       <span>&raquo;</span> Info zu Link 2 +++ Info zu Link 2</span>
              </a>
          </li>
          <li><a href="#">Link 3
                 <span class="menuTooltip">
                       <span>&raquo;</span> Info zu Link 3 +++ Info zu Link 3</span>
              </a>
          </li>
      </ul>
 </div><!-- end DIV#menu_vertical -->
 <div id="content_vertical" class="content">
      <h2>Beispiel-Inhalt</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
 </div><!-- end DIV#content_vertical -->
</div><!-- end DIV.demoWrapBox -->
<div class="demoWrapBox">
 <div id="menu_horizontal" class="menu">
      <ul class="clearfix">
          <li><a href="#">Link 1<span class="menuTooltip">
                 <span>&raquo;</span> Info zu Link 1 +++ Info zu Link 1</span>
              </a>
          </li>
          <li><a href="#">Link 2<span class="menuTooltip">
                 <span>&raquo;</span> Info zu Link 2 +++ Info zu Link 2</span>
              </a>
          </li>
          <li><a href="#">Link 3<span class="menuTooltip">
                 <span>&raquo;</span> Info zu Link 3 +++ Info zu Link 3</span>
              </a>
          </li>
      </ul>
 </div><!-- end DIV#menu_horizontal -->
 <div id="content_horizontal" class="content">
      <h2>Beispiel-Inhalt</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
 </div><!-- end DIV#content_horizontal -->
</div><!-- end DIV.demoWrapBox -->

</body>
</html>