submenü soll nicht wieder verschwinden

stefan_123

Grünschnabel
hallo an alle ,

erstmal bin ich froh dieses forum neu kennen zu lernen, vielleicht könnt ihr mir hier helfen

mein link http://dreamweaver.holiday-feelings.eu/

wenn ich das submenü aufrufe möchte ich das es wenn es angeklickt wird

zum bsp. Bilder Sommer Aegypten 2011 dann auf strand , dann öffnet sich die gallery strand , aber das submenü geht wieder zu , ich würde es gerne so haben das das untermenü nach dem anklicken offen bleibt

es ist mit dem superfish menu gemacht , welche dateien braucht ihr hier ****

danke für eure hilfe im voraus

vg

stefan

----------------
superfish.js
----------------
Javascript:
/*
 * Superfish v1.4.8 - $ menu widget
 * Copyright (c) 2008 Joel Birch
 *
 * Dual licensed under the MIT and GPL licenses:
 * 	http://www.opensource.org/licenses/mit-license.php
 * 	http://www.gnu.org/licenses/gpl.html
 *
 * CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt
 */

;(function($){
	initialized = false;
	$.fn.superfish = function(op){
		if(initialized) return;
		initialized = true;
		var sf = $.fn.superfish,
			c = sf.c,
			$arrow = $(['<span class="',c.arrowClass,'"> »</span>'].join('')),
			over = function(){
				var superfish = $(this), menu = getMenu(superfish);
				clearTimeout(menu.sfTimer);
				superfish.showSuperfishUl().siblings().hideSuperfishUl();        /* hideSuperfishUl();   old*/
			},
			out = function(){
				var superfish = $(this), menu = getMenu(superfish), o = sf.op;
				clearTimeout(menu.sfTimer);
				menu.sfTimer=setTimeout(function(){
					o.retainPath=($.inArray(superfish[0],o.$path)>-1);
					superfish.hideSuperfishUl();
					if (o.$path.length && superfish.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
				},o.delay);
			},
			getMenu = function($menu){
				var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
				sf.op = sf.o[menu.serial];
				return menu;
			},
			addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };

		return this.each(function() {
			var s = this.serial = sf.o.length;
			var o = $.extend({},sf.defaults,op);
			o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){
				$(this).addClass([o.hoverClass,c.bcClass].join(' '))
					.filter('li:has(ul)').removeClass(o.pathClass);
			});
			sf.o[s] = sf.op = o;

			$('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() {
				if (o.autoArrows) addArrow( $('>a:first-child',this) );
			})
			.not('.'+c.bcClass)
				.hideSuperfishUl();

			var $a = $('a',this);
			$a.each(function(i){
				var $li = $a.eq(i).parents('li');
				$a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});
			});
			o.onInit.call(this);

		}).each(function() {
			var menuClasses = [c.menuClass];
			if (sf.op.dropShadows  && !($.browser.msie && $.browser.version < 7)) menuClasses.push(c.shadowClass);
			$(this).addClass(menuClasses.join(' '));
		});
	};

	var sf = $.fn.superfish;
	sf.o = [];
	sf.op = {};
	sf.IE7fix = function(){
		var o = sf.op;
		if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined)
			this.toggleClass(sf.c.shadowClass+'-off');
		};
	sf.c = {
		bcClass     : 'sf-breadcrumb',
		menuClass   : 'sf-js-enabled',
		anchorClass : 'sf-with-ul',
		arrowClass  : 'sf-sub-indicator',
		shadowClass : 'sf-shadow'
	};
	sf.defaults = {
		hoverClass	: 'sfHover',
		pathClass	: 'overideThisToUse',
		pathLevels	: 1,          //  1
		delay		: 800,       /*   800 old         */
		animation	: {opacity:'show'},           /*  {opacity:'show'},*/
		speed		: 'normal',
		autoArrows	: true,            //  true old
		dropShadows : true,          //    true old
		disableHI	: true,		// true disables hoverIntent detection
		onInit		: function(){}, // callback functions
		onBeforeShow: function(){},
		onShow		: function(){},
		onHide		: function(){}
	};
	$.fn.extend({
		hideSuperfishUl : function(){
			var o = sf.op,
				not = (o.retainPath===true) ? o.$path : '';
			o.retainPath = false;
			var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
					.find('>ul').hide().css('visibility','hidden');
			o.onHide.call($ul);
			return this;
		},
		showSuperfishUl : function(){
			var o = sf.op,
				sh = sf.c.shadowClass+'-off',
				$ul = this.addClass(o.hoverClass)
					.find('>ul:hidden').css('visibility','visible');       /* .find('>ul:hidden').css('visibility','visible');    old */
			sf.IE7fix.call($ul);
			o.onBeforeShow.call($ul);
			$ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
			return this;
		}
	});

})(jQuery);

-----------------------
superfish.css
-----------------------
CSS:
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
	margin:			0;
	padding:		0;
	list-style:		none;
}
.sf-menu {
	line-height:	1.0;
}
.sf-menu ul {   /* test rechte größe ) */
	position:		absolute;
	top:			-999em;
	width:			20em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
	width:			100%;
}
.sf-menu li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
	float:			left;
	position:		relative;
}
.sf-menu a {
	display:		block;
	position:		relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left:			0;
	top:			2.5em; /* match top ul list item height */
	z-index:		99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
}

/*** DEMO SKIN ***/
.sf-menu {
	float:			left;
	margin-bottom:	1em;
}
.sf-menu a {
	border-left:	1px solid #990033;    /*linker rahmen von startseite und  impressum*/
	border-top:		1px solid #990033;    /*obere rahmen von startseite und  impressum*/
	padding: 		.75em 1em;
	text-decoration:none;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color:			#fff;          /* 13a old */
}

.sf-menu li {           /*       .sf-menu li = ist die hintergrundfarbe links          /(orange   ff9900 )*/
	background:		#ff9900;     /*   (farbe old = BDD2FF )            */
}
.sf-menu li li {
	background:		#990033;     /*      AABDE6 = old     .sf-menu li li =    ist die hintergrundfarbe rechts   */
}
.sf-menu li li li {
	background:		#9AAEDB;                           /*       = old          */
}

.sf-menu li:first-child, .sf-menu li.first-child {
}

.sf-menu li:last-child, .sf-menu li.last-child {
}

.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
	background:		#CCFF00;   /*    CFDEFF   = old     =    ist die hintergrundfarbe wenn man mitder maus drüber fährt    */
	outline:		0;
}

.sf-menu li .separator {
	display: block;
	border-left:	1px solid #fff;        /*      CFDEFF = old    =    linker  rand in der linken menüleiste  */
	border-top:		1px solid #880000 ;    /*      CFDEFF = old    =    oberer  rand in der linken menüleiste  */
	padding: 		.75em 1em;
	text-decoration:none;
}

/*** arrows **/
.sf-menu a.sf-with-ul {
	padding-right: 	2.25em;
	min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
	position:		absolute;
	display:		block;
	right:			.75em;
	top:			1.05em; /* IE6 only */
	width:			10px;
	height:			10px;
	text-indent: 	-999em;
	overflow:		hidden;           /*           */
	background:		url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
	top:			.8em;
	background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
	background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
	background:	url('../images/shadow.png') no-repeat bottom right;
	padding: 0 8px 9px 0;
	-moz-border-radius-bottomleft: 17px;
	-moz-border-radius-topright: 17px;
	-webkit-border-top-right-radius: 17px;
	-webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
	background: transparent;
}

.sf-menu .active {         /*     ccc old  = linkes auswahlmenü aktiver reiter . wo mann zuletzt ein menu aufgerufen hat   */
	background: #0000FF;
}

.sf-menu #current {            /*    aaa old  =     die aktuelle seite die man anschaut       */
	background: #CC00FF;
}

.superfish_clear {
	clear: both !important;
	height: 1px !important;
	overflow: hidden !important;
	font-size: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
}
 
Zuletzt bearbeitet von einem Moderator:
Hallo CPoly,

danke dir für deine schnelle Idee, und deine schnelle Hilfe. Bin für heute schon fast gameover aber ich schaue mal auf den link, werde mich morgen hier wieder im Forum mit Feedback melden

vg

Speedy_123
 
hallo CPoly und an alle ,

vielen dank für deine schnelle Hilfe. Für mich ist es noch ein wenig schwerr, mit php

zurecht zu kommen.

CSS wäre noch ok , php stehe ich noch am Anfang,

Vielleicht könnt ihr mir hier noch weiterhelfen wo ich das php scribt einbauen muss

warte gerne auf weitere Hilfe, vielleicht ist ja ein programmierer unter euch

wünsche euch noch ein schönes wo

vg

stefan_123
 

Neue Beiträge

Zurück