Как создать меню вертикальной навигации?

Question

Как создать меню вертикальной навигации?

0

Вот меню с использованием HTML и CSS. Элементы меню располагаются горизонтально, а подменю используют вертикальную компоновку. Как изменить пункты главного меню, чтобы они были выложены вертикально?

<ul>
  <li>
    <a>item1</a>
    <ul>
      <li><a>subitem1</a></li>
      <li><a>subitem1</a></li>
      <li><a>subitem1</a></li>
    </ul>
  </li>
</ul>

TDJSS 19 окт. 2013, в 07:55

Источник

0

Извините, проверьте эту страницу, пожалуйста, jsfiddle.net/DqvxR/190
TDJSS 19 окт. 2013, в 05:03
0

это не очень подходит для формата вопросов и ответов. В любом случае перейдите по этой ссылке и скопируйте cssdrive.com/index.php/menudesigns/category/C19 нужное меню
ankit 19 окт. 2013, в 05:10
1

Вы можете скачать предварительно разработанные меню из Google и изучить их, чтобы сделать свои собственные. Или используйте их. Одним из таких является: cssmenumaker.com
Umang Mehta 19 окт. 2013, в 05:14

Показать ещё 1 комментарий

Теги:

javascript

html

css

css3

1 ответ

Ещё вопросы

Извините, проверьте эту страницу, пожалуйста, jsfiddle.net/DqvxR/190
это не очень подходит для формата вопросов и ответов. В любом случае перейдите по этой ссылке и скопируйте cssdrive.com/index.php/menudesigns/category/C19 нужное меню
Вы можете скачать предварительно разработанные меню из Google и изучить их, чтобы сделать свои собственные. Или используйте их. Одним из таких является: cssmenumaker.com

user2021917 · Answer 1 · 2013-10-19T04-11-00.000Z

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

Проверьте этот скрипт ЩЕЛКНИТЕ ЗДЕСЬ

#menu
{
    width: 120px;/*change width*/
}
#menu li
{

    display: block; /*keep it block*/
    }
#menu ul
{

    top: 0; /*change this */
    left: 100%; /*change this */
}
#menu ul li:first-child > a:after
{
    content: '';
    position: absolute;
    left:-13px; /* change this*/
    top:7px; /* change this*/
    width: 0;
    height: 0;
    border: 5px solid transparent; /* change this*/
    /*border-right: 5px solid transparent;*/ /*don't need this*/
    border-right: 8px solid #444; /* change this*/
}

#menu ul li:first-child a:hover:after
{
    border-right-color: #04acec;  /* change this*/
}

Я написал в комментариях, что нужно изменить для достижения того, чего вы хотите. Вы можете манипулировать более