zorro77786
Гость
|
|
« : 10-07-2009 09:02 » |
|
Не получается, чтобы при щелчке по определенной картинке пункта меню joomla она заменялась на другую, причем для каждого пункта разную. И оставалась такой до щелчка по другому пункту. Может в скрипте дело. Вот то что имею. sfHover = function() { var sfEls = document.getElementById("ja-cssmenu").getElementsByTagName("li"); for (var i=0; i<sfEls.length; ++i) { sfEls[i].onmouseover=function() { clearTimeout(this.timer); if(this.className.indexOf("sfhover") == -1) this.className+="sfhover"; } sfEls[i].onmouseout=function() { this.timer = setTimeout(sfHoverOut.bind(this), 20); } } }
function sfHoverOut() { clearTimeout(this.timer); this.className=this.className.replace(new RegExp("sfhover\\b"), ""); }
if (window.attachEvent) window.attachEvent("onload", sfHover); css /* STYLING THE MENU -----------------------------------*/ /* 1st level */ #ja-cssmenu li a { display: block; text-decoration: none; font-size: 80%; color: #395467; padding: 60px 20px; font-weight: bold; text-transform: uppercase; } .menu-item0{ background: url(../../images/company.jpg) no-repeat center bottom;
}
.menu-item1{ background: url(../../images/production.jpg) no-repeat center bottom;
} .menu-item2{ background: url(../../images/news.jpg) no-repeat center bottom; } .menu-item3{ background: url(../../images/partners.jpg) no-repeat center bottom; } .menu-item4{ background: url(../../images/publications.jpg) no-repeat center bottom; } .menu-item5{ background: url(../../images/questions.jpg) no-repeat center bottom; } .menu-item6{ background: url(../../images/contacts.jpg) no-repeat center bottom; } #ja-cssmenu li a:hover, #ja-cssmenu li a:active, #ja-cssmenu li a:focus { color: #395467; }
#ja-cssmenu li:hover a, #ja-cssmenu li.sfhover a, #ja-cssmenu li.havechildsfhover a, #ja-cssmenu li.havechild-activesfhover a { background: url(../../images/mainnav-active.gif) no-repeat center ; color: #FFFFFF; }
#ja-cssmenu li a.active, #ja-cssmenu li a.active:hover, #ja-cssmenu li a.active:active, #ja-cssmenu li a.active:focus { background: url(../../images/mainnav-active.gif) no-repeat center ; color: #FFFFFF; }
|
|
|
Записан
|
|
|
|
RXL
Технический
Администратор
Offline
Пол:
|
|
« Ответ #1 : 10-07-2009 09:19 » |
|
zorro77786, думаю, что нужно учитывать тот факт, что CSS-классы в className разделяются пробелами.
|
|
|
Записан
|
... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
|
|
|
Sla
|
|
« Ответ #2 : 10-07-2009 09:27 » |
|
zorro77786, а ты представляешь что ты делаешь в скрипте?
|
|
|
Записан
|
Мы все учились понемногу... Чему-нибудь и как-нибудь.
|
|
|
zorro77786
Гость
|
|
« Ответ #3 : 10-07-2009 10:33 » |
|
zorro77786, думаю, что нужно учитывать тот факт, что CSS-классы в className разделяются пробелами.
А на что это влияет? zorro77786, а ты представляешь что ты делаешь в скрипте?
Не совсем. Только начал осваивать, а задача срочная. Вот и обратился к профи.
|
|
|
Записан
|
|
|
|
Sla
|
|
« Ответ #4 : 10-07-2009 10:56 » |
|
1. ты привел совсем не тот код, который нужен (мне так кажется) 2. покажи html код меню
|
|
|
Записан
|
Мы все учились понемногу... Чему-нибудь и как-нибудь.
|
|
|
zorro77786
Гость
|
|
« Ответ #5 : 10-07-2009 11:06 » |
|
</div> <ul id="ja-cssmenu" class="clearfix"> <li class="havechild active"><a href="http://art19/" class="menu-item0 active first-item" id="menu1" title="О компании"><span class="menu-title">О компании</span></a><ul><li ><a href="/index.php?option=com_content&view=article&id=27&Itemid=74" class=" first-item" id="menu74" title="Награды"><span class="menu-title">Награды</span></a></li> </ul></li> <li class="havechild"><a href="/index.php?option=com_content&view=article&id=21&Itemid=59" class="menu-item1" id="menu59" title="Продукция"><span class="menu-title">Продукция</span></a><ul><li ><a href="/index.php?option=com_content&view=article&id=54&Itemid=62" class=" first-item" id="menu62" title="МКП"><span class="menu-title">МКП</span></a></li> <li ><a href="/index.php?option=com_content&view=article&id=53&Itemid=63" id="menu63" title="Мелкосерийные МКП"><span class="menu-title">Мелкосерийные МКП</span></a></li> <li ><a href="/index.php?option=com_content&view=article&id=52&Itemid=64" id="menu64" title="Детекторы МКП"><span class="menu-title">Детекторы МКП</span></a></li> <li ><a href="/index.php?option=com_content&view=article&id=51&Itemid=73" class=" last-item" id="menu73" title="ВЭУ"><span class="menu-title">ВЭУ</span></a></li> </ul></li> <li ><a href="/index.php?option=com_content&view=article&id=23&Itemid=54" class="menu-item2" id="menu54" title="Новости"><span class="menu-title">Новости</span></a></li> <li ><a href="/index.php?option=com_content&view=article&id=35&Itemid=53" class="menu-item3" id="menu53" title="Публикации"><span class="menu-title">Публикации</span></a></li> <li ><a href="/index.php?option=com_content&view=category&layout=blog&id=30&Itemid=58" class="menu-item4" id="menu58" title="Партнеры"><span class="menu-title">Партнеры</span></a></li> <li ><a href="/index.php?option=com_content&view=article&id=19&Itemid=27" class="menu-item5" id="menu27" title="Вопросы"><span class="menu-title">Вопросы</span></a></li> <li ><a href="/index.php?option=com_content&view=article&id=21&Itemid=72" class="menu-item6 last-item" id="menu72" title="Контакты"><span class="menu-title">Контакты</span></a></li> </ul> </div> <!-- END: MAIN NAVIGATION --> </div> </div>
|
|
|
Записан
|
|
|
|
zorro77786
Гость
|
|
« Ответ #6 : 10-07-2009 11:09 » |
|
Можит здесь? <?php defined( '_VALID_MOS' ) or defined('_JEXEC') or die('Restricted access'); if (!defined ('_JA_CSS_MENU_CLASS')) { define ('_JA_CSS_MENU_CLASS', 1); require_once (dirname(__FILE__).DS."Base.class.php"); class JA_CSSmenu extends JA_Base{ function beginMenu($startlevel=0, $endlevel = 10){ } function beginMenuItems($pid=0, $level=0){ if($level==0) echo "<ul id=\"ja-cssmenu\" class=\"clearfix\">\n"; else echo "<ul>"; } function endMenu($startlevel=0, $endlevel = 10){ } function hasSubMenu($level) { return false; } function beginMenuItem($row=null, $level = 0, $pos = '') { $active = in_array($row->id, $this->open); $active = ($active) ? " active" : ""; if ($level == 0 && @$this->children[$row->id]) echo "<li class=\"havechild{$active}\">"; else if ($level > 0 && @$this->children[$row->id]) echo "<li class=\"havesubchild{$active}\">"; else echo "<li ".(($active) ? "class=\"active\"" : "").">"; } function endMenuItem($mitem=null, $level = 0, $pos = ''){ echo "</li> \n"; } function genMenuItem($item, $level = 0, $pos = '', $ret = 0) { //if ($level) return parent::genMenuItem($item, $level, '', $ret); //else return parent::genMenuItem($item, $level, $pos, $ret); }
function genMenuHead () { ?> <link href="<?php echo $this->getParam('menupath'); ?>/ja_cssmenu/ja.cssmenu.css" rel="stylesheet" type="text/css" /> <script src="<?php echo $this->getParam('menupath'); ?>/ja_cssmenu/ja.cssmenu.js" language="javascript" type="text/javascript"></script> <?php }
} } ?>
|
|
« Последнее редактирование: 10-07-2009 12:05 от RXL »
|
Записан
|
|
|
|
Sla
|
|
« Ответ #7 : 10-07-2009 11:56 » |
|
покажи вот этот скрипт
ja.cssmenu.js
|
|
|
Записан
|
Мы все учились понемногу... Чему-нибудь и как-нибудь.
|
|
|
RXL
Технический
Администратор
Offline
Пол:
|
|
« Ответ #8 : 10-07-2009 12:02 » |
|
zorro77786, думаю, что нужно учитывать тот факт, что CSS-классы в className разделяются пробелами.
А на что это влияет? Посмотри сам: 1. "class1 class2" 2. "class1class2" Во втором случае получается третий класс, не связанный с первым и вторым!
|
|
|
Записан
|
... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
|
|
|
zorro77786
Гость
|
|
« Ответ #9 : 10-07-2009 15:56 » |
|
покажи вот этот скрипт
ja.cssmenu.js
Первый выложенный скрипт он и есть. zorro77786, думаю, что нужно учитывать тот факт, что CSS-классы в className разделяются пробелами.
А на что это влияет? Посмотри сам: 1. "class1 class2" 2. "class1class2" Во втором случае получается третий класс, не связанный с первым и вторым! Да теперь вижу.
|
|
|
Записан
|
|
|
|
zorro77786
Гость
|
|
« Ответ #10 : 14-07-2009 10:49 » |
|
Так как решить задачу ? Хэлп.
|
|
|
Записан
|
|
|
|
Sla
|
|
« Ответ #11 : 15-07-2009 10:40 » |
|
было бы неплохо увидеть это в живую
сдается мне что не вся здесь инфа и также используется каокой-нибудь js-framework
|
|
|
Записан
|
Мы все учились понемногу... Чему-нибудь и как-нибудь.
|
|
|
zorro77786
Гость
|
|
« Ответ #12 : 03-08-2009 10:27 » |
|
Решил вопрос .menu-item0{ background: url(../../images/company3.jpg) no-repeat center bottom; } .menu-item0:hover{ background: url(../../images/company.jpg) no-repeat center bottom; } .menu-item0.active{ background: url(../../images/company1.jpg) no-repeat center bottom; }
.menu-item1{ background: url(../../images/production3.jpg) no-repeat center bottom; } .menu-item1:hover{ background: url(../../images/production.jpg) no-repeat center bottom; } .menu-item1.active{ background: url(../../images/production1.jpg) no-repeat center bottom; } .menu-item2{ background: url(../../images/news3.jpg) no-repeat center bottom; } .menu-item2:hover{ background: url(../../images/news.jpg) no-repeat center bottom; } .menu-item2.active{ background: url(../../images/news1.jpg) no-repeat center bottom; } .menu-item3{ background: url(../../images/publications3.jpg) no-repeat center bottom; } .menu-item3:hover{ background: url(../../images/publications.jpg) no-repeat center bottom; } .menu-item3.active{ background: url(../../images/publications1.jpg) no-repeat center bottom; } .menu-item4{ background: url(../../images/partners3.jpg) no-repeat center bottom; } .menu-item4:hover{ background: url(../../images/partners.jpg) no-repeat center bottom; } .menu-item4.active{ background: url(../../images/partners1.jpg) no-repeat center bottom; } .menu-item5{ background: url(../../images/questions3.jpg) no-repeat center bottom; } .menu-item5:hover{ background: url(../../images/questions.jpg) no-repeat center bottom; } .menu-item5.active{ background: url(../../images/questions1.jpg) no-repeat center bottom; } .menu-item6{ background: url(../../images/contacts3.jpg) no-repeat center bottom; } .menu-item6:hover{ background: url(../../images/contacts.jpg) no-repeat center bottom; } .menu-item6.active{ background: url(../../images/contacts1.jpg) no-repeat center bottom; }
.menu-item0{ /*IE 7*/ background: url(../../images/company3.jpg) no-repeat center bottom; } .menu-item0:hover{ /*IE 7*/ background: url(../../images/company.jpg) no-repeat center bottom; } .menu-item0.focus{ /*IE 7*/ background: url(../../images/company1.jpg) no-repeat center bottom; }
.menu-item1{ /*IE 7*/ background: url(../../images/production3.jpg) no-repeat center bottom; } .menu-item1:hover{ /*IE 7*/ background: url(../../images/production.jpg) no-repeat center bottom; } .menu-item1.focus{ /*IE 7*/ background: url(../../images/production1.jpg) no-repeat center bottom; } и скрипт sfHover = function() { var sfEls = document.getElementById("ja-cssmenu").getElementsByTagName("li"); for (var i=0; i<sfEls.length; ++i) { sfEls[i].onmouseover=function() { clearTimeout(this.timer); if(this.className.indexOf("sfhover") == -1) this.className+="sfhover"; } sfEls[i].onmouseout=function() { this.timer = setTimeout(sfHoverOut.bind(this), 20); } } }
function sfHoverOut() { clearTimeout(this.timer); this.className=this.className.replace(new RegExp("sfhover\\b"), ""); }
|
|
|
Записан
|
|
|
|
|