CSS menu med link beskrivelse

Dette kan faktisk lade sig gøre helt uden JavaScript!

Jeg har fundet det på Webdesign101.dk
De har fundet det her: www.meyerweb.com/eric/css/edge/popups/demo.html

Her forklarer jeg på min måde, hvordan du skal gøre.
Det er nemt, hvis du kender til CSS.

Først skal du lige se eksemplet:
(Her åbner links i nyt vindue)

Info Her kan være information om linket i form af tekst og billeder:

Dette link fører ingensteder. gilau.dk Fotografi, Bogbinding, Håndlavet papir, Tegning/Maleri freudendal.dk Tjek de sydfranske fristelser! Billige togbilletter i Frankrig. Cykelferie i Provence? På vej mod Santiago. Web & Logo Design Design af hjemmesider, logoer, bannerreklamer, forum, gæstebog og webgrafik. webdesign101.dk Link til dette script på Webdesign101.dk meyerweb.com Ophavsmanden til scriptet her. Se det i et andet design. html.dk/css CSS Tutorial på html.dk

Hvordan gør man så dette...

Jo, først skal du indsætte noget CSS.
Det bedste er at oprette et stylesheet, hvor du indsætter koden her nedenunder.
Du kan også indsætte koden i dokumentets HEAD sektion.
I så fald skal du starte med <style type="text/css"> (koden her) og slutte med </style>

#links {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 180px; 
  height: 700px; 
  font-size: 12px; 
  font-family: verdana, arial, sans-serif; 
  z-index: 100;
  border-top:1px solid black;
}
#links a {
  display: block; 
  text-align: left; 
  font-weight: bold; 
  font-size: 1em;
  padding: 5px 10px; 
  margin: 0;
  border-width: 0 5px 1px 1px; 
  border-style:solid;
  border-color:black;
  text-decoration: none; 
  color: #093e3d; 
  background: #f3f4f1;
}
div#links a:hover {
  color: #c00; 
  background: #ffffff;
  border-right: 5px double gold;
}
#links a:visited {
  color: #1a4440; 
  background: #f3f4f1;
}
#links a span {
  display: none;
}
#links a:hover span {
  display: block;
  position: absolute; 
  top: 180px; 
  left: 0; 
  width: 170px;
  border:1px solid black;
  padding: 5px; 
  margin: 0; 
  z-index: 100;
  color: #000; 
  background: #ffffff;
  font-weight:normal;
  font-size: 12px;
  font-family: verdana, arial, sans-serif; 
}

div.css_menu_box
   {
   height: 300px;
   width: 400px;
   padding: 4px;
   position: relative;
   left:300px;
   right: 40px;
   }

Jeg har nederst tilføjet: div.css_menu_box
Dette er placeringen af menuen på din side.
Du kan evt vælge position: absolute
og du skal også ændre på højden, hvis din menu har flere punkter.
Hvis du undlader div.css_menu_box så vil menuen placere sig helt øverst til venstre.

Farven der skifter til højre i menuen kan du ændre i:
div#links a:hover {border-right: 5px double gold;}

(Tilpas selv designet til din hjemmeside.)

Det næste der skal ske er at du skal indsætte din menu.
Først placeringen: div class="css_menu_box"
dernæst style for links: div id="links" Så følger menu punkterne:
<a href="link_adresse.htm">Link navn<span>Link teksten ved mouse over</span></a>

Det ser i mit eksempel således ud:

<div class="css_menu_box">
<div id="links">

<a href="ingensteder.asp"> Info<span> Her kan være information om linket i form af tekst og billeder:<br />
<img alt="" src="../../images/key2.gif" height="32" width="32" /><br />
Dette link fører ingensteder.</span></a>

<a href="http://www.gilau.dk">gilau.dk<span> Fotografi, Bogbinding, Håndlavet papir, Tegning/Maleri</span></a>

<a href="http://www.freudendal.dk">freudendal.dk<span> Tjek de sydfranske fristelser! Billige togbilletter i Frankrig. Cykelferie i Provence? På vej mod Santiago.</span></a>

<a href="http://www.web-logo-design.dk">Web & Logo Design<span> Design af hjemmesider, logoer, bannerreklamer, forum, gæstebog og webgrafik.</span></a>

<a href="http://www.webdesign101.dk">webdesign101.dk<span> Link til dette script på Webdesign101.dk</span></a>

<a href="http://www.meyerweb.com">meyerweb.com<span> Ophavsmanden til scriptet her. Se det i et andet design.</span></a>

<a href="http://www.html.dk">html.dk/css<span> CSS Tutorial på html.dk</span></a>

</div>
</div>

Jeg har her undladt at links åbner i nyt vindue.
Jeg har lavet linieafstand, for at det skal være lettere at læse. Du behøver ikke lave denne linieafstand i dit dokument.

Det var det...
Har du spørgsmål er du velkommen til at stille dem i forummet.
Se evt også min side om CSS

Toplister: