[dan_23]

Hallo Forum,

ich bin auf der Suche nach einem Dropdown mit einem Aufbau wie auf der Seite von createordie ... wär weis wie das dort realisiert wurde ? vlt irgendwelche anhaltspunkte bzw. links wie ich voran komme ?

grüße

[hemfrie]

Hallo,

das Menü an sich existiert bereits im Quelltext. Also die Submenü Listen sind standardmäßig ausgeblendet und werden dann bei mouseover eingeblendet.

Als Javascript Framework wurde MooTools - home verwendet.

Das zuständige Skript für die Navigation findest unter

http://create......../it/codv2/scripts/js/combine.js (ab Zeile 680)

[dan_23]

Hallo,

ok danke erstmal für den Tipp, habs jetzt versucht "nachzubauen"

<ul id="nav_main" >
<li><a class="" title="" href="">Startseite</a></li>
<li><a class="" title="" href="">Test</a></li>
<ul class="submenu" id="">
<li><span>neuster Test</span></li>
<ul>
<li><a href="#">Text 1</a></li>
<li><a href="#">Text 2</a></li>
</ul>
<li><span>Lorem Ipsum</span></li>
<ul>
<li><a href="#">Text 2.2</a></li>
<li><a href="#">Text 3</a></li>
</ul>
<li class=""><a href="">zum Inhalt</a></li>
</ul>
</ul>

JavaScript einbindung im Header ...

<script type="text/javascript" src="../data/js/combine.js"></script>
<script type="text/javascript" src="../data/js/mootools.js"></script>

CSS

ul#nav_main { background-color: #000000; margin: 0px 20px 0px 20px; height: 27px; padding: 0px; z-index: 12; width: 897px; position: absolute;}

ul#nav_main li { line-height: 1.2em; display: block; height: 27px; float: left; margin: 0px; border-right: 1px solid #FFF;}

ul#nav_main li a,
ul#nav_main li strong { color: #FFFFFF; font-weight: normal; display: block; padding: 6px 13px 7px 13px; margin: 0px;}

ul#nav_main li a:focus,
ul#nav_main li a:hover,
ul#nav_main li a:active  { color: #00ffe3; text-decoration: none; }

ul#nav_main li#current { background: transparent }

ul#nav_main li#current strong,
ul#nav_main li#current a,
ul#nav_main li#current a:focus,
ul#nav_main li#current a:hover,
ul#nav_main li#current a:active { color: #4D87C7; font-weight: bold }

ul#nav_main ul.submenu { position: absolute; background: #000000; display: block; z-index: 99; padding: 20px 20px 0 20px; width: 238px; top: 28px; left: 0px;}
ul#nav_main ul.submenu { display: none; opacity: 0.0;	filter:alpha(opacity=00); }
ul#nav_main ul li { display: block; float: none; padding: 0px; margin: 0px; height: auto; color: #00FFDE; border: 0px; font-size: 14px;	font-weight: bold; list-style-type:none;}
ul#nav_main ul li span {  display: block; margin-bottom: 8px; }
ul#nav_main ul li.archiv { border-top: 2px solid #fff; border-bottom: 1px solid #000000; margin: 0 -20px 0 -20px; text-align: left; padding: 0px; }
ul#nav_main ul li.archiv a { font-size: 13px; color: #00FFDE; font-weight: normal; text-align: center; }
ul#nav_main ul ul { margin: 0 0 14px 0; padding: 0px; }
ul#nav_main ul ul li { display: block; float: none; padding: 2px; margin: 0px; height: auto; color: #fff; font-size: 13px; font-weight: normal; line-height: 18px; margin-bottom:4px; }
ul#nav_main ul ul li a { display: inline; padding: 0px; height: auto;}

Angezeigt wird rein garnichts - woran liegt das ?
die li elemente sind nicht sichtbar ... laut skript wird es erst eingeblendet wenn mouseover ist ...


Grüße

[dan_23]

hier noch das js

    var slideInSpeed = 50;
    var slideOutSpeed = 50;
	var divID = 'nav_main';
    var navOpacity = 0.85;

    var lastOpenedItem = false;     
	var el = $(divID).getElements('a[class$=menu_item]')
	var index=0;
    var divPosition = $('nav_main').getPosition().x;
        
    for (var i=0;i<=el.length-1;i++)	
					{
                        
						var element = el[i];
						
						$(element).addEvent('mouseover', function(){            
                        var visElement = this.getProperty('title').toLowerCase();
                        var submenuPosition = (this.getPosition().x) - divPosition;
                        
                            if($(visElement + '_content')) {
                          
                                $(visElement + '_content').setStyles({ left: (submenuPosition - 6) + 'px', display: 'block'});
                                $(visElement + '_content').effect('opacity', {duration: slideInSpeed, transition: Fx.Transitions.linear}).start(0.0,navOpacity);
    
                                $(visElement + '_content').addEvent('mouseleave', function(){                              		                                       
                                    	$(visElement + '_content').effect('opacity', {duration: slideOutSpeed, transition: Fx.Transitions.linear}).start(navOpacity,0.0);
                                        lastOpenedItem = false;
                                });	
                               
                            }
                            
                            if((!lastOpenedItem) && ($(visElement + '_content'))) {
                                    lastOpenedItem = visElement + '_content';
                            } else {
                                    if($(lastOpenedItem)) { $(lastOpenedItem).effect('opacity', {duration: slideOutSpeed, transition: Fx.Transitions.linear}).start(navOpacity,0.0) }; 
                                    if($(visElement + '_content')) { lastOpenedItem = visElement + '_content'; } else { lastOpenedItem = false; } 
                            }
                            
                                                        
						}); 
                        
					}
     
    $('header').addEvent('mouseover', function(){
        if(lastOpenedItem) {                                       	
    		$(lastOpenedItem).effect('opacity', {duration: slideOutSpeed, transition: Fx.Transitions.linear}).start(navOpacity,0.0); 
    		lastOpenedItem = false;
        }
    });
    
    $('col3_content').addEvent('mouseover', function(){
        if(lastOpenedItem) {                                       	
    		$(lastOpenedItem).effect('opacity', {duration: slideOutSpeed, transition: Fx.Transitions.linear}).start(navOpacity,0.0); 
    		lastOpenedItem = false;
        }
    });