Что нужно дописать в коде?

GeorgGood · March 5, 2012

Смотрите, на картинке есть обведенный в красный кружок треугольник. При наводе мышкой на пункт меню он отображается, и , как правило он должен оставаться на около страницы пункта меню, которая открыта. например, если я нажму "О нас" то с "Главная" этот треугольник перейдет на "о нас". Но он не переходит, а остается на "главной", когда открыты другие страницы. Что нужно дописать в коде чтобы на странице "О нас" треугольник не был на "Главной", а был на "О нас" чтобы было понятно на какой странице посетитель сайта находится, и чтобы Пункт меню был таким же белым цветом, как "Главная"? А то не понятно перешел ты на страницу "О нас" или нет.

Вот этот код:

buddah · March 5, 2012

Это потому, что класс .current, которому присвоена стрелка, висит только на главной и не передается текущей странице.

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

GeorgGood · March 5, 2012

Это потому, что класс .current, которому присвоена стрелка, висит только на главной и не передается текущей странице.
Причин почему так может быть десятки, слишком мало входных данных.

как это исправить? вот целый код. можете посмотреть, если конечно не сложно и если это поможет

body {
	margin: 0px;
	padding: 0px;
	color: #CCCCCC;
	font-family: Helevetica,Arial,sans-serif;
	font-size: 13px;
	line-height:1.5em; 
	background-color: #a79f4f;
	background-image: url(/images/templatemo_body.jpg);
	background-repeat: no-repeat;
	background-position: top center;
}

a, a:link, a:visited {
	color: #FFFFFF;
}

a:hover {
	color: #99FF00;
	text-decoration: none;
}

p { margin: 0px; padding: 0 0 10px 0; }
img { border: none; }

h1 { font-size: 40px; font-weight: bold; margin: 0 0 30px 0; padding: 5px 0; color: #fbe724; }
h2 { font-size: 28px; font-weight: normal; line-height: 28px; margin: 0 0 20px 0; padding: 0; color: #fbe724; }
h3 { font-size: 21px; margin: 0 0 10px 0; padding: 0; padding: 0; font-weight: normal; }
h4 { font-size: 18px; margin: 0 0 20px 0; padding: 0; color: #fff;}
h5 { font-size: 16px; margin: 0 0 10px 0; padding: 0; color:#fff; }
h6 { font-size: 14px; margin: 0 0 5px 0; padding: 0; color:#fff;}

.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px;  }
.cleaner_h10 { clear: both; width:100%; height: 10px; }
.cleaner_h20 { clear: both; width:100%; height: 20px; }
.cleaner_h30 { clear: both; width:100%; height: 30px; }
.cleaner_h40 { clear: both; width:100%; height: 40px; }
.cleaner_h50 { clear: both; width:100%; height: 50px; }
.cleaner_h60 { clear: both; width:100%; height: 60px; }

.float_l {
	float: left;
}

.float_r {
	float: right;
}

.image_wrapper {
	display: inline-block;
	padding: 8px;
	border: 1px solid #999;
	background: #ffffff;
	margin-bottom: 10px;
}
.fl_img {
	float: left;
	margin: 3px 30px 15px 0;
}
.fr_img {
	float: right;
	margin: 3px 0 15px 15px;
}

blockquote { font-style: italic; margin-left: 10px;}
cite { font-weight: bold; color:#fff; }
cite span { color: #ccc; }
em { color: #39ddfa; }

.templatemo_list {
	margin: 20px 0;
	padding: 0;
	list-style: none;
}

.templatemo_list li {
	background: transparent url(/images/templatemo_list.png) no-repeat scroll 0 0px;
	margin:0 0 20px;
	padding:0 0 0 25px;
	line-height: 1em;
}

.button a {
	clear: both;
	display: block;
	width: 102px;
	height: 27px;
	padding: 5px 0 0 0;
	background: url(/images/templatemo_button.png) no-repeat;
	color: #333;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
}

.button a:hover {
	color: #000;
	background: url(/images/templatemo_button_hover.png) no-repeat;
}


#templatemo_wrapper {
	width: 970px;
	margin: 0 auto;
	background: url(/images/templatemo_wrapper.png) repeat-y;
}

/* header */

#templatemo_header {
	width: 950px;
	height: 90px;
	margin: 0 10px;
	background: url(/images/templatemo_header.png) repeat-y;
}

#templatemo_header #header_left {
	float: left;
	width: 300px;
}

#templatemo_header #header_right {
	float: right;
	width: 500px;
	margin-right: 30px;
}

#templatemo_header  #site_title {
	width: 250px;
	padding: 20px 0 0 20px;
}

#templatemo_header  #site_title a{
	margin: 0px;
	padding: 0px;
	font-size: 30px;
	color: #ffffff;
	font-weight: normal;
	text-decoration: none;
}

#templatemo_header  #site_title a span {
	display: block;
	text-align: left;
	font-size: 14px;
	color: #333;
	font-weight: normal;
	margin-left: 5px;
}

#social_box {
	float: right;
	display: inline-block;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

#social_box li {
	display: block;
	float: left;
	padding: 0;
	margin: 0;
}

#social_box li a {
	width: 46px;
	height: 46px;
	margin-right: 5px;
}

/* end of header */

/* social */

#social_box {
	float: right;
	display: inline-block;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

#social_box li {
	display: block;
	float: left;
	padding: 0;
	margin: 0;
}

#social_box li a {
	width: 46px;
	height: 46px;
	margin-right: 5px;
}


/* end of social */

/* menu */

#templatemo_menu {
	clear: both;
	width: 970px;
	height: 72px;
	background: url(/images/templatemo_menu.png) no-repeat;
}

#templatemo_menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#templatemo_menu li {
	padding: 0px;
	margin: 0px;
	display: inline-block;
	background: url(/images/templatemo_menu_divider.png) right top no-repeat;
}

#templatemo_menu ul li a {
	float: left;
	display: block;
	height: 46px;
	width: 120px;
	padding-top: 14px;
	font-size: 14px;
	color: #000000;	
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	outline: none;
	border: none;
}

#templatemo_menu ul li a:hover,  #templatemo_menu ul li .current {
	color: #FFFFFF;
	background: url(/images/templatemo_menu_hover.png) center bottom no-repeat;
}

#templatemo_menu ul .last {
	background: none;
}
/* end of menu */

#content_wrapper {
	clear: both;
	margin: 0 10px;
	padding-top: 20px;
	background: url(/images/templatemo_content.png) repeat-y;
}

#content_wo_sb {
	clear: both;
	padding: 30px;
}

#content {
	float: left;
	width: 550px;
	padding: 0 30px 30px;	
}

#content p {
	text-align: justify;
}

#sidebar_wrapper {
	float: right;
	width: 280px;
	margin: 0 30px;
}

#sidebar_top {
	width: 280px;
	height: 10px;
	background: url(/images/templatemo_sidebar_top.png) no-repeat;
}
#sidebar_bottom {
	width: 280px;
	height: 10px;
	background: url(/images/templatemo_sidebar_bottom.png) no-repeat;
}

#sidebar {
	padding: 20px 30px;
	background: url(/images/templatemo_sidebar.png) repeat-y;
}

.col_w260 {
	width: 260px;
}

.news_box {
	margin-bottom: 30px;
	padding-bottom: 30px;
	background: url(/images/horizontal_div.png) repeat-x bottom;
}

.news_box h2 {
	margin-bottom: 5px;
}

.news_box .news_info {
	margin-bottom: 20px;
}


.sidebar_box {
	padding-left: 30px;
}

.sb_news_box {
	margin-bottom: 20px;
	padding: 10px 0 20px 0;
	border-bottom: 1px solid #343320;
}

.sb_news_box img {
	float: left;
	width: 60px;
	height: 60px;
	border: 1px solid #FFF;
	padding: 2px;
}

.sb_news_box .nb_right {
	float: right;
	width: 140px;
	margin-bottom: 0;
	padding-bottom: 0;
}

.sb_news_box .nb_right a {
	text-decoration: none;
}

.sb_news_box .nb_right a:hover {
	text-decoration: underline;
}

.sb_news_box .nb_right a h6 {
	color: #172a37;
	text-decoration: underline;
}

.service_box {
	width: 380px;
	margin-right: 40px;
	margin-bottom: 40px;
}

.service_box img {
	float: left;
	width: 48px;
	height: 48px;
}

.service_box .sb_right {
	float: right;
	width: 300px;
}

#gallery_home {
	clear: both;
	margin-top: 30px;
}

#gallery_home ul { list-style: none; margin: 0 0 30px 0; padding: 0; }

	#gallery_home ul li {
		float: left;
		display: block; 
		padding: 0;
		margin: 0 20px 0 0;
		width: 160px;
		border: 5px solid #252414;
	}

	#gallery_home ul li img {
		width: 160px;
		height: 100px;
	}

	#gallery_home ul .last {
		margin: 0;
	}

/* gallery */

#gallery {
		clear: both;
		margin-top: 30px;
	}
	#gallery ul { list-style: none; margin: 0; padding: 0; }
	#gallery ul li {
		float: left;
		display: block; 
		padding: 0;
		margin: 0;
		width: 245px;
		margin: 0 35px 35px 0;
	}

	#gallery ul li h5 {
		margin-bottom: 15px;
	}

	#gallery ul img {
		width: 235px;
		height: 120px;
		border: 5px solid #1f1e12;
		margin-bottom: 10px;
	}

	#gallery ul .more {
		color: #FF0;
		text-decoration: none;
	}

	#gallery ul .more span {
		font-size: 16px;
	}

/* end of gallery */

#contact_form {
	float: left;
	padding: 0;
}

#contact_form form {
	margin: 0px;
	padding: 0px;
}

#contact_form form .input_field {
	width: 350px;
	padding: 5px 0;
	background: #494730;
	border: 1px solid #17160d;
}

#contact_form form label {
	display: block;
	width: 100px;
	margin-right: 10px;
	font-size: 14px;
	color: #fff;
}

#contact_form form textarea {
	width: 350px;
	height: 200px;
	background: #494730;
	border: 1px solid #17160d;
}

#contact_form form .submit_btn {
	width: 102px;
	height: 32px;
	padding: 1px 0 5px 0;
	border: none;
	color: #333;
	cursor: pointer;
	background: url(/images/templatemo_button.png) no-repeat;
}


#contact_form form .submit_btn:hover {
	color: #000;
	background: url(/images/templatemo_button_hover.png) no-repeat;
}

/* footer */

#templatemo_footer {
	width: 890px;
	margin: 0 10px;
	padding: 30px;
	background: #0d869c url(/images/templatemo_footer.png) top repeat-x;
}

#templatemo_footer .footer_box {
	float: left;
	width: 260px;
	padding-right: 45px;
}

#templatemo_footer ul { padding: 0; margin: 0; list-style: none; }

#templatemo_footer li { padding: 0; margin: 0 0 5px 0; }

#templatemo_footer li a {
	display: block;
	color: #ccc;
	text-decoration: none;
	 border-bottom: 1px dotted #fff;
}

#templatemo_footer li a:hover {
	color: #fff;
}

#templatemo_footer .last {
	padding-right: 0;
}

/* end of footer */

/* copyright */

#templatemo_copyright {
	width: 890px;
	margin: 0 10px;
	padding: 10px 30px;
	text-align: center;
	background: #0c4650 url(/images/templatemo_copyright.png) top repeat-x;
}

/* end of footer */

Edited March 5, 2012 by GeorgGood

Splin · March 5, 2012

Смотрите, на картинке есть обведенный в красный кружок треугольник. При наводе мышкой на пункт меню он отображается, и , как правило он должен оставаться на около страницы пункта меню, которая открыта. например, если я нажму "О нас" то с "Главная" этот треугольник перейдет на "о нас". Но он не переходит, а остается на "главной", когда открыты другие страницы. Что нужно дописать в коде чтобы на странице "О нас" треугольник не был на "Главной", а был на "О нас" чтобы было понятно на какой странице посетитель сайта находится, и чтобы Пункт меню был таким же белым цветом, как "Главная"? А то не понятно перешел ты на страницу "О нас" или нет.
Вот этот код:

Покажи еще html код.

ablay2009 · March 5, 2012

Пожалуйста, спрячьте код под спойлер, и покажите только основную (нужную) часть.

GeorgGood · March 5, 2012

Смотрите, на картинке есть обведенный в красный кружок треугольник. При наводе мышкой на пункт меню он отображается, и , как правило он должен оставаться на около страницы пункта меню, которая открыта. например, если я нажму "О нас" то с "Главная" этот треугольник перейдет на "о нас". Но он не переходит, а остается на "главной", когда открыты другие страницы. Что нужно дописать в коде чтобы на странице "О нас" треугольник не был на "Главной", а был на "О нас" чтобы было понятно на какой странице посетитель сайта находится, и чтобы Пункт меню был таким же белым цветом, как "Главная"? А то не понятно перешел ты на страницу "О нас" или нет.
Вот этот код:
Покажи еще html код.

вот код. но не знаю этот ли он. потому что я с шаблоном работаю

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>[TITLE]</title>
<?$META_DESCRIPTION$?>
<link href="[CSS_URL]" rel="stylesheet" type="text/css" />
</head>

<body> 

<div id="templatemo_wrapper">
	<!-- <header> -->
    <div id="templatemo_header">

        <div id="header_left">

            <div id="site_title">
                <a href="/" ><img src="/images/templatemo_logo.png" /><span>Картинки на заказ</span></a>
            </div>

        </div>

        <div id="header_right">
        	<ul id="social_box">
            	<li><a href="/news/rss"><img src="/images/rss.png" alt="RSS" /></a></li>
            </ul>		
        </div>

    	<div class="cleaner"></div>        
    </div>    
    <div id="templatemo_menu">           
        <ul>
            <li><a href="/" class="current">Главная</a></li>
            <li><a href="/index/0-2">О нас</a></li>
            <li><a href="/">Сервисы</a></li>
            <li><a href="/">Галлерея</a></li>
            <li class="last"><a href="/">Контакты</a></li>
        </ul>    	
    </div>
	<!-- </header> -->
    <div id="content_wrapper">
	<!-- <middle> --> 	
        <div id="content">
        		[BODY]
			<div class="cleaner_h30"></div>            
        </div>

        <div id="sidebar_wrapper">        
        	<div id="sidebar_top"></div>            
            <div id="sidebar">
			<!-- <container> -->
				<!-- <block> -->
                <h2>TITLE</h2>
					CONTENT
					<br>
				<!-- </block> -->
            <!-- </container> -->
            </div>
            <div id="sidebar_bottom"></div>        
        </div>

        <div class="cleaner"></div>
    <!-- </middle> -->
    </div>
    <!-- <footer> -->
       <div> 
      Дизайн от <a href="http://www.templatemo.com" >CSS Templates</a>. $POWERED_BY$.
    </div>																																																		<div style="display: none;">Адаптация от <a href="http://utemplate.ru">uTemplates</a></div>
	<!-- </footer> -->
</div>
</body>
</html>

<!-- <popup> -->
<table border="0" cellpadding="5" cellspacing="1" style="background:#ACACAC;" width="100%">
<tr><td style="background:url('/.s/t/947/3.gif') #40A3CF;color:#FFFFFF;" align="center"><b>[TITLE]</b></td></tr>
<tr><td align="center" style="background:#FFFFFF;padding:5px;">[BODY]</td></tr>
</table>
<!-- </popup> -->

Пожалуйста, спрячьте код под спойлер, и покажите только основную (нужную) часть.

не знаю как сделать спойлер

Splin · March 5, 2012

Смотрите, на картинке есть обведенный в красный кружок треугольник. При наводе мышкой на пункт меню он отображается, и , как правило он должен оставаться на около страницы пункта меню, которая открыта. например, если я нажму "О нас" то с "Главная" этот треугольник перейдет на "о нас". Но он не переходит, а остается на "главной", когда открыты другие страницы. Что нужно дописать в коде чтобы на странице "О нас" треугольник не был на "Главной", а был на "О нас" чтобы было понятно на какой странице посетитель сайта находится, и чтобы Пункт меню был таким же белым цветом, как "Главная"? А то не понятно перешел ты на страницу "О нас" или нет.
Вот этот код:

У тебя класс .current прописан для первого пункта меню, и он не подтягивается для других пунктов.

Нужно добавить скрипт, который будет дописывать класс .current для активного пункта меню.

GeorgGood · March 6, 2012

Смотрите, на картинке есть обведенный в красный кружок треугольник. При наводе мышкой на пункт меню он отображается, и , как правило он должен оставаться на около страницы пункта меню, которая открыта. например, если я нажму "О нас" то с "Главная" этот треугольник перейдет на "о нас". Но он не переходит, а остается на "главной", когда открыты другие страницы. Что нужно дописать в коде чтобы на странице "О нас" треугольник не был на "Главной", а был на "О нас" чтобы было понятно на какой странице посетитель сайта находится, и чтобы Пункт меню был таким же белым цветом, как "Главная"? А то не понятно перешел ты на страницу "О нас" или нет.
Вот этот код:
У тебя класс .current прописан для первого пункта меню, и он не подтягивается для других пунктов.
Нужно добавить скрипт, который будет дописывать класс .current для активного пункта меню.

а какой скрипт? Я новичок

Searcher · March 6, 2012

Логика проста, на каждой странице соответствующему пункту меню ставите класс current.

Для страницы "О нас":

        <ul>
            <li><a href="/">Главная</a></li>
            <li><a href="/index/0-2" class="current">О нас</a></li>
            <li><a href="/">Сервисы</a></li>
            <li><a href="/">Галлерея</a></li>
            <li class="last"><a href="/">Контакты</a></li>
        </ul>

Для "Сервисы":

        <ul>
            <li><a href="/">Главная</a></li>
            <li><a href="/index/0-2">О нас</a></li>
            <li><a href="/" class="current">Сервисы</a></li>
            <li><a href="/">Галлерея</a></li>
            <li class="last"><a href="/">Контакты</a></li>
        </ul>

И т.д.

Вообще, в каком фреймворке то делаете? Там все просто должно быть...

Splin · March 6, 2012

Смотрите, на картинке есть обведенный в красный кружок треугольник. При наводе мышкой на пункт меню он отображается, и , как правило он должен оставаться на около страницы пункта меню, которая открыта. например, если я нажму "О нас" то с "Главная" этот треугольник перейдет на "о нас". Но он не переходит, а остается на "главной", когда открыты другие страницы. Что нужно дописать в коде чтобы на странице "О нас" треугольник не был на "Главной", а был на "О нас" чтобы было понятно на какой странице посетитель сайта находится, и чтобы Пункт меню был таким же белым цветом, как "Главная"? А то не понятно перешел ты на страницу "О нас" или нет.
Вот этот код:
У тебя класс .current прописан для первого пункта меню, и он не подтягивается для других пунктов.
Нужно добавить скрипт, который будет дописывать класс .current для активного пункта меню.
а какой скрипт? Я новичок

Ты верстку под какую CMS делаеш?? Или ты просто верстаеш для себя?

Потому как на всех цмсках присутствуют скрипты для менюшек которые определяют активный пункт меню.

У меня с JS плохо, поэтому лучше погугли, найди менюшку с js, и посмотри как там идет привязка скрипта и сделай аналогично.

Вот примерчик http://pcvector.net/scripts/menu_and_navigation/227-gorizontalnoe-menyu-s-css-ili-js.html

Edited March 6, 2012 by Splin

Быколай · March 6, 2012

jQuery:

$(function(){
	$('#templatemo_menu ul li a').each(function(){
		if(document.location.pathname == $(this).attr('href')){
			$(this).parent().addClass('current');
		}
	});
});

этот код присвоит класс current к тому пункту, адрес ссылки которого совпадает с адресом текущей страницы.

вообще, тема не нова.

Sign In

Что нужно дописать в коде?

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information