Autor |
Nachricht |
anett
Threadersteller
Dabei seit: 06.12.2004
Ort: -
Alter: 40
Geschlecht:
|
Verfasst Do 16.08.2007 12:27
Titel menü mit grafiken mouse over |
|
|
hi,
ich möcht eigtl. nur ein einfaches menü erstellen, mit vertikaler anordnung... 6 menüpunkten die als grafik eingebunden werden.
beim mouseover soll sich z.b. bei menüpunkt 3 ein untermenü öffnen, mit weiteren 4 punkten.
wieso find ich im netz kein vernünftiges script dazu oder hab ich falsch gesucht.
|
|
|
|
|
nicoG
Dabei seit: 25.01.2006
Ort: Freiburg
Alter: -
Geschlecht:
|
Verfasst Do 16.08.2007 12:52
Titel Re: menü mit grafiken mouse over |
|
|
anett hat geschrieben: |
wieso find ich im netz kein vernünftiges script dazu oder hab ich falsch gesucht. |
Dafür gibt es viele Gründe. Wieso das so ist, weiß nur der Bär oder wir befragen meine schöne Glaskugel...Ach ne, ist grad der Akku leer...
http://www.cssplay.co.uk/menus/
Das Ding heißt DropDown-Menu. Mit dem Fachbegriff wirst du auch was bei Google finden
Zuletzt bearbeitet von nicoG am Do 16.08.2007 12:54, insgesamt 1-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
Mark-Korb
Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht:
|
|
|
|
|
anett
Threadersteller
Dabei seit: 06.12.2004
Ort: -
Alter: 40
Geschlecht:
|
Verfasst Do 16.08.2007 13:08
Titel
|
|
|
danke schonmal für eure antworten.
auf cssplay.com war ich schon, allerdings (verbessere mich wenn ich das richtig sehe)
laufend die grafiken generell im hg bei den menüs die da dargestellt werden, da ich aber im menü text die frutiger drin haben möchte, muss ich das wohl oder übel das menü komplett als grafik einbinden. oder seh ich da was falsch?
|
|
|
|
|
nicoG
Dabei seit: 25.01.2006
Ort: Freiburg
Alter: -
Geschlecht:
|
Verfasst Do 16.08.2007 13:31
Titel
|
|
|
anett hat geschrieben: |
laufend die grafiken generell im hg bei den menüs die da dargestellt werden, da ich aber im menü text die frutiger drin haben möchte, muss ich das wohl oder übel das menü komplett als grafik einbinden. oder seh ich da was falsch? |
Du kannst den Text verschwinden lassen. gib text-indent einfach einen hohen negativen Wert mit. Dann wird der etxt "rausgeworfen" und du hast nur noch die Grafik als Hintergrund
|
|
|
|
|
anett
Threadersteller
Dabei seit: 06.12.2004
Ort: -
Alter: 40
Geschlecht:
|
Verfasst Do 16.08.2007 13:51
Titel
|
|
|
oha... das wußt ich nicht.
danke für den tipp. ich versuchs direkt mal.
|
|
|
|
|
anett
Threadersteller
Dabei seit: 06.12.2004
Ort: -
Alter: 40
Geschlecht:
|
|
|
|
|
anett
Threadersteller
Dabei seit: 06.12.2004
Ort: -
Alter: 40
Geschlecht:
|
Verfasst Do 16.08.2007 16:48
Titel
|
|
|
so nochmal ich... eigtl. paßt nun alles.
ein kleines problem hab ich allerdings noch wo ich den fehler nicht finde...
im ie ist zwischen dem bild körpermanagment und referenzen nen abstand drin, den ich nicht rausbekomme... bzw... ich weis nicht wo er her kommt.
im firefox ist der gleich fehler nicht drin.
Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Stu Nicholls | CSSplay | Cross browser flyout menu examples using only css</title>
<meta name="Author" content="Stu Nicholls" />
<meta name="Keywords" content="cssplay, css, play, Cascading, Style, Sheets, opacity, layouts, navigation, menus, experiments,demonstrations, photo, photograph, gallery, slide, slideshow, picture, drop, down, pull, up, fly, out, free" />
<meta name="Description" content="CSS - Cutting edge Cascading Style Sheets. Experiments in CSS" />
<meta name="verify-v1" content="n3Dpx4NklZjg5p/Tq7h1q+Oj6Ml83crtkO/PwepVQ6Y=" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="meta" href="http://www.cssplay.co.uk/labels.rdf" type="application/rdf+xml" title="ICRA labels" />
<meta http-equiv="pics-Label" content='(pics-1.1 "http://www.icra.org/pics/vocabularyv03/" l gen true for "http://cssplay.co.uk" r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 0) gen true for "http://www.cssplay.co.uk" r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 0))' />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.cssplay.co.uk/feed.xml" />
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
<link rel="icon" href="../favicon.ico" type="image/ico" />
<link rel="stylesheet" media="all" type="text/css" href="../css/css_play.css" />
<link rel="stylesheet" media="all" type="text/css" href="../css/menus.css" />
<link rel="stylesheet" media="all" type="text/css" href="h_menu1/menu1.css" />
<link rel="stylesheet" media="all" type="text/css" href="h_menu2/menu2.css" />
<style type="text/css">
.some_text {width:600px; float:right; margin-top:1em;}
</style>
</head>
<body id="www-cssplay-co-uk">
<div id="wrapper">
<a href="#content" class="hiddenfromview" accesskey="X" title="skip to content">skip to content</a>
<div id="header">
<p>Example menu #1 - 11th June 2006</p>
<div class="menu1">
<ul>
<li class="home"><a href="#nogo"><img src="h_menu1/institut.jpg" border="0px" width="201px" hight="29px"></a></li>
<li class="home"><a href="#nogo"><img src="h_menu1/trainerteam.jpg" border="0px" width="201px" hight="29px"></a></li>
<li class="services"><a href="#nogo"><img src="h_menu1/koerpermanagment.jpg" border="0px" width="201px" hight="29px"><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li class="subserv4"><a href="#nogo"><img src="h_menu1/institut.jpg" border="0px" width="201px" hight="29px"></a></li>
<li class="subserv3"><a href="#nogo"><img src="h_menu1/institut.jpg" border="0px" width="201px" hight="29px"></a></li>
<li class="subserv1"><a href="#nogo"><img src="h_menu1/institut.jpg" border="0px" width="201px" hight="29px"></a></li>
<li class="subserv5"><a href="#nogo"><img src="h_menu1/institut.jpg" border="0px" width="201px" hight="29px"></a></li>
<li class="subserv2"><a href="#nogo"></a></li></ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="home"><a href="#nogo"><img src="h_menu1/referenzen.jpg" border="0px" width="201px" hight="29px"></a></li>
<li class="home"><a href="#nogo"><img src="h_menu1/news.jpg" border="0px" width="201px" hight="29px"></a></li>
<li class="home"><a href="#nogo"><img src="h_menu1/kontakt.jpg" border="0px" width="201px" hight="29px"></a></li>
</div>
</body>
</html>
|
Code: |
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/example_flyout.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* common styling */
.menu1{
font-family: arial, sans-serif; width:100px; height:180px; position:relative; font-size:11px; margin:0px; padding:0px; border:0px solid #888;
}
.menu1 ul {
padding:0; margin:0; list-style-type: none;
}
.menu1 ul li ul {
visibility:hidden; position:absolute; height:0; overflow:hidden; top:0px; left:200px;
}
.menu1 ul li {
float:left; position:relative; z-index:90;
}
.menu1 ul li a, .menu1 ul li a:visited {
display:block; float:left; text-decoration:none; color:#000; width:65px; height:28px; line-height:0px; font-size:11px; background:transparent; padding-left:0px;
}
* html .menu1 ul li a, .menu1 ul li a:visited {width:100px; w\idth:65px;}
.menu1 ul li.home {background:url(home.gif);}
.menu1 ul li.products {background:url(products.gif);}
.menu1 ul li.services {background:url(services.gif);}
.menu1 ul li.contact {background:url(contact.gif);}
.menu1 ul li.sitemap {background:url(sitemap.gif);}
.menu1 ul li.news {background:url(news.gif);}
.menu1 ul li ul li.subprod1 {background:url(subprod1.gif) no-repeat;}
.menu1 ul li ul li.subprod2 {background:url(subprod2.gif) no-repeat;}
.menu1 ul li ul li.subprod3 {background:url(subprod3.gif) no-repeat;}
.menu1 ul li ul li.subnews1 {background:url(subnews1.gif) no-repeat;}
.menu1 ul li ul li.subnews2 {background:url(subnews2.gif) no-repeat;}
.menu1 ul li ul li.subnews3 {background:url(subnews3.gif) no-repeat;}
.menu1 ul li ul li.subserv1 {background:url(subserv1.gif) no-repeat;}
.menu1 ul li ul li.subserv2 {background:url(subserv2.gif) no-repeat;}
.menu1 ul li ul li.subserv3 {background:url(subserv3.gif) no-repeat;}
.menu1 ul li ul li.subserv4 {background:url(subserv4.gif) no-repeat;}
.menu1 ul li ul li.subserv5 {background:url(subserv5.gif) no-repeat;}
.menu1 table {
border-collapse:collapse; border:0; padding:0; font-size:1em; position:absolute; left:0; top:0;
}
.menu1 ul li:hover a,
.menu1 ul li a:hover{
text-decoration:underline; border:0;
}
.menu1 ul li a:hover {position:relative; z-index:100;}
.menu1 ul li:hover ul,
.menu1 ul li a:hover ul {
visibility:visible; width:170px; height:auto; border:0px solid #606; z-index:10; background:#f8f8f8; overflow:visible;
}
.menu1 ul li:hover ul li a,
.menu1 ul li a:hover ul li a{
display:block; background:transparent; color:#000; width:135px; line-height:0px; padding:0px; height:auto; text-decoration:none;
}
* html .menu1 ul li a:hover ul li a {width:170px; w\idth:135px;}
.menu1 ul li:hover ul li a:hover,
.menu1 ul li a:hover ul li a:hover {
text-decoration:underline; border:0;
}
.menu1 ul li:hover ul li ul,
.menu1 ul li a:hover ul li a ul {
visibility:hidden; position:absolute; height:0; overflow:hidden; top:0; left:151px;
}
.menu1 ul li:hover ul li:hover ul,
.menu1 ul li a:hover ul li a:hover ul {
visibility:visible; position:absolute; width:150px; height:auto; color:#000; padding:0; border:1px solid #888; list-style-type:none; background:#eee;
}
.menu1 ul li:hover ul li:hover ul li a,
.menu1 ul li a:hover ul li a:hover ul li a {
display:block; width:115px; background:transparent; color:#000;
}
* html .menu1 ul li a:hover ul li a:hover ul li a {width:150px; w\idth:115px;}
.menu1 ul li:hover ul li:hover ul li a:hover,
.menu1 ul li a:hover ul li a:hover ul li a:hover {
background:#ddd; text-decoration:underline;
} |
würde mich über hilfe freuen
edit: und noch eine frage... wie könnte ich am geschicktesten ohne rießen aufwand ein mouse over für die bilder einbauen? also nicht nur das ein menü beim mouse over ausgeklappt wird, wie es jetzt schon der fall ist sondern extra noch mal einbilder wechsel.
Zuletzt bearbeitet von anett am Do 16.08.2007 17:07, insgesamt 1-mal bearbeitet
|
|
|
|
|
|
|
|
Ähnliche Themen |
Mouse over Symbol bei FW-Menü (Mozilla Problem)
Layer Menü aus Grafiken
wie erstelle ich diesen menü effekt bzw. das gesammte menü?
CSS Menü - Finde nicht das richtige Menü
CSS Mouse over
Zufälliger Mouse-Over
|
|