✔ Ausfahrbare Navigation

xXsaugerXx · 22. August 2009

Hallo alle Zusammen.

Ich bin schon lange auf der Suche nach einer vernünftigen Navigation. Google sei Dank bin ich dann auf eure Seite gestoßen und habe dann DIESE gefunden. Leider ist der Thread schon zu sonst hätte ich dort gefragt.

Wie kann ich jetzt dieses Script auf das Style meiner Seite anpassen?
Ich würde die Seite ja verlinken, mache ich aber mal aus rein werbetechnischen Gründen nicht und zeige deshalb nur ein Bild als die Homepage neu gemacht wurde damit ihr sehen könnt wie der Style aussieht. KLICK MICH!

Ich danke jetzt schonmal für eure hilfe

ZodiacXP · 22. August 2009

Kleiner Denkanstoß: Was wenn jemand JavaScript deaktiviert hat?

Wenn du denkst, das er dann nicht durch deine Seite navigieren kann versuche mal folgende Lösung:
http://www.cssplay.co.uk/menus/flyoutt.html
http://www.cssplay.co.uk/menus/dd_valid.html
Und noch mehr hier unter "Flyout", "Dropdown" oder "Dropline": http://www.cssplay.co.uk/menus/

Insgesamt finde ich eine Lösung per CSS besser, da etliche moderne Browser das verstehen und anzeigen können.

btw: Gibt es nicht Probleme mit RWE wenn man etwas "RWE Songs" nennt?

Maik · 22. August 2009

Hi,

solche Dropdown-Menüs gibt es im Netz wie Sand am Meer.

Schau dich beispielsweise mal bei Stu Nicholls um:

... um hier nur mal drei aus seiner großen Vielfalt zu nennen.

Was die Anpassung des Menü-Styles auf deine Seite betrifft, sind Kenntnisse in einer Grafikanwendung (bei einem grafischen Menü), sowie in der Formatierungssprache CSS gefragt.

mfg Maik

xXsaugerXx · 22. August 2009

Kleiner Denkanstoß: Was wenn jemand JavaScript deaktiviert hat?

Ich behaupte mal, dass mein Java aktiviert ist.

Ich werde mich mal durch die Links wühlen und hoffen, dass ich was finde.

btw: Gibt es nicht Probleme mit RWE wenn man etwas "RWE Songs" nennt?

Nein, da ich es nicht für kommerzielle Dinge nutze und wenn, dann ist es auch nicht schlimm. "RWE" ist eine Abkürzung und kann alles bedeuten. Wenn ich jetzt das Vereinslogo nehme, dann können sie mich anklagen, WENN() ich kommerzielle Dinge damit betreibe.

Maik · 22. August 2009

xXsaugerXx hat gesagt.:
Ich behaupte mal, dass mein Java aktiviert ist.

Interessanter ist hier die Frage, ob auch der zukünftige Seitenbesucher in seinem Browser Javascript aktiviert hat. Dies könnte nämlich aus Sicherheitsgründen deaktiviert sein. Oder willst du die Seite / das Menü ausschließlich für dich alleine im stillen Kämmerlein nutzen?

Achja, merke: Java != Javascript!

mfg Maik

xXsaugerXx · 22. August 2009

Maik hat gesagt.:
Hi,

solche Dropdown-Menüs gibt es im Netz wie Sand am Meer.

Schau dich beispielsweise mal bei Stu Nicholls um:

http://www.cssplay.co.uk/menus/dd_valid.html

http://www.cssplay.co.uk/menus/pro_drop.html

http://www.cssplay.co.uk/menus/pro_drop2.html

... um hier nur mal drei aus seiner großen Vielfalt zu nennen.

Was die Anpassung des Menü-Styles auf deine Seite betrifft, sind Kenntnisse in einer Grafikanwendung (bei einem grafischen Menü), sowie in der Formatierungssprache CSS gefragt.

mfg Maik

http://www.cssplay.co.uk/menus/dd_valid.html
Wie kann ich das jetzt in mein HTML einbinden?

Maik · 22. August 2009

Ich liste dir hier mal die relevanten Komponenten auf:

Stylesheets im Dokumentheader (<head> ... </head>) aufrufen:

HTML:

<head>
    <link rel="stylesheet" media="all" type="text/css" href="dropdown.css" />
    <!--[if lte IE 6]>
    <link rel="stylesheet" media="all" type="text/css" href="dropdown_ie.css" />
    <![endif]-->
</head>

Stylesheet Teil 1 (dropdown.css):

CSS:

/* ================================================================ 
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/dd_valid.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 */

.menu {font-family: arial, sans-serif; width:750px; height:100px; position:relative; font-size:11px; z-index:100;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}
.menu ul {padding:0; margin:0; list-style: none;}
.menu ul li {float:left; position:relative;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */

.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}

Stylesheet Teil 2 für IE6 (dropdown_ie.css):

CSS:

/* ================================================================ 
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/dd_valid.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.
=================================================================== */

.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}

.menu ul li a:hover {color:#fff; background:#36f;}
.menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}
.menu ul li a:hover ul li a:hover ul.left {left:-105px;}

HTML-Code des Menüs im Dokumentkörper (<body> ... </body>) einbinden:

HTML:

<body>

<div class="menu">
<ul>
<li><a class="hide" href="./menu/index.html">DEMOS</a>
<!--[if lte IE 6]>
<a href="./menu/index.html">DEMOS
<table><tr><td>
<![endif]-->
	<ul>
	<li><a href="./menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
	<li><a href="./menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
	<li><a href="./menu/form.html" title="Styling forms">styled form</a></li>
	<li><a href="./menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
	<li><a class="hide" href="./menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK &gt;</a>
    <!--[if lte IE 6]>
    <a class="sub" href="./menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK &gt;
    <table><tr><td>
    <![endif]-->
		<ul>
			<li><a href="./menu/form.html" title="Styling forms">styled form</a></li>
			<li><a href="./menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
			<li><a href="./menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
		</ul>
	<!--[if lte IE 6]>
	</td></tr></table>
    </a>
    <![endif]-->
	</li>
	<li><a href="./menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
	<li><a href="./menu/old_master.html" title="Image Map for detailed information">image map</a></li>
	<li><a href="./menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
	<li><a href="./menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
	<li><a href="./menu/em_images.html" title="em size images compared">em sized images</a></li>
	</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="index.html">MENUS</a>
<!--[if lte IE 6]>
<a href="index.html">MENUS
<table><tr><td>
<![endif]-->
	<ul>
	<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
	<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
	<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
	<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
	<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
	<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
	<li><a href="circles.html" title="circular links">circular links</a></li>
	</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="./layouts/index.html">LAYOUTS</a>
<!--[if lte IE 6]>
<a href="./layouts/index.html">LAYOUTS
<table><tr><td>
<![endif]-->
	<ul>
	<li><a href="./layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
	<li><a href="./layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
	<li><a href="./layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
	<li><a href="./layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
	<li><a href="./layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
	</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="./boxes/index.html">BOXES</a>
<!--[if lte IE 6]>
<a href="./boxes/index.html">BOXES
<table><tr><td>
<![endif]-->
	<ul>
	<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
	<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
	<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
	<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
	<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
	<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
	<li><a href="circles.html" title="circular links">circular links</a></li>
	</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="./mozilla/index.html">MOZILLA</a>
<!--[if lte IE 6]>
<a href="./mozilla/index.html">MOZILLA
<table><tr><td>
<![endif]-->
	<ul>
	<li><a href="./mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
	<li><a href="./mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
	<li><a href="./mozilla/content.html" title="Using content:">content:</a></li>
	<li><a href="./mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
	<li><a href="./mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
	<li><a href="./mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
	<li><a href=".mozilla/target.html" title="Target Practise">target practise</a></li>
	<li><a href="./mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
	<li><a href="./mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
	</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="./ie/index.html">EXPLORER</a>
<!--[if lte IE 6]>
<a href="./ie/index.html">EXPLORER
<table><tr><td>
<![endif]-->
	<ul>
	<li><a href="./ie/exampleone.html" title="Example one">example one</a></li>
	<li><a href="./ie/weft.html" title="Weft fonts">weft fonts</a></li>
	<li><a href="./ie/exampletwo.html" title="Vertical align">vertical align</a></li>
	</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="./opacity/index.html">OPACITY</a>
<!--[if lte IE 6]>
<a href="./opacity/index.html">OPACITY
<table><tr><td>
<![endif]-->
	<ul>
	<li><a href="./opacity/colours.html" title="colour wheel">opaque colours</a></li>
	<li><a href="./opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
	<li><a href="./opacity/png.html" title="partial opacity">partial opacity</a></li>
	<li><a href="./opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
	<li><a class="hide" href="./menu/hover_click.html" title="Hover/click with no active/focus borders">&lt; HOVER/CLICK</a>
    <!--[if lte IE 6]>
    <a class="sub" href="./menu/hover_click.html" title="Hover/click with no active/focus borders">&lt; HOVER/CLICK
    <table><tr><td>
    <![endif]-->
		<ul class="left">
			<li><a href="./menu/form.html" title="Styling forms">styled form</a></li>
			<li><a href="./menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
			<li><a href="./menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
		</ul>
	<!--[if lte IE 6]>
	</td></tr></table>
    </a>
    <![endif]-->
	</li>
	</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
</div>

</body>

mfg Maik

xXsaugerXx · 23. August 2009

Ich krieg es einfach nicht hin

Mag mir keiner helfen indem ich ihm nur das Script schicke?

Maik · 23. August 2009

Du solltest schon etwas näher darauf eingehen, was du nicht umgesetzt bekommst, und den Versuch anhand deines Quellcodes hier dokumentieren, damit man sich dazu überhaupt äußern kann.

mfg Maik

Maik · 23. August 2009

Ich häng dir hier mal das "gebrauchsfertige" Menü an - vielleicht hilft dir das weiter.

mfg Maik

✔ Ausfahrbare Navigation

xXsaugerXx

Grünschnabel

ZodiacXP

Erfahrenes Mitglied

Maik

xXsaugerXx

Grünschnabel

Maik

xXsaugerXx

Grünschnabel

Maik

xXsaugerXx

Grünschnabel

Maik

Maik

Anhänge

Neue Beiträge