Hallo, Gast! (Registrieren)

Wir wünschen allen Besuchern frohe und besinnliche Weihnachten!

Letzte Ankündigung: MyBB 1.8.38 veröffentlicht (30.04.24)


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
Java-Script? - Für DropDown-Menü
#11
(15.02.2012, 18:09)Mutant schrieb: Im headerinclude template gibt es aber auch keine <head></head> tags? Oo

Sorry, ich kenn mich nicht so aus, deswegen bin ich entweder blöd oder
ich versteh das nur falsch. Big Grin
Klar gibt es da keine, weil die Tags im entsprechenden Haupt-Template für eine Seite gesetzt wird (z.B. portal). Aber das Template headerinclude wird auf jeder Seite aufgerufen und in den Head-Bereich eingefügt. Deshalb kannst du es dort einfügen. Falls du jedoch nur auf einer Seite den JS-Code willst, musst du das entsprechende Haupt-Template raussuchen.
Zitieren
#12
Ne, ich will das schon auf jeder Seite haben.

Ist das so richtig eingefügt?

PHP-Code:
<link rel="alternate" type="application/rss+xml" title="{$lang->latest_threads} (RSS 2.0)" href="{$mybb->settings['bburl']}/syndication.php" />
<
link rel="alternate" type="application/atom+xml" title="{$lang->latest_threads} (Atom 1.0)" href="{$mybb->settings['bburl']}/syndication.php?type=atom1.0" />
<
meta http-equiv="Content-Type" content="text/html; charset={$charset}/>
<
meta http-equiv="Content-Script-Type" content="text/javascript" />
<
script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/prototype.js?ver=1400"></script>
<
script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/general.js?ver=1400"></script>
<
script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/popup_menu.js?ver=1400"></script>
{
$stylesheets}
<
link rel="stylesheet" href="{$theme['imgdir']}/font-face.css" />
<!--[if 
IE 7]>
<
link rel="stylesheet" href="{$theme['imgdir']}/ie-fixes.css" />
<![endif]-->
<
script type="text/javascript">
<!--
    var 
cookieDomain "{$mybb->settings['cookiedomain']}";
    var 
cookiePath "{$mybb->settings['cookiepath']}";
    var 
cookiePrefix "{$mybb->settings['cookieprefix']}";
    var 
deleteevent_confirm "{$lang->deleteevent_confirm}";
    var 
removeattach_confirm "{$lang->removeattach_confirm}";
    var 
loading_text '{$lang->ajax_loading}';
    var 
saving_changes '{$lang->saving_changes}';
    var 
use_xmlhttprequest "{$mybb->settings['use_xmlhttprequest']}";
    var 
my_post_key "{$mybb->post_code}";
    var 
imagepath "{$theme['imgdir']}";
// -->
</script>
<
script type="text/javascript" src="jscripts/thx.js"></script>{$newpmmsg}
<!-- 
dieses javascript wird benötigt damit diese dropdownmenü im IE funktioniert -->
<
script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
    var 
sfEls document.getElementById("nav").getElementsByTagName("LI");
    for (var 
i=0i<sfEls.lengthi++) {
        
sfEls[i].onmouseover=function() {
            
this.className+=" sfhover";
        }
        
sfEls[i].onmouseout=function() {
            
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}
if (
window.attachEventwindow.attachEvent("onload"sfHover);

//--><!]]></script> 
Zitieren
#13
Einfach Testen. Kann auch vorkommen das sich soviel JScripts miteinander nicht vertragen, so wars zumindest bei mir.
Zitieren
#14
Ein modernes Dropdown-Menü kann man auch mit CSS3 realisieren.

http://www.red-team-design.com/css3-dropdown-menu
Zitieren
#15
Hier gibts auch einige gute.

http://www.dynamicdrive.com/style/
Zitieren
#16
Danke für die Links.
Das was du gepostet hast, Falkenauge, wird das auch richtig
im Internet Explorer angezeigt? Also funktioniert das genauso gut
wie im Firefox dann?

Edit//
Sehe grade, was du gepostet hast Falkenauge, braucht man auch ein
Javscript, damit es im Internet Explorer richtig angezeigt wird & funktioniert.

Genau das Probleme habe ich ja auch jetzt bei meinem jetzigen Menü.
Im Firefox funktioniert alles, nur beim Internet Explorer nicht.
Deswegen brauche ich ja das Javascript, aber irgendwie funktioniert das nicht.
Zitieren
#17
Ich habs mit FF neuste Version + neuste vom IE getestet. Funzt alles beides. Andere Browser hab ich nicht installiert.
Hier ist der Quellcode der Demopage.

Code:
<!DOCTYPE html>

<html>
<head>
    <title>CSS3 dropdown menu</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
        $(function() {
          if ($.browser.msie && $.browser.version.substr(0,1)<7)
          {
            $('li').has('ul').mouseover(function(){
                $(this).children('ul').show();
                }).mouseout(function(){
                $(this).children('ul').hide();
                })
          }
        });        
    </script>
    
<style>
body
{
    width: 960px;
    margin: 40px auto;
}

/* Main menu */

#menu
{
    width: 100%;
    margin: 0;
    padding: 10px 0 0 0;
    list-style: none;  
    background: #111;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));    
    background: -webkit-linear-gradient(#444, #111);    
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-border-radius: 50px;
    border-radius: 50px;
    -moz-box-shadow: 0 2px 1px #9c9c9c;
    -webkit-box-shadow: 0 2px 1px #9c9c9c;
    box-shadow: 0 2px 1px #9c9c9c;
}

#menu li
{
    float: left;
    padding: 0 0 10px 0;
    position: relative;
    line-height: 0;
}

#menu a
{
    float: left;
    height: 25px;
    padding: 0 25px;
    color: #999;
    text-transform: uppercase;
    font: bold 12px/25px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
}

#menu li:hover > a
{
    color: #fafafa;
}

*html #menu li a:hover /* IE6 */
{
    color: #fafafa;
}

#menu li:hover > ul
{
    display: block;
}

/* Sub-menu */

#menu ul
{
    list-style: none;
    margin: 0;
    padding: 0;    
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;    
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);    
    background: -o-linear-gradient(#444, #111);    
    background: -ms-linear-gradient(#444, #111);    
    background: linear-gradient(#444, #111);
    -moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
    -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
    box-shadow: 0 0 2px rgba(255,255,255,.5);    
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#menu ul ul
{
  top: 0;
  left: 150px;
}

#menu ul li
{
    float: none;
    margin: 0;
    padding: 0;
    display: block;  
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child
{  
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;    
}

#menu ul a
{    
    padding: 10px;
    height: 10px;
    width: 130px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

*html #menu ul a /* IE6 */
{    
    height: 10px;
}

*:first-child+html #menu ul a /* IE7 */
{    
    height: 10px;
}

#menu ul a:hover
{
    background: #0186ba;
    background: -moz-linear-gradient(#04acec,  #0186ba);    
    background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
    background: -webkit-linear-gradient(#04acec,  #0186ba);
    background: -o-linear-gradient(#04acec,  #0186ba);
    background: -ms-linear-gradient(#04acec,  #0186ba);
    background: linear-gradient(#04acec,  #0186ba);
}

#menu ul li:first-child > a
{
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

#menu ul li:first-child > a:after
{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul ul li:first-child a:after
{
    left: -8px;
    top: 12px;
    width: 0;
    height: 0;
    border-left: 0;    
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    border-right: 8px solid #444;
}

#menu ul li:first-child a:hover:after
{
    border-bottom-color: #04acec;
}

#menu ul ul li:first-child a:hover:after
{
    border-right-color: #04acec;
    border-bottom-color: transparent;     
}


#menu ul li:last-child > a
{
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

/* Clear floated elements */
#menu:after
{
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style>

<!-- AdPacks -->
<style>
#adpacks-wrapper{font-family: Arial, Helvetica;width:280px;position: fixed;_position:absolute;bottom: 0;right: 20px;z-index: 9999;background: #eaeaea;padding: 10px;-moz-box-shadow: 0 0 15px #444;-webkit-box-shadow: 0 0 15px #444;box-shadow: 0 0 15px #444;}
body .adpacks{background:#fff;padding:15px;margin:15px 0 0;border:3px solid #eee;}
body .one .bsa_it_ad{background:transparent;border:none;font-family:inherit;padding:0;margin:0;}
body .one .bsa_it_ad .bsa_it_i{display:block;padding:0;float:left;margin:0 10px 0 0;}
body .one .bsa_it_ad .bsa_it_i img{padding:0;border:none;}
body .one .bsa_it_ad .bsa_it_t{padding: 0 0 6px 0; font-size: 11px;}
body .one .bsa_it_p{display:none;}
body #bsap_aplink,body #bsap_aplink:hover{display:block;font-size:9px;margin: -15px 0 0 0;text-align:right;}
body .one .bsa_it_ad .bsa_it_d{font-size: 11px;}
body .one{overflow: hidden}
</style>

</head>
<body>
    
<ul id="menu">
    <li><a href="http://www.red-team-design.com/">Home</a></li>
    <li>
        <a href="#">Categories</a>
        <ul>

            <li>
                <a href="#">CSS</a>
                <ul>
                    <li><a href="#">Item 11</a></li>
                    <li><a href="#">Item 12</a></li>
                    <li><a href="#">Item 13</a></li>
                    <li><a href="#">Item 14</a></li>

                </ul>                
            </li>
            <li>
                <a href="#">Graphic design</a>
                <ul>
                    <li><a href="#">Item 21</a></li>
                    <li><a href="#">Item 22</a></li>
                    <li><a href="#">Item 23</a></li>

                    <li><a href="#">Item 24</a></li>
                </ul>                
            </li>
            <li>
                <a href="#">Development tools</a>
                <ul>
                    <li><a href="#">Item 31</a></li>
                    <li><a href="#">Item 32</a></li>

                    <li><a href="#">Item 33</a></li>
                    <li><a href="#">Item 34</a></li>
                </ul>                
            </li>
            <li>
                <a href="#">Web design</a>                
                <ul>
                    <li><a href="#">Item 41</a></li>

                    <li><a href="#">Item 42</a></li>
                    <li><a href="#">Item 43</a></li>
                    <li><a href="#">Item 44</a></li>
                </ul>    
            </li>
        </ul>
    </li>
    <li>

        <a href="#">Work</a>
        <ul>
            <li>
                <a href="#">Work 1</a>
                <ul>
                    <li>
                        <a href="#">Work 11</a>        
                        <ul>

                            <li>
                                <a href="#">Work 111</a>                        
                            </li>
                            <li>
                                <a href="#">Work 112</a>
                            </li>
                            <li>
                                <a href="#">Work 113</a>

                            </li>
                        </ul>                            
                    </li>
                    <li>
                        <a href="#">Work 12</a>
                        <ul>
                            <li>
                                <a href="#">Work 121</a>                        
                            </li>

                            <li>
                                <a href="#">Work 122</a>
                            </li>
                            <li>
                                <a href="#">Work 123</a>
                            </li>
                        </ul>                            
                    </li>

                    <li>
                        <a href="#">Work 13</a>
                        <ul>
                            <li>
                                <a href="#">Work 131</a>                        
                            </li>
                            <li>
                                <a href="#">Work 132</a>

                            </li>
                            <li>
                                <a href="#">Work 133</a>
                            </li>
                        </ul>                            
                    </li>
                </ul>                    
            </li>
            <li>

                <a href="#">Work 2</a>
                <ul>
                    <li>
                        <a href="#">Work 21</a>
                        <ul>
                            <li>
                                <a href="#">Work 211</a>                        
                            </li>

                            <li>
                                <a href="#">Work 212</a>
                            </li>
                            <li>
                                <a href="#">Work 213</a>
                            </li>
                        </ul>                            
                    </li>

                    <li>
                        <a href="#">Work 22</a>
                        <ul>
                            <li>
                                <a href="#">Work 221</a>                        
                            </li>
                            <li>
                                <a href="#">Work 222</a>

                            </li>
                            <li>
                                <a href="#">Work 223</a>
                            </li>
                        </ul>                            
                    </li>
                    <li>
                        <a href="#">Work 23</a>

                        <ul>
                            <li>
                                <a href="#">Work 231</a>                        
                            </li>
                            <li>
                                <a href="#">Work 232</a>
                            </li>
                            <li>

                                <a href="#">Work 233</a>
                            </li>
                        </ul>                            
                    </li>
                </ul>                    
            </li>
            <li>
                <a href="#">Work 3</a>
                <ul>

                    <li>
                        <a href="#">Work 31</a>
                        <ul>
                            <li>
                                <a href="#">Work 311</a>                        
                            </li>
                            <li>
                                <a href="#">Work 312</a>

                            </li>
                            <li>
                                <a href="#">Work 313</a>
                            </li>
                        </ul>                            
                    </li>
                    <li>
                        <a href="#">Work 32</a>

                        <ul>
                            <li>
                                <a href="#">Work 321</a>                        
                            </li>
                            <li>
                                <a href="#">Work 322</a>
                            </li>
                            <li>

                                <a href="#">Work 323</a>
                            </li>
                        </ul>                            
                    </li>
                    <li>
                        <a href="#">Work 33</a>
                        <ul>
                            <li>

                                <a href="#">Work 331</a>                        
                            </li>
                            <li>
                                <a href="#">Work 332</a>
                            </li>
                            <li>
                                <a href="#">Work 333</a>
                            </li>

                        </ul>                            
                    </li>
                </ul>                    
            </li>
        </ul>        
    </li>
    <li>
        <a href="#">About</a>    
    </li>
    <li>

        <a href="#">Contact</a>    
    </li>
</ul>

<br><br><br>
<a href="http://www.red-team-design.com/css3-dropdown-menu">CSS3 dropdown menu</a> brought to you by <a href="http://www.red-team-design.com/">RedTeamDesign</a>

<!-- AdPacks.com Ad Code -->
<script type="text/javascript">
(function(){
  var bsa = document.createElement('script');
     bsa.type = 'text/javascript';
     bsa.async = true;
     bsa.src = '//s3.buysellads.com/ac/bsa.js';
  (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
})();
</script>
<!-- End AdPacks.com Ad Code -->

<div id="adpacks-wrapper">
    <div id="bsap_1257097" class="bsarocks bsap_a5f348233fceef06ba365ab392938d10"></div>
    <a href="http://adpacks.com" id="bsap_aplink">via Ad Packs</a>
</div>

</body>
</html>

Eine JS ist dabei. Sollte aber kein prob sein.
Zitieren
#18
Also ich habe ein CSS3 Dropdown Menü, das im IE kein JS braucht. Vielleicht finde ich noch den Link.

edit: http://webdesignerwall.com/tutorials/css3-dropdown-menu
Zitieren
#19
Und hier ist zu diesem Menu von Falkenauge Mihawk der Online Generator ^^.

http://www.cssportal.com/css3-menu-generator/
Zitieren
#20
Danke Smile

Werde das bei Gelegenheit bei mir ins Forum einbauen.

Zitieren


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Menü unter Willkommen Menü ändern mps 2 1.128 26.09.2022, 11:46
Letzter Beitrag: mps
  Dropdown-Menü in der Navigation EliteForum 1 1.373 16.04.2019, 14:02
Letzter Beitrag: [ExiTuS]
  Dropdown-Menü einfügen Newbie 9 3.189 03.03.2019, 13:48
Letzter Beitrag: Newbie
  Dropdown Menü für welcomblock Vespa 2 1.942 29.10.2017, 12:25
Letzter Beitrag: Vespa
  [geteilt] Dropdown Menü hkkp 33 9.547 15.05.2014, 22:40
Letzter Beitrag: Jockl