Помогите с оформлением ссылок

cheatoff-strike · November 27, 2012

Подскажите пожалуйста, как сделать так, чтобы при переходе по ссылке она становилась жирным шрифтом ? И a:visited и a:active это не то...

При Visited все ссылки посещенные когда-либо становятся жирным а при актив только в момент нажатия... т.е после того как отпустил кнопу они принимают обычный вид. А мне нужно чтобы они оставались

жирными в меню, какбы обьясняя человеку в каком месте сайта он в данный момент находится.

На старом сайте на Ucoz'e у меня это нормально реализованно (Но там уже был клас к которому пишешь свойства и подсмотреть где он находился не как нельзя, т.к сам код меню закрыт для глаз)

Там цсс выглядело вот так.

.uMenuV a.uMenuItemA {

color: #cccccc;

font-weight: bolder;

background-position: 0px -40px;

}

А В моем шаблоне вот меню.

html

<div class="menuverh"><h3>НАВИГАЦИЯ</h3></div>

<a class="menuitem" href="/">Главная</a>

<a class="menuitem" href="ergerg">Форум</a>

<a class="menuitem" href="232rf23">Контакты</a>

</div>

А вот к немуже ксс.

.glossymenu a.menuitem{

font:11px 'tahoma','arial';

line-height: 25px;

border-bottom: 1px dotted;

background:rl(../images/menu-button.png);

color:#CCCCCC;

display: block;

position: relative;

height:25px;

width: auto;

padding:0px 0 0 0;

padding-left: 0px;

padding-right:-30px;

margin-right:20px;

text-decoration: none;

}

.glossymenu{

margin:0 0 0 10px;

padding: 0;

width: 190px;

}

Куда мне впихнуть вот этот видимо клас

.glossymenu a.MenuItemA {

color: #cccccc;

font-weight: bolder;

}

Чтобы все заработало !?

Great Rash · November 27, 2012

При помощи одного CSS это не сделать. Тут нужны скрипты.

cheatoff-strike · November 27, 2012

Ну а ктонибудь не подскажет что можно сделать то ?

Не такая уж задача то помоему серьезная... я это на каждом втором сайте вижу... но немогу для поисковиков сформулировать вопрос свой чтобы инфу посмотреть.

Great Rash · November 27, 2012

«php меню сайта» в Google. - первая ссылка

Sensei · November 27, 2012

На JS (jQuery)


$(document).ready(function() {
	var loc = location.href;

	$('.menuitem') 
		.each(function() {
			var href = $(this).attr('href');

			if (href == loc)
				$(this).addClass('active');
		})
})

И стили для класса active (определите сами)

cheatoff-strike · November 27, 2012

Большое всем спасибо! Просто после перехода с Ucoza на DLE, из-за незнания пхп проблем много встало передо мной )

cheatoff-strike · November 27, 2012

А как его прицепить ??? Я его положил в Main.tpl к другим скриптам между тегами [script] [/script] и в ксс вот это написал.

.glossymenu a.menuitem:active, .glossymenu .menuitem:active{

color:#CCCCCC;

font-weight:bolder;

}

Но нечего не изменилось

Sensei · November 28, 2012


.menuitem.active {
    color: red;
}

Возможно, селекторы по тегам перебьют, тогда так


.menuitem.active {
    color: red !important;
}

Edited November 28, 2012 by Sensei

cheatoff-strike · November 28, 2012

Тоже работает только при нажатии... т.е нечего не изменилось. ну и работает не с .active а :active (если это имеет значение)

Мб я не туда или не так вставил ? Вот открывок из main.tpl

<head>

{headers}

$(document).ready(function() {

var loc = location.href;

$('.menuitem')

.each(function() {

var href = $(this).attr('href');

if (href == loc)

$(this).addClass('active');

})

</script>

$(document).ready(function() {

$('a[name=modal]').click(function(e) {

e.preventDefault();

var id = $(this).attr('href');

var maskHeight = $(document).height();

var maskWidth = $(window).width();

$('#mask').css({'width':maskWidth,'height':maskHeight});

$('#mask').fadeIn(1000);

$('#mask').fadeTo("slow",0.8);

var winH = $(window).height();

var winW = $(window).width();

$(id).css('top', winH/2-$(id).height()/2);

$(id).css('left', winW/2-$(id).width()/2);

$(id).fadeIn(2000);

});

$('.window .close').click(function (e) {

e.preventDefault();

$('#mask, .window').hide();

});

$('#mask').click(function () {

$(this).hide();

$('.window').hide();

});

</script>

ddaccordion.init({

headerclass: "submenuheader",

contentclass: "submenu",

revealtype: "click",

mouseoverdelay: 200,

collapseprev: false,

defaultexpanded: [],

onemustopen: false,

animatedefault: false,

persiststate: true,

toggleclass: ["closed", "opened"],

togglehtml: ["suffix", "<img src={THEME}/images/spacer.gif' alt='-' /> ", "<img src='{THEME}/images/spacer.gif' alt='+' /> ],

animatespeed: "fast",

oninit:function(expandedindices){ },

onopenclose:function(header, index, state, isuseractivated){ }

})

</script>

</head>

<body>

{AJAX}

Sign In

Помогите с оформлением ссылок

Question

cheatoff-strike

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

cheatoff-strike

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Sensei

Link to comment

Share on other sites

cheatoff-strike

Link to comment

Share on other sites

cheatoff-strike

Link to comment

Share on other sites

Sensei

Link to comment

Share on other sites

cheatoff-strike

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information