Активная ссылка.

papay · March 10, 2010

В html и css начинаю уже разбираться и понимать, но столкнулся с такой проблемой, возможно даже и не проблема для знактаков, но так как раньше в этом не было необходимости, то и решение проблемы не знаю, ну а теперь о проблеме.

На сайте http://www.battlefieldbadcompany2.com/ есть меню навигации, когда выбираешь какой-либо раздел и переходишь в него, ссылка становится активной и выделяется оранжевым цветом и соответствующей картинкой, если просто наводиш мышку на раздел, то серым, это не было для меня проблемой сделать, для меня стало камнем преткновением, каким образом ссылка при переходе в нужный раздел выделяется оранжевым, при попытке сделать то же самое ни чего не получается, не выделяется. Я уже и ксс у них вырезал, картинки, но как только вставляю их ксс навожу марафет, активным раздел становится только главный и больше ни какой. Сам уже запутался, есть провал в знаниях, хочу его компенсировать, как погуглить даже хз, как запрос сформировать, надежда на вас.

Заранее спасибо.

Выложу не много кода.

HTML

<!-- End 'site-header' -->

		<div id="site-menu">
	<div id="site-menu-inner" class="grid-12"> 
			<ul class="menu"><li class="leaf first active-trail"><a href="/home" title="Home" class="active">Home</a></li>
<li class="leaf"><a href="/game-info" title="Game Info">Game Info</a></li>
<li class="leaf"><a href="/achievements-challenge" title="Achievements challenge">Achievements challenge</a></li>
<li class="leaf"><a href="/buynow" title="BuyNow">Buy Now</a></li>
<li class="leaf"><a href="/downloads" title="">Downloads</a></li>

<li class="leaf"><a href="/screenshots" title="Screenshots">Screenshots</a></li>
<li class="leaf"><a href="/videos" title="Videos">Videos</a></li>
<li class="expanded last"><a href="http://forum.ea.com/eaforum/categories/show/31.page" title="">Forums</a><ul class="menu"><li class="leaf first"><a href="http://forums.electronicarts.co.uk/battlefield-series/" title="">UK Forum</a></li>
<li class="leaf last"><a href="http://forum.ea.com/eaforum/categories/show/31.page" title="">US Forum</a></li>
</ul></li>
</ul>		
	  </div>
	</div> <!-- End 'site-menu' -->

CSS

#site-menu{height:34px;margin-bottom:10px;}
#site-menu-inner{background:url(/files/gui/img/core/navbg.png) no-repeat;height:100%;}
#site-menu ul{margin:0 auto;padding:4px 10px 4px 0;text-align:justify;}
#site-menu li{padding:0;}
#site-menu li a{color:#fff;display:inline-block;font-size:1.2em;font-weight:bold;margin-left:4px;line-height:26px;padding:0 11px;text-transform:uppercase;text-decoration:none;}
#site-menu li a:hover{background:#404040 url(/files/gui/img/core/greytexture.jpg) repeat;color:#fff;}
#site-menu li a:active{background:#737373 url(/files/gui/img/core/greylighttexture.jpg) repeat;color:#fff;}

CSS2

/*#site-menu *{margin:0;padding:0;}*//* remove <li> list styling off */
#site-menu li{list-style:none;}
#site-menu{position:relative;z-index:2000;}

/* display <a> as block */
#site-menu a{display:block;}

/* set <li> position */
#site-menu li{float:left;position:relative;}

/* set position of <ul> in <li> */
#site-menu li ul{top:25px;left:0px;position:absolute;z-index:2000;}

/* position child <ul> */
#site-menu li ul ul{margin:-29px 0 0 180px;}

/* set visibility of <ul> in <li> */
#site-menu li ul{display:none;}
#site-menu ul li ul li{background:url(/files/gui/img/core/navbg.png) no-repeat center -5px;color:#000;}
#site-menu ul li ul li{width:180px;}
#site-menu ul li ul li a{font-size:10px;display:block;margin-left:0;}
#site-menu ul li.active >a,#site-menu ul li.active-trail >a{color:#000;background:url(/files/gui/img/core/orangetexture.jpg) #d98600;}
#site-menu ul li.active a{color:#000;}
#site-menu ul li a{font-size:1em;}
#site-menu ul li.expanded >a{background:url(/files/gui/img/core/downarrow.png) center bottom no-repeat;}
#site-menu ul li.active-trail a:hover,#site-menu ul li.expanded a:hover{background:url(/files/gui/img/core/greytexture.jpg) center bottom no-repeat;color:#FFF;}
#site-menu ul li.expanded.active-trail >a{background:url(/files/gui/img/core/blackdownarrow.png) center bottom no-repeat #d98600;}
#site-menu ul.menu{text-align:left;}.tooltip{background:url(/sites/all/themes/zen_ninesixty/images/tooltip.png) no-repeat right top;margin-left:11px;padding-right:11px;position:absolute;z-index:999999;}

Great Rash · March 10, 2010

Наверное подсветка ссылки в соответствии с разделом делается при помощи серверных скриптов.

UPD: а ващет подумал... можно и на яваскрипте сделать.

papay · March 10, 2010

Если вам не сложно, то конкретные примеры, очень интересует такая реализация, конечно чем проще реализация тем лучше

Great Rash · March 11, 2010

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Test</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 11px "Trebuchet MS", Verdana, Tahoma, sans-serif;
		}

		body {
			margin: 10px;
		}

		a.active {
			color: red;
		}
	</style>

	<script type="text/javascript">
		function setupMenu() {
			var lnk = document.links;

			for (var i = 0; i < lnk.length; i++) {
				if (lnk[i].href == location.href) {
					lnk[i].className = 'active';
				}
			}
		}

		window.onload = function() {
			setupMenu();
		}
	</script>
</head>

<body>

	<a href="?a=1&b=2">text 1</a>
	<a href="?a=2&b=3">text 2</a>
	<a href="?a=3&b=4">text 3</a>
	<a href="?a=4&b=5">text 4</a>
	<a href="?a=5&b=6">text 5</a>

</body>
</html>

Как-то так.

papay · March 11, 2010

Спасибо попробовал работает, легко и просто, но вот беда, как только это код переношу а свой основной хост для проверки, не работает, если просто на компе создать index.html туда вставить нужный код все работает. Вот сижу и не понимаю в чем беда, скину сейчас отрывок из главного index.html на хосте, посмотрите пожалуйста, наверняка где то тут есть ошибка, которую я не вижу.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
{headers}
<link rel="stylesheet" href="{THEME}/css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="{THEME}/css/engine.css" type="text/css" media="screen" />
<script type="text/javascript" src="{THEME}/js/rounded-corners.js"></script>
<script type="text/javascript" src="{THEME}/js/form-field-tooltip.js"></script>
<script type="text/javascript" src="{THEME}/js/tabcontent.js"></script>
<script type="text/javascript" src="{THEME}/js/contentslider.js"></script>
<link rel="stylesheet" type="text/css" href="{THEME}/css/contentslider.css" />
<script type="text/javascript" src="{THEME}/js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="{THEME}/js/ddaccordion.js"></script>
<script type="text/javascript" src="{THEME}/js/menu.js"></script>
<link rel="stylesheet" type="text/css" href="{THEME}/css/ddaccordion.css" />
	<style type="text/css">
	 #site-menu{height:34px;margin-bottom:10px; background:url({THEME}/images/navbg.png) no-repeat;}
	 #site-menu ul{margin:0 auto;padding:4px 10px 4px 0;text-align:justify;}
	 #site-menu li{float:left; padding:0;}
	 #site-menu li a{color:#fff;display:inline-block;font-size:1.2em;font-weight:bold;margin-left:4px;line-height:26px;padding:0 11px;text-transform:uppercase;text-decoration:none;}
	 #site-menu li a:hover{background:#404040 url({THEME}/images/greytexture.jpg) repeat;color:#fff;}
	 #site-menu li a:active{background:#737373 url({THEME}/images/greylighttexture.jpg) repeat;color:#fff;}
	 #site-menu li a.active {color:#000;background:url({THEME}/images/orangetexture.jpg) #d98600;}
	</style>
</head>
<body>
{AJAX}
<script type="text/javascript">
		function setupMenu() {
			var lnk = document.links;

			for (var i = 0; i < lnk.length; i++) {
				if (lnk[i].href == location.href) {
					lnk[i].className = 'active';
				}
			}
		}

		window.onload = function() {
			setupMenu();
		}
</script>
<script language="javascript" type="text/javascript" src="{THEME}/js/tips.js"></script>
<div id="content"><div id="LoginBlock">
<div style="float:left;padding:8px 0 0 30px;font-weight:bold">Сегодня <script type="text/javascript">
var mydate=new Date() 
var year=mydate.getYear() 
if (year < 1000) year+=1900 
var day=mydate.getDay() 
var month=mydate.getMonth() 
var daym=mydate.getDate() 
if (daym<10) 
daym="0"+daym 
var dayarray=new Array("воскресение","понедельник","вторник","среда","четверг","пятница","суббота") 
var montharray=new Array("января","февраля","марта","апреля","мая","июня","июля","августа","сентября","октября","ноября","декабря") 
document.write(""+dayarray[day]+", "+daym+" "+montharray[month]+" "+year+" года") 
</script></div>
<div class="LoginBlockText"><div id="search"><form onsubmit="java script: showBusyLayer()" method="post" action=''>
	<input type="hidden" name="do" value="search" />
	<input type="hidden" name="subaction" value="search" />
	Поиск <input name="story" type="text" style="background:url({THEME}/images/bg-input.gif);width:88px;height:18px;font-size:11px;border:0;padding:3px 5px 0 5px;" value="Я ищу игру..." onFocus="if(this.value!='') this.value=''" onBlur="if(this.value=='') this.value='Я ищу игру...'" />
	<input class="bt-search" type="image" src="{THEME}/images/bt-search.gif" width="49" height="21" border="0" />   <a class="contentswitcher"><img src="{THEME}/images/contentswitcher.gif" width="23" height="11" border="0" /></a></form>
	</div></div>
</div>
<div id="logo" class="content"><img src="{THEME}/images/dot.gif" width="1000" height="251" alt="" border="0" usemap="#Map" /><map name="Map" id="Map">
<area shape="rect" coords="750,175,985,250" href="/" alt="" />
</map></div>
<!-- End 'site-header' -->
	<div id="site-menu">
			<ul class="menu">
			<li class="leaf first active-trail"><a href="?a=1&b=2" title="Главная">Главная</a></li>
			<li class="leaf"><a href="?a=3&b=4" title="Форум">Форум</a></li>
			<li class="leaf"><a href="?a=5&b=6" title="Администраторы">Аминистраторы</a></li>
			<li class="leaf"><a href="?a=7&b=8" title="Наш FTP">Наш FTP</a></li>
			<li class="leaf"><a href="?a=9&b=10" title="Статистика HLStatsX:CE">Статистика HLStatsX:CE</a></li>
			<li class="leaf"><a href="?a=11&b=12" title="Правила">Правила</a></li>
			</ul>		
	</div> 
<!-- End 'site-menu' -->

Great Rash · March 11, 2010

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

Sign In

Активная ссылка.

Question

papay

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

papay

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

papay

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information