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


Как Сделать Главное Меню На Одной Длинной Полосе?

мокко главная меню полоса

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

#1 NNNadka

NNNadka

    Новичок

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

Отправлено 11 Ноябрь 2013 - 18:40

Добрый день!
Подскажите, где прочесть на форуме или как сделать? Очень надеюсь на помощь.
Я бы хотела сделать главное меню на длинной розовой полосе, длиной на всю ширину страницы. У меня шаблон Мокко, аккаунт SL-214478.
Скриншот - во вложенном файле.
Читала тот же вопрос здесь:http://forum.storela...1-главное-меню/
Но #menu в main.css у меня нет;(

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

  • Безымянный.jpg


#2 Brendi

Brendi

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

  • Пользователи
  • PipPipPipPip
  • 719 сообщений
  • ГородНорильск

Отправлено 11 Ноябрь 2013 - 18:57

ап

#3 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 12 Ноябрь 2013 - 03:23

Для реализации подобного вам понадобиться сделать следующее - в шаблоне "HTML" найдите и удалите код

<div id="mainNav">
	<table>
	  <tr>
		{% FOR menu %}
			  {% FOR header %}
				{% FOR links %}
			 <td {% IF menu.header.links.first %}class="first"{% ELSEIF menu.header.links.last %}class="last"{% ENDIF %}>
			   <div>
				 <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>
			   </div>
			 </td>
		   {% ENDFOR %}
			  {% ENDFOR %}
			{% ENDFOR %}
	  </tr>
	</table>
   </div>

далее найдите

</div>
<div id="contentWrap">

и замените на

<div id="mainNav">
	<table>
	  <tr>
		{% FOR menu %}
			  {% FOR header %}
				{% FOR links %}
			 <td {% IF menu.header.links.first %}class="first"{% ELSEIF menu.header.links.last %}class="last"{% ENDIF %}>
			   <div>
				 <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>
			   </div>
			 </td>
		   {% ENDFOR %}
			  {% ENDFOR %}
			{% ENDFOR %}
	  </tr>
	</table>
   </div>
</div>

<div id="contentWrap">

после этого в файле стилей main.css найдите

#mainNav {
  background-color: #FDEFEF;
  bottom: 0;
  height: 35px;
  left: -40px;
  margin: 0 186px;
  position: absolute;
}

и замените на

#mainNav {
  background-color: #FDEFEF;
  display: block;
  height: 35px;
  position: relative;
  z-index: 10;
}

далее найдите

#mainNav table {
  background: url("{ASSETS_IMAGES_PATH}nav_bg_right.gif") no-repeat right bottom;
  border-collapse: collapse;
  float: left;
  height: 30px;
  margin: auto;
  padding: 5px 5px 0 0;
}

и замените на

#mainNav table {
  background: url("{ASSETS_IMAGES_PATH}nav_bg_right.gif") no-repeat right bottom;
  border-collapse: collapse;
  height: 30px;
  margin: auto;
  padding: 5px 5px 0 0;
}


#4 NNNadka

NNNadka

    Новичок

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

Отправлено 12 Ноябрь 2013 - 12:41

Спасибо, смысл именно тот, который я хотела, но эта полоса закрыла верх страницы: не стало видно верхушки слайдера на главной и обрезались слова "Каталог" в левом меню. А на всех страницах сайта не видно заголовков страницы.
Подскажите еще раз, какой параметр поменять, чтобы эти строчки были видны?
И последний вопрос -  хотела бы убрать серую полоску в конце главного меню
Заранее благодарна!
Скриншоты прилагаю

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

  • 2.jpg
  • 3.jpg


#5 Koderhan

Koderhan

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

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

Отправлено 12 Ноябрь 2013 - 12:52

Ваша фоновая картинка слишком много весит. Из-за этого сайт может грузиться очень долго. Рекомендую сжать ее.
fon3.jpg
Dimensions 1920 × 1350
File size 1.5 MB


shapka3.jpg
Dimensions1920 × 200
File size 343 KB

И файлы слайдера тоже не легкие.



Панель администратора, "Сайт"->"Редактор Шаблонов".
В конец файла "main.css".
Добавить код:
#mainNav table td.last {
	padding: 0px;
}


Панель администратора, "Сайт"->"Редактор шаблонов".
В файле "main.css".
Найти код:
#contentWrap {clear: both;background: url({ASSETS_IMAGES_PATH}fon3.jpg);background-attachment: fixed;}
Заменить:
#contentWrap {clear: both;background: url({ASSETS_IMAGES_PATH}fon3.jpg);background-attachment: fixed;margin-top: 35px;}


#6 NNNadka

NNNadka

    Новичок

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

Отправлено 12 Ноябрь 2013 - 13:27

Огромное спасибо за помощь и за критику :)

Насчет файлов: согласна,  долго грузится.

Так было сделано из-за банального незнания... Когда я загружаю файл меньшего размера, видны склейки. Это выглядит некрасиво. Как этого избежать - не знаю :(
Вот сейчас сделала файл 157 кб, смотрится так:

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

  • 4.jpg


#7 empty9228

empty9228

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

  • Модератоpы
  • 618 сообщений

Отправлено 13 Ноябрь 2013 - 08:47

Здравствуйте! Чтоб не было видно "склеик" следует хорошо подобрать орнамент, тут примерно так же, как с обои в квартире) на сайте у  вас сейчас другой фон, вопрос еще актуален?

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

  • 13-11-2013 9-44-53.png


#8 NNNadka

NNNadka

    Новичок

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

Отправлено 13 Ноябрь 2013 - 09:16

Наверное уже нет,  мысль я поняла, хотя получается пока  не совсем то, что хотелось бы.... Критику и совет восприняла, огромное спасибо!

#9 NNNadka

NNNadka

    Новичок

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

Отправлено 14 Ноябрь 2013 - 20:01

Подскажите, пожалуйста, а как главное меню чуть опустить вниз?

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

  • 1.jpg


#10 Сake

Сake

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

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

Отправлено 15 Ноябрь 2013 - 00:50

Добавьте в ваш файл стилей main.css следующий класс

#mainNav {
  padding-top: 14px;
}


#11 NNNadka

NNNadka

    Новичок

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

Отправлено 15 Ноябрь 2013 - 07:16

Спасибо!





Темы с аналогичным тегами мокко главная, меню, полоса

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

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