Как создать дерево меню с помощью HTML

Мне нужно создать дерево меню с помощью HTML. У меня был поиск в Google, но они предоставляют некоторое программное обеспечение для загрузки, чтобы создать это. Но мне нужны некоторые скрипты и HTML-теги для этого. Может кто поможет мне решить эту проблему. Спасибо заранее.

9
html javascript jquery

8 ответов

вот что очень просто для начала.

http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

редактировать

реализация того, что я узнал от @sushil bharwani. Вот как я нашел вышеуказанный URL, т. е. любезно предоставленный @sushil bharwani http://www.google.co.in/search?q=Menu + дерево + использование+UL+L&qscrl=1

8

вы не нужно использовать JavaScript (если вы не хотите совместимости с устаревшими браузерами), вы можете достичь этого только с помощью HTML+CSS. И в гораздо более семантически-правильный путь. :)

можно сделать вертикальное выпадающее меню или (более красивый пример) горизонтальное меню использование методов, описанных в Сыны моллюсков статья в HTMLDog.
Простой и многозначительный.

пример

вот простой пример. В нем вы можете увидеть функциональность наведения работает отлично.

CSS не хорош, потому что это только образец.
Чтобы работать над стилем, отключите display: none; line: это остановит подменю от скрытия, когда он не завис, и вы можете работать над стилизацией всего.
Когда вы закончите, просто повторно включите display: none; line, чтобы скрыть подменю и показывать только на парить.

HTML-код

<nav>
<p>Collapsing:</p>
<ul class="collapsable">
    <li>a<ul>
        <li>a1
        <li>a2
        </ul>
    <li>b<ul>
        <li>b1
        </ul>
</ul>
<p>Not collapsing:</p>
<ul>
    <li>a<ul>
        <li>a1
        <li>a2
        </ul>
    <li>b<ul>
        <li>b1
        </ul>
</ul>
</nav>

в CSS

nav li:hover {
    background: #EEEEEE;
}
nav li>ul {
    display: inline-block;
    margin: 0;
    padding: 0;
}
nav .collapsable li>ul {
    display: none;
}
nav li>ul::before {
    content: ": { ";
}
nav li>ul::after {
    content: " } ";
}
nav li:hover>ul {
    display: inline-block;
}
nav li>ul>li {
    display: inline-block;
}
nav li>ul>li+li::before {
    content: ", ";
}

вот jsfiddle:http://jsfiddle.net/x8dxv/

3

с немного javascript и знаний вокруг CSS вы можете преобразовать простой список UL LI в дерево меню. его право, что вы можете использовать jQuery, если вы это понимаете.

вы можете сузить поиск google по дереву меню с помощью UL Li. или CSS для преобразования UL LI в дерево.

2

меню навигации в основном создаются с использованием комбинации UL и LI.

<UL id="Menu">
    <LI>Home</LI>
    <LI>Links</LI>
</UL>

и вы можете вставить UL внутри элемента LI и, таким образом, получить древовидную структуру для навигации.

0

вот простой способ сделать это, если вы не хотите писать его самостоятельно..

http://www.mycssmenu.com/#css-menu-demo

0

возможно, вам захочется заглянуть в некоторые онлайн-инструменты, которые создают меню для вас. Е. Г. генератор меню CSS

0

вы можете использовать JavaScript для создания меню - например, посмотрите на плагин в jQuery - меню.

0

Я не уверен, что вы найдете свой ответ, но вот список с несколькими различными типами вертикальных меню http://css.maxdesign.com.au/listamatic2/index.htm в этих примерах нет javascript

0