Jump to content

slidermenu modification


katsching

Recommended Posts

hi

 

i have near the same wish like the user in this post phpfreaks.com/forums/index.php?topic=263112. i want also that my slidermenu is open when someone come on the side.

 

but when he move the mouse on an other point i want that the new category open and the other one close.

 

 

here is my code:

 

/*********************
//* jQuery Multi Level CSS Menu #2- By Dynamic Drive: http://www.dynamicdrive.com/
//* Last update: Nov 7th, 08': Limit # of queued animations to minmize animation stuttering
//* Menu avaiable at DD CSS Library: http://www.dynamicdrive.com/style/
*********************/

//Update: April 12th, 10: Fixed compat issue with jquery 1.4x

//Specify full URL to down and right arrow images (23 is padding-right to add to top level LIs with drop downs):
var arrowimages={down:['downarrowclass', 'down.gif', 23], right:['rightarrowclass', 'right.gif']}

var jqueryslidemenu={

animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds

buildmenu:function(menuid, arrowsvar){
jQuery(document).ready(function($){		
	var $mainmenu=$("#"+menuid+">ul")
	var $headers=$mainmenu.find("ul").parent()
	$headers.each(function(i){
		var $curobj=$(this)
		var $subul=$(this).find('ul:eq(0)')
		this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
		this.istopheader=$curobj.parents("ul").length==1? true : false
		$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
		$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
			'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
			+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
			+ '" style="border:0;" />'
		)
		$curobj.hover(
			function(e){
				var $targetul=$(this).children("ul:eq(0)")
				this._offsets={left:$(this).offset().left, top:$(this).offset().top}
				var menuleft=this.istopheader? 0 : this._dimensions.w
				menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
				if ($targetul.queue().length<=1) //if 1 or less queued animations
					$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
			},
			function(e){
				var $targetul=$(this).children("ul:eq(0)")
				$targetul.slideUp(jqueryslidemenu.animateduration.out)
			}
		) //end hover
		$curobj.click(function(){
			$(this).children("ul:eq(0)").hide()
		})
	}) //end $headers.each()
	$mainmenu.find("ul").css({display:'none', visibility:'visible'})
}) //end document.ready
}
}

//build menu with ID="myslidemenu" on page:
jqueryslidemenu.buildmenu("myslidemenu", arrowimages)

 

thanks for your help and greets from switzerland.

 

markus

 

Link to comment
https://forums.phpfreaks.com/topic/240223-slidermenu-modification/
Share on other sites

ups. false script. i post the right one. sorry.

 

/ search
searchini = function() {
  var frm = document.getElementById('wwwsearch');
  var ser = document.getElementById('go');
  var wrd = document.getElementById('words');
  var h = document.getElementsByTagName('span');
  var divs = document.getElementsByTagName('div');
  wrd.value = ser.title;
  frm.onsubmit=function() {
    if(this.words.value=='Search www.katsching.ch'||this.words.value=='') {
      alert('Please enter a search term.');
      this.words.focus();
      return false;
    }
  }
  wrd.onfocus=function() {if(this.value=='Search www.katsching.ch'){this.value=''};}
  wrd.onblur=function() {if(this.value==''){this.value='Search www.katsching.ch'};}
  for (var i=0;i<h.length;i++) { 
    if (h[i].className=='noscript') {h[i].className = 'yank';}
    if (h[i].className=='reveal') {h[i].className = '';}
  }
  for (var i=0;i<divs.length;i++) { 
    if (divs[i].className=='noscript') {divs[i].className = 'yank';}
    if (divs[i].className=='reveal') {divs[i].className = '';}
  }
}

// IE hover fix
sfHover = function() {
  var sfEls = document.getElementById('mainmenu').getElementsByTagName('LI');
  for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
      this.className+=(this.className.length>0? " ": "") + "sfhover";
    }
    sfEls[i].onmouseout=function() {
      this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
    }
  }
}

// accessibility script
mcAccessible = function() {
  searchini();
  var mcEls = document.getElementById('mainmenu').getElementsByTagName('A');
  for (var i=0; i<mcEls.length; i++) {
    mcEls[i].onfocus=function() {
      this.className+=(this.className.length>0? " ": "") + "sffocus"; //a:focus
      this.parentNode.className+=(this.parentNode.className.length>0? " ": "") + "sfhover"; //li < a:focus
      if(this.parentNode.parentNode.parentNode.nodeName == 'LI') {
        this.parentNode.parentNode.parentNode.className+=(this.parentNode.parentNode.parentNode.className.length>0? " ": "") + "sfhover"; //li < ul < li < a:focus
      }
    }
    mcEls[i].onblur=function() {
      this.className=this.className.replace(new RegExp("( ?|^)sffocus\\b"), "");
      this.parentNode.className=this.parentNode.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
      if(this.parentNode.parentNode.parentNode.nodeName == 'LI') {
        this.parentNode.parentNode.parentNode.className=this.parentNode.parentNode.parentNode.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
      }
    }
    mcEls[i].onmouseup=function() {
      this.className=this.className.replace(new RegExp("( ?|^)sffocus\\b"), "");
      this.parentNode.className=this.parentNode.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
      if(this.parentNode.parentNode.parentNode.nodeName == 'LI') {
        this.parentNode.parentNode.parentNode.className=this.parentNode.parentNode.parentNode.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
      }
    }
  }
}

// cookies
function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else var expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
  //alert('cookie written: ' + name + '=' + value);
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

// event listener
if(window.addEventListener) window.addEventListener('load', mcAccessible, false); // gecko, safari, konqueror and standard
else if(document.addEventListener) document.addEventListener('load', mcAccessible, false); // opera 7
else if(window.attachEvent) { // win/ie
  window.attachEvent('onload', sfHover);
  window.attachEvent('onload', mcAccessible);
} else { // mac/ie5
  if(typeof window.onload == 'function') {
    var existing = onload;
    window.onload = function() {
      existing();
      sfHover();
      mcAccessible();
    }
  } else {
    window.onload = function() {
      sfHover();
      mcAccessible();
    }
  }
}

// email scrambler
mail = function(name,domain,text,subject) {
  if (!domain) {domain='katsching.ch'}
  if (!text) {text=name+'&#64;'+domain}
  if (!subject) {document.write('<a href="mailto:'+name+'&#64;'+domain+'">'+text+'</a>');}
    else {document.write('<a href="mailto:'+name+'&#64;'+domain+'?subject='+escape(subject)+'">'+text+'</a>');}
}


// a generic function for adding multiple onload events
function addOnloadEvent(fnc){
  if ( typeof window.addEventListener != "undefined" )
    window.addEventListener( "load", fnc, false );
  else if ( typeof window.attachEvent != "undefined" ) {
    window.attachEvent( "onload", fnc );
  }
  else {
    if ( window.onload != null ) {
      var oldOnload = window.onload;
      window.onload = function ( e ) {
        oldOnload( e );
        window[fnc]();
      };
    }
    else 
      window.onload = fnc;
  }
}

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.