|
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
|
 |
« Ответ #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
|
|
« Ответ #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"), "");
} |
|
|
|
|
Записан
|
|
|
|
|
