[Mufasa]

Hallo allerseits,

ich hätte da mal ne Frage

Habe diese richtig schöne Jquery/CSS3-Navigation gefunden: Awesome Cufonized Fly-out Menu with jQuery and CSS3

Das Script ist zwar schon von 2010, aber ich finde es sieht immer noch ziemlich modern aus. Daher würde ich das gerne für ein kleines privates Projekt nutzen. Allerdings möchte ich das Ganze spiegeln, das heißt Navigationselemente nach Links und die Description soll vom rechten Rand reinfliegen.

Ich bin mit meinem css jetzt so weit:

body, ul, li, h1, h2, span{
	margin:0;
	padding:0;
}
ul{
	list-style:none;
}
body{
	background:#292929;

}
.slidingMenu {
	position: absolute;
	height:410px;
	width: 410px;
	top:40px;
	overflow:hidden;
	left:1px;
	font-family: Arial, Helvetica, sans-serif;
}
.slidingMenu li {
	display:block;
	float:left;
	clear:both;
	position:relative;
	overflow:hidden;
}
.slidingMenu li.move {
	width: 9px;
	height: 68px;
	left:0px;
	padding-left:10px;
	margin-top:2px;
	z-index: 8;
	position: absolute;
	background: #2183c4;
	background:
		-webkit-gradient(
			linear,
			left top,
			left bottom,
			from(#0771b8),
			to(#2183c4)
		);
	background:
		-moz-linear-gradient(
			top,
			#0771b8,
			#2183c4
		);
	-moz-border-radius: 8px 0px 0px 8px;
	-webkit-border-top-right-radius: 8px;
	-webkit-border-bottom-right-radius: 8px;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	-moz-box-shadow:1px 1px 5px #000;
	-webkit-box-shadow:1px 1px 5px #000;
	box-shadow:1px 1px 5px #000;
	}
.slidingMenu li a {
	font-size:66px;
	text-transform:uppercase;
	text-decoration: none;
	color: #ddd;
	outline: none;
	text-indent:5px;
	z-index: 10;
	display: block;
	float: right;
	height: 66px;
	line-height: 66px;
	position: relative;
	overflow: hidden;
	padding-right:10px;
}
/* Descriptions */
.slidingMenuDesc{
	margin-top:40px;
	position:relative;
}
.slidingMenuDesc div{
	background: #2183c4;
	background:
		-webkit-gradient(
			linear,
			left top,
			left bottom,
			from(#0771b8),
			to(#2183c4)
		);
	background:
		-moz-linear-gradient(
			top,
			#0771b8,
			#2183c4
		);
	height: 68px;
	padding-right:5px;
	left:-5px;
	width:0px;
	margin-top:2px;
	overflow:hidden;
	position:absolute;
	-moz-box-shadow:1px 1px 5px #000;
	-webkit-box-shadow:1px 1px 5px #000;
	box-shadow:1px 1px 5px #000;
	-moz-border-radius: 0px 8px 8px 0px;
	-webkit-border-top-right-radius: 8px;
	-webkit-border-bottom-right-radius: 8px;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
}
.slidingMenuDesc div span {
	font-size:36px;
	color: #f0f0f0;
	text-indent:5px;
	z-index: 10;
	display: block;
	height: 66px;
	line-height: 66px;
	position:absolute;
	left:10px;
	margin-right:5px;
	top:-3px;
}

Damit ist der Menü-Block zwar nach links, aber ich kriege es nicht hin die Description von der anderen Seite reinfliegen zu lassen.

Könnt sich das vielleicht mal jemand anschauen?

Würde mich über jede Info sehr freuen.

LG

[cloned]

Erstmal: Das ist ein uralt-Tutorial, die hälfte der Sachen brauchst du nicht mehr, das cufon.js, das jquery-ease.js und bitte verwende auch eine aktuelle jquery version. Auch beim CSS brauchst du die Präfixe nicht mehr, du musst aber die Version ohne Präfixe noch angeben bei den CSS-Werden, die im Tutorial nur mit Präfixen angegeben sind.

Das Einfliegen passiert auch nicht im CSS sondern im Javascript (wie im Tutorial auch erklärt wird). Hier musst du deine Berechnung also anpassen.

[Mufasa]

Danke für die Antwort. Okaaaay.... ja sowas in der Art hatte ich mir schon vorgestellt, dass da bestimmt Methoden sind, die heute anders gemacht werden.

Allerdings bin ich ehrlich gesagt JS-mäßig leider ziemlich eingerostet und jQuery müsste ich mich dann auch erst komplett neu einarbeiten. Werde ich auch in naher Zukunft angehen, allerdings fehlt mir für dieses Projekt jetzt einfach die Zeit.

Wärst Du so nett und könntest mir hierbei direkt aushelfen? Würde mich sehr sehr sehr freuen. Ich bin sicher für Dich ist das sicher eine Kleinigkeit, oder?!

[cloned]

Wenn du es nicht selber machen kannst findest du bestimmt jemanden, der willig ist, das gegen Bezahlung zu machen.

Geld ist doch nur eine Kleinigkeit, oder?!

[Mufasa]

Ja, ganz genau!