Перейти к публикации

Помогите не профу разобраться с java менюшкой с CSS

tlekkanapin

Автор: tlekkanapin,
в В помощь вебмастеру

 Рассказать Подписчики 0

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

tlekkanapin

tlekkanapin 0

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

Привет кто откликнулся.

Вообщем у меня dle 8.3, сайт ramblertop.ru.

Кто поможет, в долгу не останусь, я человек слово. Только помогите очень прошу!

У меня там есть такая простая менюшка в шапке на java (ну не смогу объяснить ее описание, тут видеть надо, посмотрите).

Шаблон готовый скачал этот, по умолчанию там этих верхник вкладок 6, но я хотел добавить еще три.

Вот так построены эти 6 вкладок меню с появляющимся показом содержимого:

(давайте опишу сначала проблему: шесть "родных" вкладок нормально реагируют на onclick и выводят содержимое самой вкладки, а вот последующие 3 (последние 3) появились, но при нажатии на вкладки отображать содержимое ее не хотят, я уже весь шаблон перерыл, весь engine и ничего не нашел, хотя по логике все должно работать как часики. Не пойму :unsure:

Вот код main.tpl 


<div id="topmenu">

		<div class="tmenu">

			<p><a href="#" onclick="menushow1();">Главная</a></p>

			<p><a href="#" onclick="menushow2();">TOP Софт</a></p>

			<p><a href="#" onclick="menushow3();">TOP Видео</a></p>

			<p><a href="#" onclick="menushow4();">TOP Музыка</a></p>

			<p><a href="#" onclick="menushow5();">TOP Игры</a></p>

			<p><a href="#" onclick="menushow6();">WEB Master</a></p>

                                    <p><a href="#" onclick="menushow7();">Mobile</a></p>  /*ВОТ ЭТА ВКЛАДКА МНОЮ СОЗДАННАЯ УЖЕ*/

                                    <p><a href="#" onclick="menushow8();">TOP News</a></p>  /*ВОТ ЭТА ВКЛАДКА МНОЮ СОЗДАННАЯ УЖЕ*/

                                    <p><a href="#" onclick="menushow9();">TOP Статьи</a></p>  /*ВОТ ЭТА ВКЛАДКА МНОЮ СОЗДАННАЯ УЖЕ*/


/// ВОТ ЭТО УЖЕ СОДЕРЖАНИЕ ВКЛАДОК///

                /ЭТО СОДЕРЖАНИЕ ПЕРВОЙ ВКЛАДКИ/

<div  id="bb1" style="display:block;" class="t_elm">

			<div class="t_elm_h" id="telm1">Главная</div>

				<div class="t_elm_in">

					<div id="main_tab">

				<a href="#">Новые фильмы</a> | 

				<a href="#">Популярные фильмы</a> | 

				<a href="#">Топ 50 фильмы </a> | 

				<a href="#">Фильмы на заказ </a> | 

				<a href="#">Форум</a>

					</div>

					</div>

		</div>

                /ЭТО СОДЕРЖАНИЕ ВТОРОЙ ВКЛАДКИ/

<div id="bb2" style="display:none;" class="t_elm">

			<div class="t_elm_h" id="telm2">TOP Софт</div>

			<div class="tab">

				<a href="#">Новые фильмы</a> | 

				<a href="#">Популярные фильмы</a> | 

				<a href="#">Топ 50 фильмы </a> | 

				<a href="#">Фильмы на заказ </a> | 

				<a href="#">Форум</a>

					</div>

		</div>


И остальное содержание вкладок такое же, 

только меняется <div id="bb>(здесь цифра соответственно)"; 

потом <div id="telm(здесь цифра соответственно)">

Последющие мною добавленные три вкладки с содержимым я добавил так 

же как и "родные" 6 вкладок, просто скопировал но поменял 

только <div id="bb(следующая цифра, например 7)"> и 

<div id="telm(след.цифра соответственно)">
Вот style.css: 

/* шапка*/

/* Верхнее меню*/

#topmenu{width:100%;height:59px;padding:2px 0 0 0;overflow:hidden}


.tmenu{height:29px;overflow:visible}

.tmenu p{width:98px;height:29px;float:left;margin:0 3px 0 0;background:url(../images/btm.png);text-align:center}

.tmenu p a:link{font:bold 11px/29px Arial;color:#FFFFFF;text-transform:uppercase}

.tmenu p a:visited{font:bold 11px/29px Arial;color:#FFFFFF;text-transform:uppercase}

.tmenu p a:hover{font:bold 11px/29px Arial;color:#FFFFFF;text-transform:uppercase;text-decoration:underline}


.t_elm{width:100%;height:30px;font:bold 11px Arial;color:#5cbfd5;overflow:visible}

.t_elm a:link{font:bold 11px Arial;color:#636363}

.t_elm a:visited{font:bold 11px Arial;color:#636363}

.t_elm a:hover{font:bold 11px Arial;color:#636363}


.t_elm_h{width:100px;height:30px;font:bold 11px/29px Arial;color:#FFFFFF;text-align:center;background:url(../images/btm_h.png);position:relative;top:-30px;text-transform:uppercase;float:left}

#telm1{left:-1px}

#telm2{right:-100px}

#telm3{right:-201px}

#telm4{right:-302px}

#telm5{right:-403px}

#telm6{right:-504px}

#telm7{right:-450px}

#telm8{right:-706px}

#telm9{right:-807px}

.t_elm_in{min-width:100%;margin-left:-100px;height:30px;float:left;}

.t_elm_wrap{padding:0 0 0 20px;}


#main_tab{width:56%;height:120px;padding:0 0 0 3%;font:bold 11px/29px Arial;float:left}

#main_tab a:link{font:bold 11px Arial;color:#636363}

#main_tab a:visited{font:bold 11px Arial;color:#636363}

#main_tab a:hover{font:bold 11px Arial;color:#363636;text-decoration:underline}


.tab{width:80%;height:30px;padding:0 0 0 2%;font:bold 11px/29px Arial;float:left;margin-left:-8%}

.tab a:link{font:bold 11px Arial;color:#636363}

.tab a:visited{font:bold 11px Arial;color:#636363}

.tab a:hover{font:bold 11px Arial;color:#363636;text-decoration:underline}

Так вот, я не знаю где копать...Вроде все перекопал.

Дело в том что я java script оочень плохо знаю, поэтому в этом и проблемы все.

Зайдите посмотрите на сайте три последние вкладки меню не раскрываются так как первые 6.

Вообщем объяснил как смог. Если какая то еще инфа нужна -только скажите. Но вроде все скинул. Может еще из папки js скинуть скрипты java???

Изменено пользователем tlekkanapin
Ссылка на сообщение
Поделиться на других сайтах
kang

kang 42

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

У вас в js есть такие функции:

function menushow6()

  { 


var bb1 = document.getElementById("bb1");

var bb2 = document.getElementById("bb2");

var bb3 = document.getElementById("bb3");

var bb4 = document.getElementById("bb4");

var bb5 = document.getElementById("bb5");   

var bb6 = document.getElementById("bb6");   


   bb6.style.display = 'block';

  	   bb1.style.display = 'none';

       bb2.style.display = 'none';

       bb3.style.display = 'none';

       bb4.style.display = 'none';

 bb5.style.display = 'none';

  }
Нужно еще menushow7, menushow8, menushow9 и 
var bb7 = document.getElementById("bb7");

var bb8 = document.getElementById("bb8");

var bb9 = document.getElementById("bb9");
во все menushow функции добавить и в каждой функции есть примерно такой код 
   

       bb6.style.display = 'block';

       bb1.style.display = 'none';

       bb2.style.display = 'none';

       bb3.style.display = 'none';

       bb4.style.display = 'none';

       bb5.style.display = 'none';

Надо изменить соответственно, добавив bb7, bb8, bb9 и параметр block давать тому bb номер которого соответствует номеру функции.

Ссылка на сообщение
Поделиться на других сайтах
tlekkanapin

tlekkanapin 0

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

Теперь понял конечно что я в правильном направлении шел, но проблема в том что я не могу найти ни одного документы где бы это можно было прописать.. ???

Я облазил весь шаблон, но ничего нету. В коде самой страницы не понятно чтото откуда импортируется этот код.

Вообщем вписать некуда не могу найти куда...

Может если вы посмотрите код то сможете узнать откуда импортируется код js?

Вот все скрипты JS которые есть в шаблоне из папки "temblates/[ШАБЛОН]/css/js"

jcarousellite.full.js


(function($) {                                          

$.fn.jCarouselLite = function(o) {

    o = $.extend({

        btnPrev: null,

        btnNext: null,

        btnGo: null,

        mouseWheel: false,

        auto: null,


        speed: 200,

        easing: null,


        vertical: false,

        circular: true,

        visible: 3,

        start: 0,

        scroll: 1,


        beforeStart: null,

        afterEnd: null

    }, o || {});


    return this.each(function() {                          


        var running = false, animCss=o.vertical?"top":"left", sizeCss=o.vertical?"height":"width";

        var div = $(this), ul = $("ul", div), tLi = $("li", ul), tl = tLi.size(), v = o.visible;


        if(o.circular) {

            ul.prepend(tLi.slice(tl-v-1+1).clone())

              .append(tLi.slice(0,v).clone());

            o.start += v;

        }


        var li = $("li", ul), itemLength = li.size(), curr = o.start;

        div.css("visibility", "visible");


        li.css({overflow: "hidden", float: o.vertical ? "none" : "left"});

        ul.css({margin: "0", padding: "0", position: "relative", "list-style-type": "none", "z-index": "1"});

        div.css({overflow: "hidden", position: "relative", "z-index": "2", left: "0px"});


        var liSize = o.vertical ? height(li) : width(li);   

        var ulSize = liSize * itemLength;                  

        var divSize = liSize * v;                           


        li.css({width: li.width(), height: li.height()});

        ul.css(sizeCss, ulSize+"px").css(animCss, -(curr*liSize));


        div.css(sizeCss, divSize+"px");                     


        if(o.btnPrev)

            $(o.btnPrev).click(function() {

                return go(curr-o.scroll);

            });


        if(o.btnNext)

            $(o.btnNext).click(function() {

                return go(curr+o.scroll);

            });


        if(o.btnGo)

            $.each(o.btnGo, function(i, val) {

                $(val).click(function() {

                    return go(o.circular ? o.visible+i : i);

                });

            });


        if(o.mouseWheel && div.mousewheel)

            div.mousewheel(function(e, d) {

                return d>0 ? go(curr-o.scroll) : go(curr+o.scroll);

            });


        if(o.auto)

            setInterval(function() {

                go(curr+o.scroll);

            }, o.auto+o.speed);


        function vis() {

            return li.slice(curr).slice(0,v);

        };


        function go(to) {

            if(!running) {


                if(o.beforeStart)

                    o.beforeStart.call(this, vis());


                if(o.circular) {          

                    if(to<=o.start-v-1) {           

                        ul.css(animCss, -((itemLength-(v*2))*liSize)+"px");


                        curr = to==o.start-v-1 ? itemLength-(v*2)-1 : itemLength-(v*2)-o.scroll;

                    } else if(to>=itemLength-v+1) { 

                        ul.css(animCss, -( (v) * liSize ) + "px" );


                        curr = to==itemLength-v+1 ? v+1 : v+o.scroll;

                    } else curr = to;

                } else {                   

                    if(to<0 || to>itemLength-v) return;

                    else curr = to;

                }                        


                running = true;


                ul.animate(

                    animCss == "left" ? { left: -(curr*liSize) } : { top: -(curr*liSize) } , o.speed, o.easing,

                    function() {

                        if(o.afterEnd)

                            o.afterEnd.call(this, vis());

                        running = false;

                    }

                );


                if(!o.circular) {

                    $(o.btnPrev + "," + o.btnNext).removeClass("disabled");

                    $( (curr-o.scroll<0 && o.btnPrev)

                        ||

                       (curr+o.scroll > itemLength-v && o.btnNext)

                        ||

                       []

                     ).addClass("disabled");

                }


            }

            return false;

        };

    });

};


function css(el, prop) {

    return parseInt($.css(el[0], prop)) || 0;

};

function width(el) {

    return  el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight');

};

function height(el) {

    return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom');

};


})(jQuery);
mousewheel.js 


(function($) {


var types = ['DOMMouseScroll', 'mousewheel'];


$.event.special.mousewheel = {

	setup: function() {

		if ( this.addEventListener )

			for ( var i=types.length; i; )

				this.addEventListener( types[--i], handler, false );

		else

			this.onmousewheel = handler;

	},


	teardown: function() {

		if ( this.removeEventListener )

			for ( var i=types.length; i; )

				this.removeEventListener( types[--i], handler, false );

		else

			this.onmousewheel = null;

	}

};


$.fn.extend({

	mousewheel: function(fn) {

		return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");

	},


	unmousewheel: function(fn) {

		return this.unbind("mousewheel", fn);

	}

});



function handler(event) {

	var args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true;


	event = $.event.fix(event || window.event);

	event.type = "mousewheel";


	if ( event.wheelDelta ) delta = event.wheelDelta/120;

	if ( event.detail     ) delta = -event.detail/3;



	args.unshift(event, delta);


	return $.event.handle.apply(this, args);

}


})(jQuery);
easing.js 



jQuery.easing = {

	easein: function(x, t, b, c, d) {

		return c*(t/=d)*t + b; 

	},

	easeinout: function(x, t, b, c, d) {

		if (t < d/2) return 2*c*t*t/(d*d) + b;

		var ts = t - d/2;

		return -2*c*ts*ts/(d*d) + 2*c*ts/d + c/2 + b;		

	},

	easeout: function(x, t, b, c, d) {

		return -c*t*t/(d*d) + 2*c*t/d + b;

	},

	expoin: function(x, t, b, c, d) {

		var flip = 1;

		if (c < 0) {

			flip *= -1;

			c *= -1;

		}

		return flip * (Math.exp(Math.log(c)/d * t)) + b;		

	},

	expoout: function(x, t, b, c, d) {

		var flip = 1;

		if (c < 0) {

			flip *= -1;

			c *= -1;

		}

		return flip * (-Math.exp(-Math.log(c)/d * (t-d)) + c + 1) + b;

	},

	expoinout: function(x, t, b, c, d) {

		var flip = 1;

		if (c < 0) {

			flip *= -1;

			c *= -1;

		}

		if (t < d/2) return flip * (Math.exp(Math.log(c/2)/(d/2) * t)) + b;

		return flip * (-Math.exp(-2*Math.log(c/2)/d * (t-d)) + c + 1) + b;

	},

	bouncein: function(x, t, b, c, d) {

		return c - jQuery.easing['bounceout'](x, d-t, 0, c, d) + b;

	},

	bounceout: function(x, t, b, c, d) {

		if ((t/=d) < (1/2.75)) {

			return c*(7.5625*t*t) + b;

		} else if (t < (2/2.75)) {

			return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;

		} else if (t < (2.5/2.75)) {

			return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;

		} else {

			return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;

		}

	},

	bounceinout: function(x, t, b, c, d) {

		if (t < d/2) return jQuery.easing['bouncein'] (x, t*2, 0, c, d) * .5 + b;

		return jQuery.easing['bounceout'] (x, t*2-d,0, c, d) * .5 + c*.5 + b;

	},

	elasin: function(x, t, b, c, d) {

		var s=1.70158;var p=0;var a=c;

		if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;

		if (a < Math.abs(c)) { a=c; var s=p/4; }

		else var s = p/(2*Math.PI) * Math.asin (c/a);

		return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;

	},

	elasout: function(x, t, b, c, d) {

		var s=1.70158;var p=0;var a=c;

		if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;

		if (a < Math.abs(c)) { a=c; var s=p/4; }

		else var s = p/(2*Math.PI) * Math.asin (c/a);

		return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;

	},

	elasinout: function(x, t, b, c, d) {

		var s=1.70158;var p=0;var a=c;

		if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);

		if (a < Math.abs(c)) { a=c; var s=p/4; }

		else var s = p/(2*Math.PI) * Math.asin (c/a);

		if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;

		return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;

	},

	backin: function(x, t, b, c, d) {

		var s=1.70158;

		return c*(t/=d)*t*((s+1)*t - s) + b;

	},

	backout: function(x, t, b, c, d) {

		var s=1.70158;

		return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;

	},

	backinout: function(x, t, b, c, d) {

		var s=1.70158;

		if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;

		return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;

	},

	linear: function(x, t, b, c, d) {

		return c*t/d + b; 

	}

};

Ну помоему js больше нигде нет в шаблоне кроме этих. А скрипты самого движка я думаю бессмысленно толкать сюда, т.к. они не имеют отношения к моему шаблону.

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

tlekkanapin 0

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

Нашел наконецто. Вот дурак я, в t_menu.tpl надо было заглянуть, там весь код менюшки. Но это все только благодаря kangalexey. Еще раз спасибо вам.!

Лучший форум где отвечают мгновенно и не для "показухи" и контента, а действительно чтобы помочь молодым веб мастерам.

Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

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

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

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

×
 Рассказать
Подписчики 0
Перейти к списку тем
×
×
  • Создать...