Перейти к содержимому


Верхнее Меню

Автор Mari-ina, 03 июля 2014 08:34

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 26

#1 Mari-ina

Mari-ina

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 646 сообщений

Отправлено 03 Июль 2014 - 08:34

Здравствуйте. Можно ли сделать верхнее меню таким и как?

Прикрепленные изображения

  • 37.png

#2 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 468 сообщений

Отправлено 03 Июль 2014 - 11:24

Просмотр сообщенияMari-ina (03 Июль 2014 - 08:34) писал:

Здравствуйте. Можно ли сделать верхнее меню таким и как?

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

#3 Mari-ina

Mari-ina

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 646 сообщений

Отправлено 03 Июль 2014 - 12:48 

<div class="cpt_auxpages_navigation">
		 <ul class="horizontal" id="hor">
							<li><a href="/auxpage_o-magazine/">О магазине</a></li>
		 <li><a href="/auxpage_help/">Помощь</a></li>
							<li><a href="/auxpage_oplata-i-dostavka/">Доставка/Оплата</a></li>
		 <li><a href="/auxpage_samovyvoz/">Самовывоз</a></li>
							<li><a href="/auxpage_akcii/">Акции</a></li>
														<li><a href="/articles/">Статьи</a></li>
		 </ul>
		 </div>

<div class="block-auth-search">
				<!--noindex-->
								<a href="#inline_content" onclick="setTimeout(function() { document.getElementById('phone_p').focus() }, 300);" id="login_frame_link" class="brownbutton head-enter inline1 cboxElement"><span>Войти</span></a>
				<a href="/register/" class="brownbutton head-reg"><span>Регистрация</span></a>
				
				
<div class="cpt_product_search"><script type="text/javascript" src="/published/SC/html/scripts/js/jquery.autocomplete2.js"></script>
<script type="text/javascript" src="/published/SC/html/scripts/js/input_autocomplete.js"></script>

<form action="/search/" method="get">
	<input type="text" id="searchstring" name="searchstring" class="head-search ac_input" value="Поиск товаров..." onblur="if(this.value=='') this.value='Поиск товаров...'" onfocus="if(this.value=='Поиск товаров...') this.value=''" autocomplete="off">
<input type="submit" value="" class="head-submit">
</form>


<script type="text/javascript">
	jQuery(document).ready(function(){
		function liFormat (row, i, num) {
			var result = '<div class="ac_results_img">' + row[1] + '</div><div class="price_name_cont"><div class="ac_results_name">' + row[0] +  '</div><div class="ac_results_price">' + row[2]  + row[3] + '</div></div><div class="clear"></div>';
			return result;
		}
		function selectItem2(li) {
			location.href = jQuery('span', li).attr('id');
		}
		jQuery("#searchstring").autocomplete("/published/SC/html/scripts/autocomplete.php", {
			minChars:2,
			autoFill:false,
			selectFirst:true,
			cacheLength: 0,
			formatItem:liFormat,
			maxItemsToShow:10,
			onItemSelect:selectItem2,
			width: "430px"
		});
	});
</script>
</div>

				<!--/noindex-->
</div>



#head-wrap .cpt_auxpages_navigation {
position: relative;
overflow: hidden;
margin: 0;
top: 6px;
height: 33px;
background: #F96244 url(images/head-menu-bg2.gif) center -7px no-repeat;
}
#head-wrap .cpt_auxpages_navigation ul {
margin: 0 0 0 2px;
}
#head-wrap .cpt_auxpages_navigation ul li a {
display: block;
padding: 6px 10px 6px 20px;
background: url(images/head-menu-star.png) 0 50% no-repeat;
color: #fff;
text-decoration: none;
font-family: Georgia, serif;
font-style: italic;
font-size: 16px;
}
.block-auth-search {
position: relative;
float: right;
top: -27px;
width: 493px;
height: 33px;
right: 17px;
}

#4 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 468 сообщений

Отправлено 03 Июль 2014 - 13:38

Просмотр сообщенияMari-ina (03 Июль 2014 - 12:48) писал:

<div class="cpt_auxpages_navigation">
<ul class="horizontal" id="hor">
<li><a href="/auxpage_o-magazine/">О магазине</a></li>
<li><a href="/auxpage_help/">Помощь</a></li>
<li><a href="/auxpage_oplata-i-dostavka/">Доставка/Оплата</a></li>
<li><a href="/auxpage_samovyvoz/">Самовывоз</a></li>
<li><a href="/auxpage_akcii/">Акции</a></li>
<li><a href="/articles/">Статьи</a></li>
</ul>
</div>

<div class="block-auth-search">
<!--noindex-->
<a href="#inline_content" onclick="setTimeout(function() { document.getElementById('phone_p').focus() }, 300);" id="login_frame_link" class="brownbutton head-enter inline1 cboxElement"><span>Войти</span></a>
<a href="/register/" class="brownbutton head-reg"><span>Регистрация</span></a>


<div class="cpt_product_search"><script type="text/javascript" src="/published/SC/html/scripts/js/jquery.autocomplete2.js"></script>
<script type="text/javascript" src="/published/SC/html/scripts/js/input_autocomplete.js"></script>

<form action="/search/" method="get">
<input type="text" id="searchstring" name="searchstring" class="head-search ac_input" value="Поиск товаров..." onblur="if(this.value=='') this.value='Поиск товаров...'" onfocus="if(this.value=='Поиск товаров...') this.value=''" autocomplete="off">
<input type="submit" value="" class="head-submit">
</form>


<script type="text/javascript">
jQuery(document).ready(function(){
function liFormat (row, i, num) {
var result = '<div class="ac_results_img">' + row[1] + '</div><div class="price_name_cont"><div class="ac_results_name">' + row[0] + '</div><div class="ac_results_price">' + row[2] + row[3] + '</div></div><div class="clear"></div>';
return result;
}
function selectItem2(li) {
location.href = jQuery('span', li).attr('id');
}
jQuery("#searchstring").autocomplete("/published/SC/html/scripts/autocomplete.php", {
minChars:2,
autoFill:false,
selectFirst:true,
cacheLength: 0,
formatItem:liFormat,
maxItemsToShow:10,
onItemSelect:selectItem2,
width: "430px"
});
});
</script>
</div>

<!--/noindex-->
</div>



#head-wrap .cpt_auxpages_navigation {
position: relative;
overflow: hidden;
margin: 0;
top: 6px;
height: 33px;
background: #F96244 url(images/head-menu-bg2.gif) center -7px no-repeat;
}
#head-wrap .cpt_auxpages_navigation ul {
margin: 0 0 0 2px;
}
#head-wrap .cpt_auxpages_navigation ul li a {
display: block;
padding: 6px 10px 6px 20px;
background: url(images/head-menu-star.png) 0 50% no-repeat;
color: #fff;
text-decoration: none;
font-family: Georgia, serif;
font-style: italic;
font-size: 16px;
}
.block-auth-search {
position: relative;
float: right;
top: -27px;
width: 493px;
height: 33px;
right: 17px;
}

Сделайте бэкап. Далее в шаблоне HTML замените код:
			  <!-- Верхний блок навигации -->
			  <ul id="main_nav">
				{% FOR menu %}
				  {% FOR header %}
					{% FOR links %}
					   <li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
					{% ENDFOR %}
				  {% ENDFOR %}
				{% ENDFOR %}
			  </ul>
			  <!-- end Верхний блок навигации -->

на

<div class="cpt_auxpages_navigation">
			  <!-- Верхний блок навигации -->
			  <ul class="horizontal" id="hor">
				{% FOR menu %}
				  {% FOR header %}
					{% FOR links %}
					   <li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
					{% ENDFOR %}
				  {% ENDFOR %}
				{% ENDFOR %}
			  </ul>
			  <!-- end Верхний блок навигации -->
</div>

Далее в main.css добавьте:
.cpt_auxpages_navigation {
position: relative;
overflow: hidden;
margin: 0;
top: 6px;
height: 33px;
background: #F96244 url({ASSETS_IMAGES_PATH}head-menu-bg2.gif) center -7px no-repeat;
}
.cpt_auxpages_navigation ul {
margin: 0 0 0 2px;
}
.cpt_auxpages_navigation ul li a {
display: block;
padding: 6px 10px 6px 20px;
background: url({ASSETS_IMAGES_PATH}head-menu-star.png) 0 50% no-repeat;
color: #fff;
text-decoration: none;
font-family: Georgia, serif;
font-style: italic;
font-size: 16px;
}
.block-auth-search {
position: relative;
float: right;
top: -27px;
width: 493px;
height: 33px;
right: 17px;
}

Только Вам нужно загрузить в раздел Сайт - Редактор шаблонов картинки head-menu-star.png и head-menu-bg2.gif

#5 Mari-ina

Mari-ina

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 646 сообщений

Отправлено 03 Июль 2014 - 14:25

Получилось не совсем как ожидалось

Прикрепленные изображения

  • 38.png

#6 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 468 сообщений

Отправлено 03 Июль 2014 - 14:32

Просмотр сообщенияMari-ina (03 Июль 2014 - 14:25) писал:

Получилось не совсем как ожидалось

В main.css найдите:
.cpt_auxpages_navigation {
position: relative;
overflow: hidden;
margin: 0;
top: 6px;
height: 33px;
background: #F96244 url({ASSETS_IMAGES_PATH}head-menu-bg2.gif) center -7px no-repeat;
}

поменяйте на:

.cpt_auxpages_navigation {
position: relative;
overflow: hidden;
margin: 0;
top: 6px;
height: 33px;
}

далее найдите:
.header_top {
width: 100%;
margin: 0 auto;
min-height: 40px;
background-color: #3d3947;
}

и замените на:

.header_top {
width: 100%;
margin: 0 auto;
min-height: 40px;
background: #F96244 url({ASSETS_IMAGES_PATH}head-menu-bg2.gif) center -7px no-repeat;
}

#7 Mari-ina

Mari-ina

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 646 сообщений

Отправлено 03 Июль 2014 - 15:13

Теперь вот как получилось

Прикрепленные изображения

  • 39.png

#8 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 468 сообщений

Отправлено 03 Июль 2014 - 15:22

Просмотр сообщенияMari-ina (03 Июль 2014 - 15:13) писал:

Теперь вот как получилось

К сожалению, пунктирную полоску поставить не получится. Она имеет определенные размеры и рассчитана на белый задний фон. Чтобы ее удалить удалите строку: background: #F96244 url({ASSETS_IMAGES_PATH}head-menu-bg2.gif) center -7px no-repeat;

#9 Mari-ina

Mari-ina

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 646 сообщений

Отправлено 03 Июль 2014 - 15:29

Просмотр сообщенияMikDark (03 Июль 2014 - 15:22) писал:

К сожалению, пунктирную полоску поставить не получится. Она имеет определенные размеры и рассчитана на белый задний фон. Чтобы ее удалить удалите строку: background: #F96244 url({ASSETS_IMAGES_PATH}head-menu-bg2.gif) center -7px no-repeat;
А если я ее перерисую пошире?

#10 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 468 сообщений

Отправлено 03 Июль 2014 - 15:30

Просмотр сообщенияMari-ina (03 Июль 2014 - 15:29) писал:

А если я ее перерисую пошире?

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

#11 Mari-ina

Mari-ina

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 646 сообщений

Отправлено 03 Июль 2014 - 16:09

Какой ширины нужно сделать эту полосу? сейчас она у меня 1215*50

Прикрепленные изображения

  • 40.png

#12 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 468 сообщений

Отправлено 03 Июль 2014 - 16:28

Просмотр сообщенияMari-ina (03 Июль 2014 - 16:09) писал:

Какой ширины нужно сделать эту полосу? сейчас она у меня 1215*50

Разницы нет, мы ее сможем продублировать. По высоте так же 50px

#13 Mari-ina

Mari-ina

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 646 сообщений

Отправлено 03 Июль 2014 - 16:32

Закругления и белый фон я убрала

#14 MikDark

MikDark

    Активный участник

  • Модераторы
  • 6 468 сообщений

Отправлено 03 Июль 2014 - 16:42

Просмотр сообщенияMari-ina (03 Июль 2014 - 16:32) писал:

Закругления и белый фон я убрала

Поменяйте background: #F96244 url({ASSETS_IMAGES_PATH}head-menu-bg2.gif) center -7px no-repeat;


на background: #F96244 url({ASSETS_IMAGES_PATH}head-menu-bg2.gif) center -1px;


Далее код:

.cpt_auxpages_navigation {
position: relative;
overflow: hidden;
margin: 0;
top: 6px;
height: 33px;
}

меняем на:
.cpt_auxpages_navigation {
position: relative;
overflow: hidden;
margin: 0;
top: 0px;
height: 33px;
}

#15 Mari-ina

Mari-ina

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 646 сообщений

Отправлено 03 Июль 2014 - 17:36

С полосой все хорошо, а как теперь выровнять слова посередине, раздвинуть их чуть-чуть и отодвинуть звездочки

Прикрепленные изображения

  • 41.png

#16 batta

batta

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 142 сообщений
  • ГородНижний Новгород

Отправлено 03 Июль 2014 - 17:45

Здравствуйте
Найди в main.css
#header .links a:hover, #header .links a.selected {
/* background-color: #ffffff; */
padding: 11px 10px 9px 10px;
}
Измените на
#header .links a:hover, #header .links a.selected {
/* background-color: #ffffff; */
padding: 10px 10px 10px 16px;
}

#17 Mari-ina

Mari-ina

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 646 сообщений

Отправлено 03 Июль 2014 - 18:07

Просмотр сообщенияbatta (03 Июль 2014 - 17:45) писал:

Здравствуйте
Найди в main.css
#header .links a:hover, #header .links a.selected {
/* background-color: #ffffff; */
padding: 11px 10px 9px 10px;
}
Измените на
#header .links a:hover, #header .links a.selected {
/* background-color: #ffffff; */
padding: 10px 10px 10px 16px;
}
Ничего не поменялось

#18 Ирина345

Ирина345

    Активный участник

  • Модераторы
  • 5 709 сообщений

Отправлено 03 Июль 2014 - 18:15

Просмотр сообщенияMari-ina (03 Июль 2014 - 18:07) писал:

Ничего не поменялось
Здравствуйте, найдите в main.css
.cpt_auxpages_navigation {
position: relative;
overflow: hidden;
margin: 0;
top: 0px;
height: 33px;
}


#header .links a {
float: left;
display: block;
padding: 11px 10px 9px 20px;
text-decoration: none;
font-size: 15px;
color: #fff;
}
замените на

.cpt_auxpages_navigation {
position: relative;
overflow: hidden;
margin: 0;
top: 0px;
height: 33px;
left:34px;
}
меняете значение left:34px; меняете отступ от левого края
#header .links a {
float: left;
display: block;
padding: 11px 18px 9px 16px;
text-decoration: none;
font-size: 15px;
color: #fff;
}

#19 Mari-ina

Mari-ina

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 646 сообщений

Отправлено 03 Июль 2014 - 19:51

К сожалению, так и не получается поднять в центр строки

#20 Dars

Dars

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 410 сообщений

Отправлено 03 Июль 2014 - 20:02

Просмотр сообщенияMari-ina (03 Июль 2014 - 19:51) писал:

К сожалению, так и не получается поднять в центр строки
В main.css найдите строки:
.cpt_auxpages_navigation {
position: relative;
overflow: hidden;
margin: 0;
top: 0;
height: 33px;
}
и замените их на:
.cpt_auxpages_navigation {
position: relative;
overflow: hidden;
margin: 0;
top: -5px;
height: 33px;
}

Обратно в Изменение общей стилистики


Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Весна
  5. → Изменение общей стилистики
  6. Privacy Policy