Archief - verticaal image menu systeem

Gust · 24 aug 2009

Ik was op zoek naar een verticaal afbeelding menu systeem. Op http://www.byscripts.info/scripts/javascript-dynamic-accordion-menu heb ik deze dan ook gevonden. Zie example 3

Hetgeen wat je normaal zou moeten doen
- download de .js file
- verander deze .js file, zoals uitgelegd in example 3
- plaats het stukje html-code, zoals uitgelegd in example 3

Maar er is een probleem:
Hoe moet ik dat stukje .js in de grote .js-file plaatsen? Hierdoor werkt het menu niet bij mij. Is er iemand die mij hiermee kan helpen?

De html:

HTML:

<ul id="verticalmenu">    
<li><img src="creditcardsV.jpg" /></li>    
<li><img src="gamesV.jpg" /></li>    
<li><img src="computerV.jpg" /></li>    
<li><img src="eiffeltowerV.jpg" /></li>    
<li><img src="electronicV.jpg" /></li> 
</ul>

Een klein stukje javascript:

HTML:

var verticalmenu = new BySlideMenu('verticalmenu', {vertical: true});

Deze moet verwerkt worden in onderstaande code:

HTML:

var BySlideMenu = new Class({ 
   Implements: Options, 
 
   options: { 
      defaultIndex: false, 
      expandMode: 'mouseover', 
      pinMode: false, 
      vertical: false, 
      compressSize: 40, 
      elementWidth: 320, 
      elementHeight: 240, 
      autoSize: true, 
      duration: 500, 
      transition: 'linear', 
      containerWidth: null, 
      containerHeight: null, 
      useOverflow: false 
   }, 
    
   initialize: function(containerId, options){ 
      this.setOptions(options); 
      this.elementsId = []; 
      this.containerId = $pick(containerId, 'byslidemenu'); 
       
      var container = $(this.containerId);    
       
      container.addEvent('mouseleave', function(){ 
         this.resetAll(); 
      }.bind(this)); 
       
      var elements = container.getChildren(); 
      var num = elements.length; 
 
      var imgHeight = null, imgWidth = null; 
      if(this.options.autoSize) 
      { 
         var firstImg = elements[0].getElement('img'); 
       
         if(firstImg) 
         { 
            imgHeight = firstImg.getHeight(); 
            imgWidth = firstImg.getWidth(); 
         } 
      } 
       
      var offsetWidth = 
         elements[0].getStyle('padding-left').toInt() 
         + elements[0].getStyle('padding-right').toInt() 
         + elements[0].getStyle('border-left-width').toInt() 
         + elements[0].getStyle('border-right-width').toInt(); 
      var offsetHeight = 
         elements[0].getStyle('padding-top').toInt() 
         + elements[0].getStyle('padding-bottom').toInt() 
         + elements[0].getStyle('border-top-width').toInt() 
         + elements[0].getStyle('border-bottom-width').toInt(); 
       
      if(this.options.vertical) 
      { 
         this.posAttr = 'top'; 
         var containerWidth = $pick(imgWidth, this.options.containerWidth, this.options.elementWidth); 
         if(containerWidth == "full") 
            containerWidth = container.getParent().getStyle('width').toInt(); 
         if(this.options.containerHeight) 
         { 
            if(this.options.containerWidth == 'full') 
               var containerHeight = container.getParent().getStyle('height').toInt(); 
            else 
               var containerHeight = this.options.containerHeight; 
 
            this.openSize = containerHeight - ((num - 1) * this.options.compressSize); 
         } 
         else 
         { 
            this.openSize = $pick(imgHeight, this.options.elementHeight); 
            var containerHeight = this.openSize + ((num - 1) * this.options.compressSize); 
         } 
          
         this.closeSize = containerHeight / num; 
          
         var elementHeight = this.openSize; 
         var elementWidth = containerWidth; 
      } 
      else 
      { 
         this.posAttr = 'left'; 
         var containerHeight = $pick(imgHeight, this.options.containerHeight, this.options.elementHeight); 
         if(containerHeight == "full") 
            containerHeight = container.getParent().getStyle('height').toInt(); 
         if(this.options.containerWidth) 
         { 
            if(this.options.containerWidth == 'full') 
               var containerWidth = container.getParent().getStyle('width').toInt(); 
            else 
               var containerWidth = this.options.containerWidth; 
 
            this.openSize = containerWidth - ((num - 1) * this.options.compressSize); 
         } 
         else 
         { 
            this.openSize = $pick(imgWidth, this.options.elementWidth); 
            var containerWidth = this.openSize + ((num - 1) * this.options.compressSize); 
         } 
         this.closeSize = containerWidth / num; 
          
         var elementHeight = containerHeight; 
         var elementWidth = this.openSize; 
      } 
 
      container.setStyles({ 
         padding: 0, 
         position: 'relative', 
         overflow: 'hidden', 
         width: containerWidth, 
         height: containerHeight 
      }); 
       
      var id = 0; 
       
      elements.each(function(element){ 
         var beforePos = id * this.options.compressSize; 
         var afterPos = this.openSize + ((id - 1) * this.options.compressSize); 
         var closePos = id * this.closeSize; 
         element.setStyles({ 
            position: 'absolute', 
            height: elementHeight - offsetHeight, 
            width: elementWidth - offsetWidth 
         }); 
         element.setStyle(this.posAttr, closePos); 
         element.set('tween', { 
            duration: this.options.duration, 
            transition: this.options.transition 
         }); 
          
         id++; 
          
         element.set('id', this.containerId + '_Elm' + id); 
         element.store('id', id); 
          
         element.store('beforePos', beforePos); 
         element.store('afterPos', afterPos); 
         element.store('closePos', closePos); 
 
         this.elementsId.include(id); 
          
         if([this.options.pinMode, this.options.expandMode].contains('mouseover')) 
         { 
            element.addEvent('mouseenter', function(element){ 
               if(this.options.expandMode == 'mouseover') 
                  this.expand(element, this.options.pinMode == 'mouseover'); 
            }.bind(this, element)); 
         } 
          
         if(this.options.pinMode || this.options.expandMode == 'click') 
         { 
            element.addEvent('click', function(element){ 
               if(this.options.defaultIndex == element.retrieve('id')) 
               { 
                  this.options.defaultIndex = 0; 
                  this.resetAll(); 
               } 
               else if(this.options.expandMode == 'click') 
                  this.expand(element, this.options.pinMode == 'click'); 
               else 
                  this.options.defaultIndex = element.retrieve('id'); 
            }.bind(this, element)); 
         } 
 
      }, this); 
       
      if(this.options.defaultIndex) 
         this.expand(this.options.defaultIndex, false, true); 
   }, 
    
   expand: function(element, setDefault, noAnim){ 
      if($type(element) == 'number') 
         element = $(this.containerId + '_Elm' + element); 
          
      if(this.options.useOverflow) 
         this.clearOverflow(); 
       
      var currentId = element.retrieve('id'); 
       
      if(this.options.useOverflow) 
         this.switchOverflowTimer = this.switchOverflow.delay(this.options.duration, this, element); 
       
      if(setDefault) 
         this.options.defaultIndex = currentId; 
       
      this.elementsId.each(function(elementId){ 
         var elm = $(this.containerId + '_Elm' + elementId); 
         if(elementId > currentId) 
            this.compressAfter(elm, noAnim); 
         else 
            this.compressBefore(elm, noAnim); 
      }, this); 
   }, 
    
   switchOverflow: function(element){ 
      element.setStyle('overflow', 'auto'); 
   }, 
    
   clearOverflow: function(){ 
      $clear(this.switchOverflowTimer); 
      $(this.containerId).getChildren().setStyle('overflow', ''); 
   }, 
    
   compressBefore: function(element, noAnim){ 
      var pos = element.retrieve('beforePos'); 
      var tween = element.get('tween', {property: this.posAttr, duration: this.options.duration, transition: this.options.transition}); 
       
      if(noAnim) 
         tween.set(pos); 
      else 
         tween.start(pos); 
   }, 
    
   compressAfter: function(element, noAnim){ 
      var pos = element.retrieve('afterPos'); 
      var tween = element.get('tween', {property: this.posAttr, duration: this.options.duration, transition: this.options.transition}); 
      if(noAnim) 
         tween.set(pos); 
      else 
         tween.start(pos); 
   }, 
    
   reset: function(element){ 
      var pos = element.retrieve('closePos'); 
      element.get('tween', {property: this.posAttr, duration: this.options.duration, transition: this.options.transition}).start(pos); 
   }, 
    
   resetAll: function(){ 
      if(this.options.useOverflow) 
         this.clearOverflow(); 
 
      if(this.options.defaultIndex) 
         this.expand(this.options.defaultIndex); 
      else 
      { 
         this.elementsId.each(function(elementId){ 
            this.reset($(this.containerId + '_Elm' + elementId)); 
         }, this); 
      } 
   } 
});

Wie wilt er mij helpen aub?

Xavez · 24 aug 2009

Waarom gebruik je JavaScript? Dit kan perfect met CSS

.

adrianhates · 24 aug 2009

1. link werkt niet
2. xavez is weeral correct
3. hier is wat hij bedoelt..
a) CSS Menus - Vertical CSS Menu with Popout and Dropdown Menus
b) +100 horizontal & vertical CSS list menus - Online business
c) Simple CSS vertical menu Digg-like ( beetje js )
d ) Let me google that for you

Fr3aK · 24 aug 2009

Sinds ik op mijn werk, in 't begin, aangeraden ben geweest om MX Menus van Dreamweaver te gebruiken heb ik een enorme afkeer van JS-dropdown-menus gekregen, vooral omdat ik gewoon was om dropdowns via Suckerfish/Son of Suckerfish op te maken.

Met al de alternatieven tegenwoordig is er geen enkele reden meer om een dropdown-menu nog te laten werken via JS, op een kleine omweg voor IE5/IE6 na...

j design · 24 aug 2009

Sinds ik op mijn werk, in 't begin, aangeraden ben geweest om MX Menus van Dreamweaver te gebruiken heb ik een enorme afkeer van JS-dropdown-menus gekregen

Waar werk je ergens?

Suckerfish is volgens mij ook de betere

Gust · 25 aug 2009

Xavez zei:
Waarom gebruik je JavaScript? Dit kan perfect met CSS .

Het maakt zowel gebruik van css als van javascript.

Intussen werkt het, een tijdelijk voorbeeld kun je hier vinden

Maar nu zit ik met het volgend probleem. ik zou graag willen dat ie zich aanpast aan de hoogte van de pagina dmv % en niet dmv pixels. De links van Adrianhates hebben niet geholpen, het is veel ingewikkelder dan dat in dit geval. En ik krijg het maar niet voor elkaar.

@Adrianhates:
Ja, er was iets mis met de link. Dit is de juiste link.

Archief - verticaal image menu systeem

Gust

Legacy Member

Xavez

Legacy Member

adrianhates

Legacy Member

Fr3aK

Legacy Member

j design

Legacy Member

Gust

Legacy Member