X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> MM_menu
Cyanide
Cyanide
Topic Starter сообщение 28.7.2010, 7:41; Ответить: Cyanide
Сообщение #1


Здравствуйте.

Возникла такая задачка с исполнением меню:

Раздел "контакты" выполнен в виде слоёв. Из-за криво сделанной работы эти слои в различных браузерах отображаются по разному, и нередко это достаточно криво. Было принято решение переделать слои в страницы, которые будут открываться через меню.

Объясню суть:

сайт www.svetlas.ru, меню выпадает из пунктов "Устройства" и "Техническая информация". При нажатии на пункт "Контакты", открывается страница со слоями "Производители" "Представители" "Дилеры" "Чёрный список".

Я подготовил отдельно обычные страницы "Производители" "Представители" "Дилеры" "Чёрный список". И попытался реализовать выпадение меню при наведении мыши на рисунок "Контакты", путём добавления команды onmouseover="MM_showMenu(window.mm_menu......... Но к сожалению не смог это осуществить.

Ниже приведён два экземпляра скрипта меню. До и После, а также кусок кода, в котором обрабатывается процесс работы с изображениями меню:


Меню "до":

function mmLoadMenus() {
if (window.mm_menu_0912121823_0) return;
window.mm_menu_0912121823_0 = new Menu("root",362,20,"Verdana, Arial, Helvetica, sans-serif",14,"#990000","#FFFFFF","#FFFFFF","#000000","left","middle",3,0,600,-5,7,true,true,true,10,true,true);
mm_menu_0912121823_0.addMenuItem("Вид и модели","location='../vidmodel.htm'");
mm_menu_0912121823_0.addMenuItem("УПРУ-ДРЛ","location='../drl.htm'");
mm_menu_0912121823_0.addMenuItem("УПРУ-ДНаТ","location='../dnat.htm'");
mm_menu_0912121823_0.addMenuItem("Схемы управления светильниками с УПРУ","location='../upravlenie.htm'");
mm_menu_0912121823_0.addMenuItem("Демонстрация работы УПРУ","location='../stend.htm'");
mm_menu_0912121823_0.addMenuItem("Критерии выбора источников света","location='../kriterii.htm'");
mm_menu_0912121823_0.addMenuItem("Каталог выпускаемых устройств","location='../catalog.htm'");
mm_menu_0912121823_0.addMenuItem("Другие технологии в освещении","location='../el-pru.htm'");
mm_menu_0912121823_0.fontWeight="bold";
mm_menu_0912121823_0.hideOnMouseOut=true;
mm_menu_0912121823_0.bgColor='#000000';
mm_menu_0912121823_0.menuBorder=1;
mm_menu_0912121823_0.menuLiteBgColor='#000000';
mm_menu_0912121823_0.menuBorderBgColor='#000000';
window.mm_menu_0912155523_0 = new Menu("root",400,20,"Verdana, Arial, Helvetica, sans-serif",14,"#990000","#FFFFFF","#FFFFFF","#000000","left","middle",3,0,600,-5,7,true,true,true,10,true,true);
mm_menu_0912155523_0.addMenuItem("Устройства и принципы их работы","location='../products.htm'");
mm_menu_0912155523_0.addMenuItem("Уменьшаемые устройствами потери","location='../princip.htm'");
mm_menu_0912155523_0.addMenuItem("Сертификаты","location='../sertif.htm'");
mm_menu_0912155523_0.addMenuItem("Экологическая безопасность","location='../eco.htm'");
mm_menu_0912155523_0.addMenuItem("Рекомендуемые к эксплуатации с УПРУ лампы","location='../lamps.htm'");
mm_menu_0912155523_0.fontWeight="bold";
mm_menu_0912155523_0.hideOnMouseOut=true;
mm_menu_0912155523_0.bgColor='#000000';
mm_menu_0912155523_0.menuBorder=1;
mm_menu_0912155523_0.menuLiteBgColor='#000000';
mm_menu_0912155523_0.menuBorderBgColor='#000000';
mm_menu_0912155523_0.writeMenus();
} // mmLoadMenus()


Меню "после":

function mmLoadMenus() {
if (window.mm_menu_0912121823_0) return;
window.mm_menu_0912121823_0 = new Menu("root",362,20,"Verdana, Arial, Helvetica, sans-serif",14,"#990000","#FFFFFF","#FFFFFF","#000000","left","middle",3,0,600,-5,7,true,true,true,10,true,true);
mm_menu_0912121823_0.addMenuItem("Вид и модели","location='../vidmodel.htm'");
mm_menu_0912121823_0.addMenuItem("УПРУ-ДРЛ","location='../drl.htm'");
mm_menu_0912121823_0.addMenuItem("УПРУ-ДНаТ","location='../dnat.htm'");
mm_menu_0912121823_0.addMenuItem("Схемы управления светильниками с УПРУ","location='../upravlenie.htm'");
mm_menu_0912121823_0.addMenuItem("Демонстрация работы УПРУ","location='../stend.htm'");
mm_menu_0912121823_0.addMenuItem("Критерии выбора источников света","location='../kriterii.htm'");
mm_menu_0912121823_0.addMenuItem("Каталог выпускаемых устройств","location='../catalog.htm'");
mm_menu_0912121823_0.addMenuItem("Другие технологии в освещении","location='../el-pru.htm'");
mm_menu_0912121823_0.fontWeight="bold";
mm_menu_0912121823_0.hideOnMouseOut=true;
mm_menu_0912121823_0.bgColor='#000000';
mm_menu_0912121823_0.menuBorder=1;
mm_menu_0912121823_0.menuLiteBgColor='#000000';
mm_menu_0912121823_0.menuBorderBgColor='#000000';
if (window.mm_menu_0912155523_0) return;
window.mm_menu_0912155523_0 = new Menu("root",400,20,"Verdana, Arial, Helvetica, sans-serif",14,"#990000","#FFFFFF","#FFFFFF","#000000","left","middle",3,0,600,-5,7,true,true,true,10,true,true);
mm_menu_0912155523_0.addMenuItem("Устройства и принципы их работы","location='../products.htm'");
mm_menu_0912155523_0.addMenuItem("Уменьшаемые устройствами потери","location='../princip.htm'");
mm_menu_0912155523_0.addMenuItem("Сертификаты","location='../sertif.htm'");
mm_menu_0912155523_0.addMenuItem("Экологическая безопасность","location='../eco.htm'");
mm_menu_0912155523_0.addMenuItem("Рекомендуемые к эксплуатации с УПРУ лампы","location='../lamps.htm'");
mm_menu_0912155523_0.fontWeight="bold";
mm_menu_0912155523_0.hideOnMouseOut=true;
mm_menu_0912155523_0.bgColor='#000000';
mm_menu_0912155523_0.menuBorder=1;
mm_menu_0912155523_0.menuLiteBgColor='#000000';
mm_menu_0912155523_0.menuBorderBgColor='#000000';
mm_menu_0912155523_0.writeMenus();
window.mm_menu_0912189223_0 = new Menu("root",438,20,"Verdana, Arial, Helvetica, sans-serif",14,"#990000","#FFFFFF","#FFFFFF","#000000","left","middle",3,0,600,-5,7,true,true,true,10,true,true);
mm_menu_0912189223_0.addMenuItem("con1","location='../con1.htm'");
mm_menu_0912189223_0.addMenuItem("con2","location='../con2.htm'");
mm_menu_0912189223_0.addMenuItem("con3","location='../con3.htm'");
mm_menu_0912189223_0.addMenuItem("con4","location='../con4.htm'");
mm_menu_0912189223.fontWeight="bold";
mm_menu_0912189223_0.hideOnMouseOut=true;
mm_menu_0912189223_0.bgColor='#000000';
mm_menu_0912189223_0.menuBorder=1;
mm_menu_0912189223_0.menuLiteBgColor='#000000';
mm_menu_0912189223_0.menuBorderBgColor='#000000';
mm_menu_0912189223_0.writeMenus();
} // mmLoadMenus()

//добавленная самостоятельно часть

Часть кода, работающего с изображениями меню:

<td width="195" valign="top" background="indexx.files/fon7.jpg"><img src="indexx.files/bf2.gif" width="195" height="38" /><br />
<img src="indexx.files/menustart.gif" width="195" height="11" /><br />
<img src="indexx.files/menupreactive.gif" width="62" height="32" /><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','indexx.files/mprod_ov.gif',1)"><img src="indexx.files/mprod.gif" alt="Наша продукция" name="Image7" width="133" height="32" border="0" id="Image7" onmouseover="MM_showMenu(window.mm_menu_0912155523_0,133,0,null,'Image7')" onmouseout="MM_startTimeout();" /></a><br />
<img src="indexx.files/menupre.gif" width="62" height="32" /><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','indexx.files/teh_inf_ov.gif',1)"><img src="indexx.files/teh_inf.gif" alt="Техническая информация" name="Image5" width="133" height="32" border="0" id="Image5" onmouseover="MM_showMenu(window.mm_menu_0912121823_0,130,15,null,'Image5')" onmouseout="MM_startTimeout();" /></a><br />
<img src="indexx.files/menupre.gif" width="62" height="32" /><a href="faq.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','indexx.files/mfaq_ov.gif',1)"><img src="indexx.files/mfaq.gif" alt="Экономика" name="Image13" width="133" height="32" border="0" id="Image13" /></a><br />
<img src="indexx.files/menupre.gif" width="62" height="32" /><a href="price.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image131','','indexx.files/mpric_ov.gif',1)"><img src="indexx.files/mpric.gif" alt="Прайс-лист" name="Image131" width="133" height="32" border="0" id="Image131" /></a><br />
<img src="indexx.files/menupre.gif" width="62" height="32" /><a href="contacts.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','indexx.files/mcont_ov.gif',1)"><img src="indexx.files/mcont.gif" alt="Наши контакты" name="Image9" width="133" height="32" border="0" id="Image9" onmouseover="MM_showMenu(window.mm_menu_0912189223_0,130,15,null,'Image5')" onmouseout="MM_startTimeout();" /></a><br />
<img src="indexx.files/1280012277.gif" alt="Фон" width="195" height="45" /><br /> </td>

//выделенное - это кнопка "Контакты", к которой добавился код

Подскажите пожалуйста, где ошибка, и как исправляется. По возможности разъясните для понимания.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
locky-yotu
locky-yotu
сообщение 28.7.2010, 8:32; Ответить: locky-yotu
Сообщение #2


Cyanide, это же меню, сделанное в Дриме, да? Это **здец, Дрим такие вещи поганит только так)
Вам нужно что, выпадающее меню? Это элементарно.
<style type="text/css">
#menu {list-style:none}
#menu ul {display:none;position:absolute;left:0;margin:0;padding:0}
#menu li {display:block;position:relative;float:left;margin:0 10px}
#menu li li {display:block}
</style>

<script type="text/javascript">
var menu = function() {
var nav = document.getElementById('menu');
var li = nav.getElementsByTagName('li');
for (var i=0;i<li.length;i++) {
if (li[i].getElementsByTagName('ul')[0]) {
li[i].onmouseover = function () {
this.getElementsByTagName('ul')[0].style.display = 'block';
}
li[i].onmouseout = function () {
this.getElementsByTagName('ul')[0].style.display = 'none';
}
}
}
}
</script>

<ul id="menu">
<li><a href="#">Главная</a></li>
<li><a href="#">Устройства</a></li>
<li><a href="#">Контакты</a>
<ul>
<li><a href="#">Производители</a></li>
<li><a href="#">Представители</a></li>
<li><a href="#">Дилеры</a></li>
<li><a href="#">Черный список</a></li>
</ul>
</li>
<li><a href="#">Еще пункт</a></li>
</ul>

<script type="text/javascript">var ex = new menu()</script>

Это самый простой голый JavaScript, можно сделать просто на CSS, можно с эффектами на JS, можно использовать jQuery. Все будет лучше, чем это нелепое нагромождение кода, которое сейчас у вас.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Cyanide
Cyanide
Topic Starter сообщение 28.7.2010, 10:06; Ответить: Cyanide
Сообщение #3


(locky-yotun @ 28.7.2010, 11:32) *
Cyanide, это же меню, сделанное в Дриме, да? Это **здец, Дрим такие вещи поганит только так)
Вам нужно что, выпадающее меню? Это элементарно.
<style type="text/css">
#menu {list-style:none}
#menu ul {display:none;position:absolute;left:0;margin:0;padding:0}
#menu li {display:block;position:relative;float:left;margin:0 10px}
#menu li li {display:block}
</style>

<script type="text/javascript">
var menu = function() {
var nav = document.getElementById('menu');
var li = nav.getElementsByTagName('li');
for (var i=0;i<li.length;i++) {
if (li[i].getElementsByTagName('ul')[0]) {
li[i].onmouseover = function () {
this.getElementsByTagName('ul')[0].style.display = 'block';
}
li[i].onmouseout = function () {
this.getElementsByTagName('ul')[0].style.display = 'none';
}
}
}
}
</script>

<ul id="menu">
<li><a href="#">Главная</a></li>
<li><a href="#">Устройства</a></li>
<li><a href="#">Контакты</a>
<ul>
<li><a href="#">Производители</a></li>
<li><a href="#">Представители</a></li>
<li><a href="#">Дилеры</a></li>
<li><a href="#">Черный список</a></li>
</ul>
</li>
<li><a href="#">Еще пункт</a></li>
</ul>

<script type="text/javascript">var ex = new menu()</script>
Это самый простой голый JavaScript, можно сделать просто на CSS, можно с эффектами на JS, можно использовать jQuery. Все будет лучше, чем это нелепое нагромождение кода, которое сейчас у вас.


Если честно - сделано это в DW, или просто написано кем-то я не знаю. Этот сайт попал ко мне в руки примерно пол года назад, и мной переделывались только тексты, и некоторые элементы (изображения, схемы, таблицы). В объектно-ориентированном программировании я не силён, но насколько мне успели разъяснить на других форумах - вёрстка сайта просто ужасная. Но суть в том, что внешний вид меню, дизайн менять нельзя. Необходимо только изменить содержание. Если есть возможность по имеющимся данным это сделать - то прошу помочь. Если нет, то спасибо за совет, но переделывать структуру сайта я буду только после того, как решу первоочередные задачи.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
locky-yotu
locky-yotu
сообщение 28.7.2010, 10:15; Ответить: locky-yotu
Сообщение #4


Так я и дал совет, простейший скрипт. Структуру переделывать не надо. Или что не понятно-то?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Cyanide
Cyanide
Topic Starter сообщение 28.7.2010, 10:36; Ответить: Cyanide
Сообщение #5


(locky-yotun @ 28.7.2010, 13:15) *
Так я и дал совет, простейший скрипт. Структуру переделывать не надо. Или что не понятно-то?

Каким образом исправить допущенные ошибки, чтобы заработали все три выпадающих меню: "Устройства", "Техническая информация" и "Контакты"?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Cyanide
Cyanide
Topic Starter сообщение 25.11.2010, 13:11; Ответить: Cyanide
Сообщение #6


В общем методом научного тыка, и использования заклинания "О Великий Гугл помоги", сайт был полностью переделан с чистого листа. Верстка - табличная. Прошу строго не судить - первый сайт при первоначальном полном отсутствии знаний.

www.svetlas.ru

Само собой ещё будет доделываться до окончательного варианта.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Letmetouchyou
Letmetouchyou
сообщение 25.11.2010, 13:26; Ответить: Letmetouchyou
Сообщение #7


Cyanide, для первого сайта вполне хорошо.

Сделай более приятное меню и убери у таблиц border='1'

И добавь еше <!doctype>

а со стороны юзабительности, те пункты меняю, на которые наводишь и выпадает еше одно меню - должны быть тоже кликабельные.
=)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Cyanide
Cyanide
Topic Starter сообщение 25.11.2010, 15:36; Ответить: Cyanide
Сообщение #8


doctype добавил, косяки исчезли. Спасибо.

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

Границы таблиц и ячеек на некоторых страницах было решено оставить сознательно, и по согласованию с начальством. Хотя в будущем скорее всего изменю на что-нибудь более приятное глазу.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Letmetouchyou
Letmetouchyou
сообщение 26.11.2010, 3:45; Ответить: Letmetouchyou
Сообщение #9


Cyanide, #dbdbdb сделай бекгроунд меню
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Cyanide
Cyanide
Topic Starter сообщение 26.11.2010, 15:47; Ответить: Cyanide
Сообщение #10


Применил указанный цвет, но к сожалению шеф не одобрил. Пришлось оставить прежний темный. Пусть так и остается.

Но теперь обращаюсь с советом. Какие шрифты и как правильно применить к сайту. Стандартные смотрятся немного похабно. Хочется поставить более гладкие, и в то же время чтобы тексты оставались читабельными.

Заранее спасибо.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 20.4.2024, 15:33

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet