mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 05:55 Benutzername: Passwort: Auto-Login

Thema: menü mit grafiken mouse over vom 16.08.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> menü mit grafiken mouse over
Autor Nachricht
anett
Threadersteller

Dabei seit: 06.12.2004
Ort: -
Alter: 40
Geschlecht: Weiblich
Verfasst Do 16.08.2007 12:27
Titel

menü mit grafiken mouse over

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden
nicoG

Dabei seit: 25.01.2006
Ort: Freiburg
Alter: -
Geschlecht: Männlich
Verfasst Do 16.08.2007 12:52
Titel

Re: menü mit grafiken mouse over

Antworten mit Zitat Zum Seitenanfang

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 Lächel


Zuletzt bearbeitet von nicoG am Do 16.08.2007 12:54, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Mark-Korb

Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht: Männlich
Verfasst Do 16.08.2007 12:57
Titel

Antworten mit Zitat Zum Seitenanfang

Prnzipiel geht das am besten mit Listen:
So über Listen allgemein:
http://css.fractatulum.net/beispiele.htm

Auf basis von dem hier geht es :
http://www.drweb.de/leseproben/klappmenu.shtml

hier auch noch was:
http://www.andreas-kalt.de/webdesign/links/css#menu
  View user's profile Private Nachricht senden
anett
Threadersteller

Dabei seit: 06.12.2004
Ort: -
Alter: 40
Geschlecht: Weiblich
Verfasst Do 16.08.2007 13:08
Titel

Antworten mit Zitat Zum Seitenanfang

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?
  View user's profile Private Nachricht senden
nicoG

Dabei seit: 25.01.2006
Ort: Freiburg
Alter: -
Geschlecht: Männlich
Verfasst Do 16.08.2007 13:31
Titel

Antworten mit Zitat Zum Seitenanfang

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 Lächel
  View user's profile Private Nachricht senden
anett
Threadersteller

Dabei seit: 06.12.2004
Ort: -
Alter: 40
Geschlecht: Weiblich
Verfasst Do 16.08.2007 13:51
Titel

Antworten mit Zitat Zum Seitenanfang

oha... das wußt ich nicht.

danke für den tipp. ich versuchs direkt mal. Lächel
  View user's profile Private Nachricht senden
anett
Threadersteller

Dabei seit: 06.12.2004
Ort: -
Alter: 40
Geschlecht: Weiblich
Verfasst Do 16.08.2007 15:04
Titel

Antworten mit Zitat Zum Seitenanfang

ich hab das menü jetzt gewählt: http://www.cssplay.co.uk/menus/example_flyout.html

hab zwar noch nen paar probleme mit dem anpassen aber im großen und ganzen scheint es zu funktionieren.
  View user's profile Private Nachricht senden
anett
Threadersteller

Dabei seit: 06.12.2004
Ort: -
Alter: 40
Geschlecht: Weiblich
Verfasst Do 16.08.2007 16:48
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
 
Ä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
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.