Меню навигации - идеи? - PullRequest
Новая
       15

Меню навигации - идеи?

0 голосов
/ 11 июля 2009

В настоящее время я учу себя создавать веб-сайты - этот конкретный сайт предназначен для моего бизнеса. Для этого я использую Dreamweaver CS3.

Мне нужна помощь с горизонтальным меню навигации, которое я пытаюсь создать. На моем веб-сайте есть три основные категории, каждая из которых имеет свое маленькое изображение для их представления. Я хочу, чтобы все три изображения располагались рядом под логотипом моей компании в качестве навигационного меню.

Так, например, один раздел - Алкоголь. Когда пользователь наводит указатель мыши на изображение «алкоголь», под ним открывается меню, в котором отображаются подразделы, например, спиртные напитки, пиво и т. Д.

После некоторых исследований я не могу определиться с лучшим способом сделать это. Изучая Dreamweaver, я наткнулся на Spry Menus, который, я думал, сработает. Но теперь я также узнал о всплывающих меню в Fireworks CS3 (которые у меня также есть в наличии).

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

Спасибо.

Ответы [ 4 ]

0 голосов
/ 13 июля 2009

Дайте http://www.alistapart.com/ попробовать. Замечательная страница с множеством хороших учебников. http://www.alistapart.com/articles/horizdropdowns/, например, показывает, как использовать список и CSS для построения горизонтального меню. Может быть, хорошая отправная точка для вашего проекта.

Dreamweaver действительно хороший инструмент для получения быстрых результатов. Но если вы заинтересованы в изучении реализации сайтов, то лучше запачкать руки. Возьмите, например, учебные пособия http://www.w3schools.com/ и хороший редактор на ваш выбор, и создайте свой веб-сайт или интересный проект с нуля. В долгосрочной перспективе эти инвестиции окупятся.

0 голосов
/ 11 июля 2009

Я бы предпочел изучать меню CSS, а не создавать их с помощью Dreamweaver. Вы можете попробовать этот .

0 голосов
/ 12 июля 2009

Я бы выучил чистые меню CSS, а затем для более продвинутой функциональности использовал бы плагины jQuery, такие как Superfish

Сайт, с которого я впервые узнал CSS-меню, был CSSplay . Этот же парень также имеет более новый сайт, предназначенный только для CSS-меню .

Я бы сказал, что, хотя исходный код некоторых из них многому вас научит, но в конечном итоге я бы рекомендовал использовать Superfish или какой-либо другой плагин jQuery для более удобных меню, особенно для задержки MouseOut. Отсутствие задержки мыши может сделать большинство CSS-меню совершенно непригодными для использования.

0 голосов
/ 11 июля 2009

Во-первых, не используйте фрагменты, встроенные в Dreamweaver. Они ужасны.

Используйте JavaScript, может быть, даже JS Framework, как jQuery. Он предлагает функцию toggle () для такого рода ситуаций.

Как правило, вы должны применять функцию JS для наведения мыши на изображение. Эта функция показывает или скрывает div (ваш выпадающий список). Вы можете добиться этого, установив параметр css display: none (скрытый) или display: block (видимый).

Пример отображения div: 

<a href="#" onmouseover="show("menu-1")" onmouseout="hide("menu-1")">My menu 1</a>

<div id="menu-1">
    <ul>
        <li>Alcohol</li>
        <li>Spirit</li>
    </ul>
</div>

И немного JavaScript: 

function show(myid)
{
    document.getElementById(myid).style.display = "block";
}

function hide(myid)
{
    document.getElementById(myid).style.display = "none";
}

Я сделал это в спешке, так что это не идеально.

...