Перейти к содержанию
СофтФорум - всё о компьютерах и не только

Выпадающее меню

lga74

Автор lga74
в Веб-строительство

 Поделиться

Рекомендуемые сообщения

lga74

lga74

Опубликовано
Опубликовано

Подскажите, пожалуйста. Мне необходимо, чтобы выпадающее меню находилось всегда в окне страницы (при открытии подменю лекции и лаб.работы). Что изменить в коде?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<link href ="my.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="menu">

<ul class="menu">

<li><a href="#">Лекции</a>

<ul class="submenu">

<li><a href="#">Лекция №1</a></li>

<li><a href="#">Лекция №2</a></li>

<li><a href="#">Лекция №3</a></li>

</ul>

</li>

<li><a href="#">Лабораторные работы</a>

<ul class="submenu">

<li><a href="#">Лабораторная работа№1</a></li>

<li><a href="#">Лабораторная работа№2</li>

<li><a href="#">Лабораторная работа№3</a></li>

</ul>

</li>

<li><a href="#">Справка</a></li>

<li><a href="#"> Литература</a></li>

</ul>

</div>

</body>

</html>

Ссылка на комментарий
Поделиться на другие сайты
lga74

lga74

Опубликовано
  • Автор
Опубликовано

Забыла указать css:

/* CSS Document */

#menu {

height: 43px;

behavior: url(csshover.htc);

background: #9ea8b2 url(images/mbg.gif) repeat-x;

}

#menu ul, li {

margin: 0px;

padding: 0px;

}

ul.menu {

float: left;

}

#menu ul.menu li {

margin: 0px;

float: left;

width: 200px;

height: 30px;

display: block;

padding-top: 13px;

text-align: center;

}

#menu ul.menu li:hover {

background: #5e717f url(images/mbgh.gif) repeat-x;

}

#menu ul.menu li:hover ul.submenu {

display: block;

-margin-top: 30px;

-margin-left: -141px;

}

#menu ul.menu li ul.submenu {

display: none;

margin-top: 13px;

position: absolute;

background: #bcc4ce;

}

#menu ul.menu li ul.submenu li {

float: none;

display: block;

}

#menu ul.menu ul.submenu li:hover {

background: #9ca6b0;

}

#menu ul li a {

color: #fff;

font-size: 14px;

text-decoration: none;

}

#menu ul li a:hover {color: #ecd661;}

#menu ul.submenu li a {

color: #4f5458;

font-size: 14px;

text-decoration: none;}

#menu ul.submenu li a:hover {

color: #152535;

}

Ссылка на комментарий
Поделиться на другие сайты
Teddy_Bear

Teddy_Bear

Опубликовано
Опубликовано (изменено)

my.css должен иметь вид, например такой:

ul {margin: 0;padding: 0;list-style: none;width: 150px;}ul li {position: relative;border: 1px solid ;padding:10px;}*+html ul li { float: left; }*+html ul li { width: 100%; }li ul {position: absolute;left: 149px;top: 0px;display: none;width: 100px;}ul li a {display: block;}ul li a:hover {display: block;}li:hover ul {display: block;}

Упс! Твой вариант у меня работает. В чем проблема?

У тебя не IE? Может неприятно глючить.

Изменено пользователем Teddy_Bear
Ссылка на комментарий
Поделиться на другие сайты
lga74

lga74

Опубликовано
  • Автор
Опубликовано (изменено)

И у меня работает. Проблема в том, что мне необходимо зафиксировать меню. Перемещаюсь на страницу лекции, а где меню....?оно на главной осталось :bye1:

Изменено пользователем lga74
Ссылка на комментарий
Поделиться на другие сайты
Teddy_Bear

Teddy_Bear

Опубликовано
Опубликовано (изменено)

Дык, копируешь на каждую страницу ... Ручной привод, а что поделать.

Только hover в старых IE неадекват.

Ну и надо что-нибудь более продвинутое пользовать для лучшего эффекта ex: Joomla.

Изменено пользователем Teddy_Bear
  • Upvote 1
Ссылка на комментарий
Поделиться на другие сайты
lga74

lga74

Опубликовано
  • Автор
Опубликовано

Я так и думала, не хотела просто верить. :g: Нашла программку для создания навигационных панелей "123 Flash Menu". Ты в ней случайно не работал, с виду очень простенькая, но есть вопросы.

Ссылка на комментарий
Поделиться на другие сайты
Teddy_Bear

Teddy_Bear

Опубликовано
Опубликовано

Нашла программку для создания навигационных панелей "123 Flash Menu".

Я и говорю, надо что-то более навороченное. Нет не работал и даже не знаю. Их очень много.

Фреймы раньше пользовали - очень удобно. Но, увы, признано неудачным ввиду того, что поисковики правят интернетом. По поиску можно выскочить на кусок сайта - отдельный фрейм.

Короче, время простых решений прошло. Если сайтостроение для тебя - это серьезно, то осваивай что-нибудь более продвинутое, чем рукопашный дизайн в блокноте.

Ссылка на комментарий
Поделиться на другие сайты
lga74

lga74

Опубликовано
  • Автор
Опубликовано

Я работаю над электронным учебником для использования на локальном ПК. Просто раньше сильно не напрягалась: главная страница - содержание, а дальше ссылки на нужный html- документ. Или использовала для формирования содержания программы для компиляции (Например: htm2chm. Подобных много в Интернете, что-то вроде справки получается). А теперь с выпадающем меню хочу, пока простенький. Спасибо за совет, по Joomla у меня есть материал, можно покопаться. :ok3:

Ссылка на комментарий
Поделиться на другие сайты
Robotnik

Robotnik

Опубликовано
Опубликовано

123 Flash Menu должна работать по принципу самого Flash. А нельзя использовать Java? Вроде он позволяет делать простые элементы управления без всех остальных замарочек.

Ссылка на комментарий
Поделиться на другие сайты
lga74

lga74

Опубликовано
  • Автор
Опубликовано

123 Flash Menu - не совсем получилось, т.к. её можно открыть только 25 раз (по крайней мере в моей версии так). За 25 раз я успела, но появились какие-то глюки в виде сообщений.

Java - можно попробовать.

Ссылка на комментарий
Поделиться на другие сайты
Teddy_Bear

Teddy_Bear

Опубликовано
Опубликовано (изменено)

Я работаю над электронным учебником для использования на локальном ПК.

Вот что значит конкретная постановка задачи. Если сайтик не будет выкладываться в интернет (проблемы с поисковыми машинами), то лучше использовать фреймы. Вот например:

http://www.site-do.ru/html/html12.php

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

И не теряется ручное управление и нет идиотизма копипаста.

Изменено пользователем Teddy_Bear
Ссылка на комментарий
Поделиться на другие сайты
lga74

lga74

Опубликовано
  • Автор
Опубликовано

Вот что значит конкретная постановка задачи. Если сайтик не будет выкладываться в интернет (проблемы с поисковыми машинами), то лучше использовать фреймы. Вот например:

http://www.site-do.ru/html/html12.php

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

И не теряется ручное управление и нет идиотизма копипаста.

Ссылка на комментарий
Поделиться на другие сайты
lga74

lga74

Опубликовано
  • Автор
Опубликовано (изменено)

А я думала, что фреймы лучше не использовать (так меня учили в видиоуроках). Посмотрела ссылку, благодарю за участие!!! :rolleyes: :rolleyes: :rolleyes:, шапка мне не обязательно, можно сразу "менюху" вставлять, дальше текст страницы.

Неплохой здесь сайт, много полезного нахожу..... Ты с Java работаешь, а по поводу Joomla в курсе? Мне знаний явно не хватает на серьезные вещи. "Долбусь" с HTML-меню (выпадающим), надеюсь доделать "учебничек...." в ближайшие дни. Надо быстро закончить. Нашла много материала по Joomla,(там видеоуроки и т.д.). Закончу пока так (на всякий случай, дабы успеть в срок), а потом начну изучать, может успею потом переделать......

Изменено пользователем lga74
Ссылка на комментарий
Поделиться на другие сайты
Teddy_Bear

Teddy_Bear

Опубликовано
Опубликовано (изменено)

... Joomla ...

Учебник (для локального применения) можно на фреймах доделать.

А к Joomla (в большом интернете) советую Denver - среда удобная для отладки. Можно легко локально установить сервер Apache (хорошо разжевано и автоматизировано) и прямо на своем ПК отлаживать.

Но придется месяц - другой поизучать. Зато потом в интернете будешь профи.

В Joomla библиотеки серьезные и уровень хороший в том числе по безопасности. (А желающих попортить сайты, увы, много.) К тому же не налетишь на нелицензионность.

Изменено пользователем Teddy_Bear
Ссылка на комментарий
Поделиться на другие сайты
  • Yezhishe закрыл тема
Гость
Эта тема закрыта для публикации ответов.
 Поделиться
Перейти к списку тем

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...