Danke für die ausführliche Anleitung!
Hab mich sehr gefreut.
Doch leider scheint da irgendwie der Wurm drin zu sein. Funktioniert einfach nicht. Obwohl ich es genau 1:1 so gemacht habe wie beschrieben.
Dadurch, dass es sowieso nicht funktionierte habe ich den beigelegten CSS-Code NICHT mit kopiert, sondern stattdessen den Code genommen, der auch für mein Menu vorgesehen ist (Name: "Menu").
Selbstverständlich habe ich dann auch den Namen in der Java-Script-Datei auf "Menu" geändert. Original in der Beschreibung war der Name des Menus "Dropdown".
Aber wie gesagt, auch wenn ich es 1:1 so mache wie beschrieben, klappt es nicht.
In der CSS wird ja sowieso nur das Design angegeben. Der eigentliche Effekt spielt sich doch in der Java-Script-Datei ab. Um diese Datei geht es ja eigentlich hauptsächlich.
Hier sind alle 3 Codes, vielleicht könntest mal kurz drüber gehen und mir sagen, ob Dir was auffällt.. Dankeschön!
html (Code in der posting_editor.html):
Code: Alles auswählen
<script type="text/javascript">
// <![CDATA[
onload_functions.push('apply_onkeypress_event()');
// ]]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2"></script>
<script type="text/javascript" language="javascript" src="/jquery.dropdown.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</script>
<div id="menu">
<ul>
<li class="topmenu">
<a href="">Smilies aufklappen</a>
<ul>
<li class="submenu">
<!-- IF S_SMILIES_ALLOWED and .smiley -->
<!-- BEGIN smiley -->
<a href="#" onclick="insert_text('{smiley.A_SMILEY_CODE}', true); return false;"><img src="{smiley.SMILEY_IMG}" width="{smiley.SMILEY_WIDTH}" height="{smiley.SMILEY_HEIGHT}" alt="{smiley.SMILEY_CODE}" title="{smiley.SMILEY_DESC}" /></a>
<!-- END smiley -->
<!-- ENDIF -->
<!-- IF S_SHOW_SMILEY_LINK and S_SMILIES_ALLOWED-->
<br /><a href="{U_MORE_SMILIES}" onclick="popup(this.href, 300, 350, '_phpbbsmilies'); return false;">{L_MORE_SMILIES}</a>
<!-- ENDIF -->
</li>
</ul>
</div>
CSS in der colours.css:
Code: Alles auswählen
#menu {
font-size:9px;
position:static;
}
#menu ul {
list-style-type:none;
list-style-image:none;
margin:0px;
padding:0px;
}
#menu li.topmenu {
float:left;
}
.topmenu a {
float:left;
width:170px;
text-align:center;
}
.topmenu ul{
display:none;
}
.topmenu a, .submenu a{
padding:1px 5px;
border:1px solid #008bed;
border-collapse:collapse;
font-weight:bold;
text-decoration:none;
background-color:transparent;
margin:0;
}
.submenu a{
font-size:9px;
width:170px;
position:static;
clear:both; /* special IE6 */
}
#menu a:hover, .topmenu.on a {
color:#000000;
background-color:#99d4f3 !important;
}
.topmenu:hover ul {
display:block;
z-index:500;
}
und die Java-Script-Datei. Hier habe ich einfach das "dropdown" gegen "menu" ausgetauscht:
Code: Alles auswählen
var maxHeight = 400;
$(function(){
$(".menu > li").hover(function() {
var $container = $(this),
$list = $container.find("ul"),
$anchor = $container.find("a"),
height = $list.height() * 1.1, // make sure there is enough room at the bottom
multiplier = height / maxHeight; // needs to move faster if list is taller
// need to save height here so it can revert on mouseout
$container.data("origHeight", $container.height());
// so it can retain it's rollover color all the while the dropdown is open
$anchor.addClass("hover");
// make sure dropdown appears directly below parent list item
$list
.show()
.css({
paddingTop: $container.data("origHeight")
});
// don't do any animation if list shorter than max
if (multiplier > 1) {
$container
.css({
height: maxHeight,
overflow: "hidden"
})
.mousemove(function(e) {
var offset = $container.offset();
var relativeY = ((e.pageY - offset.top) * multiplier) - ($container.data("origHeight") * multiplier);
if (relativeY > $container.data("origHeight")) {
$list.css("top", -relativeY + $container.data("origHeight"));
};
});
}
}, function() {
var $el = $(this);
// put things back to normal
$el
.height($(this).data("origHeight"))
.find("ul")
.css({ top: 0 })
.hide()
.end()
.find("a")
.removeClass("hover");
});
// Add down arrow only to menu items with submenus
$(".menu > li:has('ul')").each(function() {
$(this).find("a:first").append("<img src='images/down-arrow.png' />");
});
});
