Как сделать чтобы элементы меню не смещались вправо?

Тема в разделе "Верстка", создана пользователем verfaa, 31 мар 2012.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. verfaa

    verfaa

    Регистр.:
    29 янв 2007
    Сообщения:
    371
    Симпатии:
    41
    Как сделать чтобы элементы меню при наведении курсора на них не смещались вправо?

    Есть вот такая менюшка
    http://buyexclusivejewellery.com/menu.html

    Я решил её немного изменить и добавил рамку, которая появляется при наведении на ссылку и у активной ссылки, т.е. в
    "#nav .current a, #nav li:hover > a" добавил css код:
    Код:
    border: 2px solid #f17dc9;
    border-radius: 10px;
    

    в результате при наведении курсора на ссылки, меню начало "дергаться". Т.е. например если навести курсор на My Projects
    ссылки Multi-Levels About Contact Us смещаются на несколько пикселей вправо. Если навести курсор на About смещается Contact Us.
    Без рамки меню не дергается. Прошу показать, где поправить код, чтобы меню заработало нормально с рамками. И в чем причина такого
    странного поведения меню после того как я добавил рамку?
    Стили здесь: http://buyexclusivejewellery.com/css/style000.css
     
  2. latteo

    latteo Эффективное использование PHP, MySQL

    Moderator
    Регистр.:
    28 фев 2008
    Сообщения:
    1.403
    Симпатии:
    1.185
    Когда border: 2px элемент соответсвенно на 2px смещается. Добавь для элементов меню невидимый(цвет фона, например) бордер.
     
  3. AlterEgoRegis

    AlterEgoRegis Создатель

    Регистр.:
    3 авг 2011
    Сообщения:
    10
    Симпатии:
    7
    Добавь:
    #nav .current a, #nav li:hover > a {
    padding: 6px 18px;
    }
     
    verfaa нравится это.
  4. verfaa

    verfaa

    Регистр.:
    29 янв 2007
    Сообщения:
    371
    Симпатии:
    41
    Спасибо, получилось. Подскажите плиз как решить ещё одну проблему:
    Когда навожу курсор на Map или Site Tour выпадает вертикальное меню.
    При переводе курсора с Map на N.Design Studio или с Site Tour на Team
    вертикальное меню немного меняется в размерах и также "дрожит".
    Подскажите плиз как пофиксить этот момент.

    менюшка:
    http://buyexclusivejewellery.com/menu.html
    стили:
    http://buyexclusivejewellery.com/css/style000.css
     
  5. AlterEgoRegis

    AlterEgoRegis Создатель

    Регистр.:
    3 авг 2011
    Сообщения:
    10
    Симпатии:
    7
    Добавить в конец файла стилей:
    #nav ul li:hover a {
    padding: 8px 20px;
    }
     
    verfaa нравится это.
  6. verfaa

    verfaa

    Регистр.:
    29 янв 2007
    Сообщения:
    371
    Симпатии:
    41
    и ещё заметил, что при переходах по пунктам меню не меняется активная ссылка, т.е. как была HOME так и остается.
    В коде у неё <li class="current">, т.е. как я понимаю для каждой страницы нужно подставлять class="current" для текущей ссылки?
    А что делать, если меню подключается для всех страниц из одного и тогоже файла, через smarty {include file="templates/menu.tpl"}
    и для текущей страницы нет возможности подставить в ссылку в меню для неё class="current"?
    Можно решить ситуацию средствами html/css?
    Или можно написать условие для smarty, навроде {if page="index.php"}<li class="current">{else}</li>{/if} ? Как это сделать?
     
  7. verfaa

    verfaa

    Регистр.:
    29 янв 2007
    Сообщения:
    371
    Симпатии:
    41
    И ещё одна проблема обнаружилась! Если сделать активной ссылку с выпадающим подменю, например Site Tour, то это подменю
    сразу же меняет свой стиль, появляются рамки вокруг ссылок, можете сравнить с неактивным выпадающим меню у Map.
    Как исправить это? Please help!
     
  8. AlterEgoRegis

    AlterEgoRegis Создатель

    Регистр.:
    3 авг 2011
    Сообщения:
    10
    Симпатии:
    7
    Smarty не использовал, но наверное возможно.
    Средствами css можно создать стиль для псевдокласса :active, но ссылки будут выделяться только при переходе на страницу именно через них.
    #nav a:active {
    background: none repeat scroll 0 0 #E75B63;
    border: 2px solid #833E3E;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    color: #FFFFFF;
    padding: 6px 18px;
    }
    Можно ещё это реализовать с помощью javascript.
     
  9. AlterEgoRegis

    AlterEgoRegis Создатель

    Регистр.:
    3 авг 2011
    Сообщения:
    10
    Симпатии:
    7
    Рамки не замечаю, вижу только, что меню немного увеличивается по высоте при наведении.
    Я тут немного не тот стиль написал. Вместо:
    #nav ul li:hover a {
    padding: 8px 20px;
    }
    Надо:
    #nav li:hover ul a {
    padding: 8px 20px;
    }
     
    verfaa нравится это.
  10. verfaa

    verfaa

    Регистр.:
    29 янв 2007
    Сообщения:
    371
    Симпатии:
    41
    Попробовал на разных браузерах, в файрфоксе все правильно отображает, а в опере и IE с проблемой, в хроме не тестил, вот как она выглядит:

    [​IMG]