Блог

Я создаю сайт с навигацией, выровненной по правому краю.

Последний выпадающий пункт меню завершает страницу, поскольку он расположен абсолютно слева от своего родительского элемента.

Я пытаюсь создать решение для своего меню ниже.

jsfiddle - http://jsfiddle.net/ashconnolly/6gjVr/

Я не могу жестко закодировать стиль pos left -xx, потому что ширина последнего пункта меню будет меняться (из-за текста внутри него), поэтому я использую js. Я почти взломал его, но мне просто нужно применить переменную в качестве абсолютного стиля позиции слева только при наведении курсора мыши. Возможно, есть лучшее решение только для css, но я не смог его найти.

Любая помощь приветствуется! : D

Редактировать: обновлено объяснение.

Вы уже вычислили левую часть вашего последнего меню, почему вы не использовали?

 $(document).ready(function () {
var menuitemwidth = document.getElementById("last-menu-item").offsetWidth;
var menuitemdropdownwidth = document.getElementById("last-menu-item-drop-down").offsetWidth;
//alert(menuitemwidth);
var leftval = menuitemdropdownwidth - menuitemwidth;
//alert(leftval);
    $("#last-menu-item").mouseenter(function(){
        $("#last-menu-item-drop-down").css({'position':'absolute','left':'-' leftval 'px','display':'block'});
    });
    $("#last-menu-item").mouseleave(function(){
        $("#last-menu-item-drop-down").css({'display':'none'});
    });

});
  

Проверьте здесь

Как вы, наверное, уже знаете, «печатать» значения javascript с использованием фреймворка — плохая практика. Это довольно скоро станет недоступным.

Но вы можете отделить логику (элемента) от представления (элемента), т. Е. Распечатать / отформатировать html-элементы в своих шаблонах, установив data-attribute подобное в вашем html:

 <ul id="last-menu-item-drop-down" data-pos="left" data-val="-133px">
  

Затем измените свой javascript на:

 // cache last element, no need to jquery search on every hover
var last_elem = $("#last-menu-item-drop-down");

// set position and alignment
last_elem.css('position','absolute').css(last_elem.data("pos"), last_elem.data("val"));

// set dropdown meny visibility to hidden (do it by css)
last_elem.hide()

// show/hide
// ...
  

Вы также можете выполнять вычисления смещения в javascript и указывать позицию только в своих шаблонах

Скрипка в: http://jsfiddle.net/cYsp6/7 /

Я не могу сделать с помощью css

 $("#last-menu-item").mouseenter(function(){
var a=-(parseInt($("#last-menu-item-drop-down").css('width'))-parseInt($("#last-menu-item").css('width')));
 $("#last-menu-item-drop-down").css('position','absolute').css('left',a);
 $("#last-menu-item-drop-down").show();
});
$("#last-menu-item").mouseleave(function(){
   $("#last-menu-item-drop-down").hide();
});
  

Обновленная скрипка:

Скрипка