Как сделать вот такое меню

Статус
В этой теме нельзя размещать новые ответы.
UDAV

UDAV

Постоялец
Регистрация
22 Июн 2007
Сообщения
775
Реакции
153
Как сделать вот такое меню, где-то видел, но не помню где.
Для просмотра ссылки Войди или Зарегистрируйся
Вообщем при наведении на "Меню 1 2 3 4" меняется "Картинка".
 
Можно легко сделать при помощи одного лишь сss.
Должно быть примерно вот так:
PHP: 
<ul>
    <li><a href="#"><img src="image1.jpg" />Меню 1</a></li>
    <li><a href="#"><img src="image2.jpg" />Меню 2</a></li>
    <li><a href="#"><img src="image3.jpg" />Меню 3</a></li>
    <li><a href="#"><img src="image4.jpg" />Меню 4</a></li>
<ul>
Т.е. делаешь как бы обычное меню с картинками. Но изображения затем позиционируешь абсолютно, т.е. намного левей самого меню. В стилях прописываешь li a:hover img{display:block} и li a img{display:none}. В итоге изображения будут появляться лишь при наведении курсора на ссылку.
 
  • Нравится
Реакции: UDAV
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script language="JavaScript" type="text/javascript">
kartinka0 = 'http://www.nulled.cc/image.php?u=23801&dateline=1196369786';
kartinka1 = 'http://www.nulled.cc/nulled_v4/misc/skin/logo.png';
kartinka2 = 'http://www.google.ru/logos/galileo09.gif';
kartinka3 = 'http://www.google.com/options/icons/chrome.gif';
</script>

</head>
<body>
<table width="200" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="http://www.nulled.cc/image.php?u=23801&dateline=1196369786" name="kartinka" width="64" height="64" id="kartinka" /></td>
    <td>
    <p><a href="#" onmouseover="document.getElementById('kartinka').src=kartinka1;" onmouseout="document.getElementById('kartinka').src=kartinka0;">меню 1</a></p>
    <p><a href="#" onmouseover="document.getElementById('kartinka').src=kartinka2;" onmouseout="document.getElementById('kartinka').src=kartinka0;">меню 2</a></p>
    <p><a href="#" onmouseover="document.getElementById('kartinka').src=kartinka3;" onmouseout="document.getElementById('kartinka').src=kartinka0;">меню 3</a></p>
    </td>
  </tr>
</table>


</body>
</html>
 
  • Нравится
Реакции: UDAV
omfg написал(а):
Т.е. делаешь как бы обычное меню с картинками. Но изображения затем позиционируешь абсолютно, т.е. намного левей самого меню. В стилях прописываешь li a:hover img{display:block} и li a img{display:none}. В итоге изображения будут появляться лишь при наведении курсора на ссылку.
Нажмите для раскрытия...
Помоему через яваскрипт всё таки получше будет, хотя конечно зависит от нюансов
 
Flash Menu Labs Pro v2

Скачай программу Flash Menu Labs Pro v2 просто супер
оф сайт Для просмотра ссылки Войди или Зарегистрируйся

Добавлено через 4 минуты
Web Menu Studio Plus
... С помощью данного комплекта простых в использовании сервисных программ по созданию веб меню, вы сможете с легкостью разработать, составить дизайн и разместить сценарии веб меню для веб сайтов и веб проектов. ... Создавайте профессиональные веб меню по виду и стилю с помощью отмеченных наградами сервисными программами.


AllyNova Tree Menu
... Данная программа добавляет древовидное меню к вашему веб сайту для упрощения поиска различных элементов вашего веб сайта. ... Обычно, ваш веб сайт может иметь множество веб страниц, и вы можете составлять любые текстовые или графические ссылки для ваших посетителей для поиска этих страниц, но большинство пользователей не слишком терпеливы для поиска этих страниц.


Flash Vertical Menu
... Flash Vertical Menu для Dreaweaver – это простая, эффективная и удобная программа для добавления меню к вашему веб сайту, без JavaScript или Flash программирования. ... Если вы используете XML файл, вам не потребуется менять ссылки меню на каждой веб странице, достаточно поменять их один раз в XML файле. ... Добавляйте впечатляющие флэш меню на ваш веб сайт в несколько щелчков мышью.
 
реализовать такое меню можешь прописав для пунктов меню onmouseover и onmouseout
вот могу предложить такое готовое решение на примере рисунков

<table cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td><img name="main-70" src="/files/content/en-thailand-villa-19-2.jpg" width="365" height="278" alt="Thailand villa for your Thailand vacation" class="villa_image" /></td>
<td valign="middle" style="padding-left: 0px;">
<img name="main-70-1" width="119" height="90" src="/files/property/en-thailand-villa-19-2-1.thumb.jpg" class="villa_image" alt="Thailand villa for your Thailand vacation"
onmousemove="document.images['main-70-1'].style.cursor='Hand';"
onmouseover="document.images['main-70'].src='/files/property/en-thailand-villa-19-2-1.jpg';"
onmouseout="document.images['main-70'].src='/files/content/en-thailand-villa-19-2.jpg';" /><br />

<img name="main-70-2" width="119" height="90" src="/files/property/en-thailand-villa-19-2-2.thumb.jpg" class="villa_image" alt="Thailand villa for your Thailand vacation"
onmousemove="document.images['main-70-2'].style.cursor='Hand';"
onmouseover="document.images['main-70'].src='/files/property/en-thailand-villa-19-2-2.jpg';"
onmouseout="document.images['main-70'].src='/files/content/en-thailand-villa-19-2.jpg';" /><br />

<img name="main-70-3" width="119" height="90" src="/files/property/en-thailand-villa-19-2-3.thumb.jpg" class="villa_image" alt="Thailand villa for your Thailand vacation"
onmousemove="document.images['main-70-3'].style.cursor='Hand';"
onmouseover="document.images['main-70'].src='/files/property/en-thailand-villa-19-2-3.jpg';"
onmouseout="document.images['main-70'].src='/files/content/en-thailand-villa-19-2.jpg';" /><br />
</td>
</tr>
</table>
 
2 polyetilen polyetilen

подскажите плз как место картинки (в примете вот Для просмотра ссылки Войди или Зарегистрируйся)
вставить блок с текстом , который исчез бы после наведения на кнопки..хелп плиз !!!:ah:
 
HTML: 
<div class="test">
<img src="images/pic.gif" alt="" />
</div>

PHP: 
.test img {
visibility:visible;
}
.test:hover img {
visibility:hidden;
}

вот и вся арифметика
 
очень просто

etoja написал(а):
2 polyetilen polyetilen
подскажите плз как место картинки (в примете вот Для просмотра ссылки Войди или Зарегистрируйся)
вставить блок с текстом , который исчез бы после наведения на кнопки..хелп плиз !!!:ah:
Нажмите для раскрытия...

очень просто.. пишешь
Код: 
<div id="test"><img .... onmouseover="javascript.document.getElementById('test').innerHTML='TVOY TEXT'" ></div>
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху