I'd like to add to all level 1 li($hc,1) something like
Code: Select all
<li class="docs" onMouseOver="nav(this);"><a href="/Svasti/?Start" >Start</a>
Code: Select all
<li class="docs" onMouseOver="nav(this);"><a href="/Svasti/?Start" >Start</a>
You don't have to attach an event handler in the HTML, but instead you can attach it via JS (I usually prefer that anyway). The technique is like:svasti wrote:I guess it has to be done in function render() and I have to add kind of xli($hc,1).
Code: Select all
var lis = document.querySelectorAll(".mymenu > li");
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function () {
nav(this);
};
}
If you put it before the menu is emitted it will fail, because no `.menu > li` can be found (see also http://pointedears.de/scripts/faq/cljs/ ... oreDefined). You could put it in an event handler for the load event of window or the DOMContentLoaded event of document, but that raises the issue, that IE 8 doesn't support addEventListener(), and the fallback attachEvent() doesn't set `this` as expected (besides that DOMContentLoaded is not supported by IE 8, IIRC). Just put it at the bottom of the body -- it's well placed there.svasti wrote:It works, when I put this code at the bottom of the html, but not when I put it in the head. I guess so kind of onload must precede?
One could do this without any client side scripting, though. The :first-child and :last-child pseudo selectors come in handy here (if they are supported). You probably know this, but there might be readers who don't.svasti wrote:Finally the drop down menu on the first item opens to the right and the one on the last item to the left
Indeed, that likely requires JS (CMIIW, please).svasti wrote:and with long menus in small screen it is adapting accordingly
Code: Select all
<script type="text/javascript">
var lis = document.querySelectorAll(".menulevel1 > li");
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function () {
nav(this);
};
}
function nav(el) {
var data = el.getBoundingClientRect();
var left = data.left;
var right = document.documentElement.clientWidth - data.right;
if (left > right) {
document.getElementById("nav").className = "b";
}
if (left <= right) {
document.getElementById("nav").className = "a";
}
}
</script>
Code: Select all
<script type="text/javascript">
(function () {
var lis = document.querySelectorAll(".menulevel1 > li");
// ...
}());
</script>
Code: Select all
<script type="text/javascript">
(function () {
var lis = document.querySelectorAll(".menulevel1 > li");
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function () {
var data = this.getBoundingClientRect();
var left = data.left;
var right = document.documentElement.clientWidth - data.right;
var cl = "a";
if (left > right) cl = "b";
if(this.className.indexOf("sdocs") != -1) this.className = "sdocs " + cl;
else this.className = cl;
}
}
}());
</script>