Блог

Главная - Вопросы по программированию - Сложное меню css

Сложное меню css

#css

Вопрос:

У меня есть меню:

 <div class="headerMenu">
    <ul>
        <li><a href="#">Home <span>Home Page<span></a></li>
        <li><a href="#">About <span>About My Website<span></a></li>
        <li><a href="#">Contact <span>Get in touch<span></a></a></li>
    </ul>
</div>

Мой текущий CSS выглядит следующим образом:

 .headerMenu{
    width: 100%;
}

.headerMenu ul{
    margin: 0; 
    padding: 0;
    float: left;
}

.headerMenu ul li{
    display: inline;
}

.headerMenu ul li a{
    float: left;
    color: white;
    padding-top:25px;
    padding-left:50px;
    font-size:24pt;
}

.headerMenu ul li a:visited{
    color: white;
}

.headerMenu ul li a:hover, .menu ul li .current{
    color: #fff;
    background: url(../../Content/Images/menu-selector.png) repeat-x; /* 25x10 arrow/*
}

А теперь перейдем к вопросу:

  1. Как я могу сделать так, чтобы содержимое тега span находилось ниже основного текста.
  2. Когда я наведу курсор на anchor изображение , как добавить изображение при наведении, как показано на снимке экрана

Макет, который я создал в Photoshop, выглядит так:

введите описание изображения здесь

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

Ответ №1:

1) Как я могу сделать так, чтобы содержимое тега span находилось ниже основного текста.

Вам нужно использовать display: block на span , чтобы он появился в новой строке:

 .headerMenu ul li a span {
  display: block;
}

2) Когда я наведу курсор на якорь, как добавить изображение при наведении, как показано на снимке экрана

Попробуйте расположить стрелку по центру вверху. Это может сработать:

 .headerMenu ul li a:hover, .menu ul li .current {
  color: #fff;
  background: url(../../Content/Images/menu-selector.png) no-repeat center top;
  display:block;
  /* also make sure that you use display block with correct height
   so that you can positionate the arrow on the correct place... */
}

Комментарии:

1. Я все равно не могу решить эту проблему с помощью правильного CSS, потому что у меня нет фоновых изображений. И если он хочет учиться, гораздо лучше, если он попытается решить эту проблему сам, а не кто-то, кто даст ему полное решение имо.

2. это работает как шарм, мне просто нужно было изменить display:block стиль в классе li:hover

3. Смотрите ответ Джейсона, который включает в себя демонстрацию скрипки.

4. @Джаред, да, это так. Но это решение не является полным, как вы можете видеть на панели результатов скрипки. Или, может быть, я что-то упускаю? Я действительно верю, что скрипка хороша в ситуациях, когда вы действительно показываете рабочую демонстрацию. Но в моем случае этот код не работал бы в демо-версии. Но это может натолкнуть его на некоторые идеи…

Ответ №2:

Добавьте следующий код для проблемы 1:

 .headerMenu ul li a span {
    display: block;
}

Это <span> позволяет отображать элемент уровня блока, поэтому по умолчанию он занимает всю ширину родительского контейнера.

Для проблемы 2 существует несколько способов сделать это. Однако мое предложение состояло бы в том, чтобы добавить массив в псевдокласс <li> и использовать :hover его. Примечание: это будет работать только в IE для 7 .

 .menu ul li:hover{
    background: url(../../Content/Images/menu-selector.png) repeat-x;
}

Увидеть это в действии — http://jsfiddle.net/kxqx8/1/ (Я изменил цвета, чтобы помочь отображению)

Метки: