Помощь в верстке

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем rafeev, 18 июл 2013.

  1. rafeev

    rafeev

    Регистрация:
    3 июн 2013
    Сообщения:
    18
    Симпатии:
    1
    Попал мне в руки вот такой момент при верстке шаблона (см. скрин). И никак не могу придумать, как сверстать этот момент, точно так же как в макете (оставить все скругления и скрытие бекраунда под элементом списка при наведении).
    Други-подруги, подскажите, как решить задачу или у кого какие мысли в голове по этому поводу. Больше интересует сама идея, чем техническое исполнение.

    p.s. менюшка должна быть списком.

    [​IMG]
     
  2. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    559
    Тут нет ничего сложного. Для верхенего блока задаем тень, которая будет дублироваться по всему верхнему блоку внизу. Для пункта меню при .active ставим стили:
    Код:
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow:inset 0px -3px 5px rgba(0, 0, 0, 0.75);
    -moz-box-shadow:inset	0px -3px 5px rgba(0, 0, 0, 0.75);
    box-shadow:inset		 0px -3px 5px rgba(0, 0, 0, 0.75);
    padding:0 10px;
    line-height:30px;
    
    Чтобы тень блока скрывалась, нужно немного увеличить нижний отступ для пунктам меню при .acitve.
    Все.
     
  3. rafeev

    rafeev

    Регистрация:
    3 июн 2013
    Сообщения:
    18
    Симпатии:
    1
    Алекс, смотри, фишка в том, что "Главная" это активный пункт, а у остальных (неактивных и без наведения) присутствует бекграунд - дак вот, у меня дилема как его спрятать при наведении и осавить бордер-радиус как в верхней части так и внижней части (причем внижней части он в прринципе в другую сторону сторону обраще)... не знаю даж как спросить внятно =\

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

     
  4. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    559
    Я тебе ответил :Smile:
    Создай вот такую структуру:
    <div id="top">
    <div id="topmenu">
    </div>
    </div>
    Для #top укажи фон и нижнюю тень. В данном случаи тень будет всегда. Когда же пункт меню становится активным. Дай ему больше нижнего отступа, чтобы он перекрыл тень. Вот и все.
     
    rafeev нравится это.
  5. rafeev

    rafeev

    Регистрация:
    3 июн 2013
    Сообщения:
    18
    Симпатии:
    1
    ок, благодарю! )

    ладно, буду вникать... отпишусь как будет результат