Перейти к содержанию
tim21701

[How-To] Центрируем пункты Горизонтального меню

Рекомендуемые сообщения

Часто задают этот вопрос, что бы не скидывать всем ссылки - вывожу её в отдельную тему.

=========================================================================
-----------------НЕ ЗАБЫВАЕМ ПРО РЕЗЕРВНОЕ КОПИРОВАНИЕ ФАЙЛОВ!-----------------
=========================================================================

Итак, открываем файл: catalog/view/theme/ВАША_ТЕМА/stylesheet/stylesheet.css и находим строки:

#menu {
background: #585858;
border-bottom: 1px solid #000000;
height: 37px;
margin-bottom: 15px;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
padding: 0px 5px;
}

Добавляем туда строку (в любое место):

text-align:center;

Чуть ниже, (в этом же файле) находим:

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

Меняем на эти строки:

#menu ul {
list-style: none;
margin:auto;
padding: 0;
display:inline-block;
margin-bottom:-4px;
text-align:left;
}

До:
3951354.jpg
После:
3974906.jpg
Расширяем возможности горизонтального меню...

 

  • +1 6

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Огромное спасибо!

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Добрый день , а как выровнить пункты меню по ширине ?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Добрый день , а как выровнить пункты меню по ширине ?

 

Не совсем понятен вопрос...

 

В шаблоне по умолчанию - заданно определенное количество пунктов... И между ними нет "разделителя", как на пример в таком шаблоне:

 

3066591.png

Поэтому, здесь и ровнять ничего не надо. Другое дело, что у Вас - этих пунктов может быть (намного) больше... Но, это уже другая история.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Добрый день!

 

Подскажите пожалуйста по такому вопросу, фоновая картинка меню растянута на весь экран, как и банер на главной странице, возможна фиксация правкой в CSS?

 

Код из CSS:

.menu-bg {
background: url("../image/menu-bg.png") repeat-x scroll 0 0 transparent;
height: 52px;
position: absolute;
top: 146px;
width: 100%;
}
.backg_slide {
background: url("../image/slider-backg.png") repeat-x scroll 0 0 transparent;
box-shadow: 0 2px 6px #0B0B0B;
height: 362px;
position: absolute;
top: 199px;
width: 100%;
}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

мне этот способ что пишет тс не помог

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

если еще и адрес сайта где неполучилось = помощь реальна

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Здравствуйте, подскажите пожалуйста, как сделать что-бы ссылки в меню(главная, о нас, информация о доставке, связаться с нами) равномерно распределились по ширине экрана. 

Сейчас у меня так: 2dead6991fc2t.jpg

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Propro откуда мне знать что Вы там наделали, такого нет по дефолту и я пока не научился колдовать по фотографии...

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Скажите плиз, в версии 2.1.0 как это делается?

 

Там в #menu {  Описано по-другому и нет такого 

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

Я так понимаю это было в прошлых версиях. Уже 2 часа мучаюсь, никак не пойму. Спасибо заранее!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Не могу вставить картинку. Но смысл в том же, что и на картинках в первом посте "До" и "После"

Изменено пользователем Dmitry0923

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Скажите плиз, в версии 2.1.0 как это делается?

 

Там в #menu {  Описано по-другому и нет такого 

 
#menu ul {

list-style: none;

margin: 0;

padding: 0;

}

 

Я так понимаю это было в прошлых версиях. Уже 2 часа мучаюсь, никак не пойму. Спасибо заранее!

у меня такой же вопрос. в 2.1 не растягивается по центру по этому сценарию

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

у меня такой же вопрос. в 2.1 не растягивается по центру по этому сценарию

 

В 2.1.0.2.1 делается следующим образом:

находим подраздел "#menu" и после строк "@media (min-width: 768px) {" в двух местах вставляем код:

#menu .navbar-nav {
      float: none;
      text-align: center;
   }
 
#menu .navbar-nav > li {
      display: inline-block;
      float: none;
      text-align: left;
   }

Должно получиться так:

 

Фрагмент кода:

@media (min-width: 768px) {
	
	#menu .navbar-nav {
      float: none;
      text-align: center;
   }

   #menu .navbar-nav > li {
      display: inline-block;
      float: none;
      text-align: left;
   }
	
	#menu .dropdown:hover .dropdown-menu {
		display: block;
	}
}
@media (max-width: 767px) {
	
	#menu .navbar-nav {
      float: none;
      text-align: center;
   }

   #menu .navbar-nav > li {
      display: inline-block;
      float: none;
      text-align: left;
   }
	
	#menu {
		border-radius: 4px;
	}
	#menu div.dropdown-inner > ul.list-unstyled {
		display: block;
	}
	#menu div.dropdown-menu {
		margin-left: 0 !important;
		padding-bottom: 10px;
		background-color: rgba(0, 0, 0, 0.1);
	}
	#menu .dropdown-inner {
		display: block;
	}
	#menu .dropdown-inner a {
		width: 100%;
		color: #fff;
	}
	#menu .dropdown-menu a:hover,
	#menu .dropdown-menu ul li a:hover {
		background: rgba(0, 0, 0, 0.1);
	}
	#menu .see-all {
		margin-top: 0;
		border: none;
		border-radius: 0;
		color: #fff;
	}
}
  • +1 2

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

 

В 2.1.0.2.1 делается следующим образом:

находим подраздел "#menu" и после строк "@media (min-width: 768px) {" в двух местах вставляем код:

#menu .navbar-nav {
      float: none;
      text-align: center;
   }
 
#menu .navbar-nav > li {
      display: inline-block;
      float: none;
      text-align: left;
   }

Должно получиться так:

 

Фрагмент кода:

@media (min-width: 768px) {
	
	#menu .navbar-nav {
      float: none;
      text-align: center;
   }

   #menu .navbar-nav > li {
      display: inline-block;
      float: none;
      text-align: left;
   }
	
	#menu .dropdown:hover .dropdown-menu {
		display: block;
	}
}
@media (max-width: 767px) {
	
	#menu .navbar-nav {
      float: none;
      text-align: center;
   }

   #menu .navbar-nav > li {
      display: inline-block;
      float: none;
      text-align: left;
   }
	
	#menu {
		border-radius: 4px;
	}
	#menu div.dropdown-inner > ul.list-unstyled {
		display: block;
	}
	#menu div.dropdown-menu {
		margin-left: 0 !important;
		padding-bottom: 10px;
		background-color: rgba(0, 0, 0, 0.1);
	}
	#menu .dropdown-inner {
		display: block;
	}
	#menu .dropdown-inner a {
		width: 100%;
		color: #fff;
	}
	#menu .dropdown-menu a:hover,
	#menu .dropdown-menu ul li a:hover {
		background: rgba(0, 0, 0, 0.1);
	}
	#menu .see-all {
		margin-top: 0;
		border: none;
		border-radius: 0;
		color: #fff;
	}
}

 

cпасибо!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Добрый день всем!

Попробовал способы для версий 2,1,0,2,1 и более поздних к сожалению на последней версии 2.3.0.2 не сработало

Можете помочь?

заранее благодарен

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

походу сам разобрался)

Нужно не в stylesheet.css вставлять, а в bootstrap.min.css

 

//можно вопрос не совсем в тему bootstrap.min.css не очень удобно править как его нормально обрабатывать? Сначала полный править а потом где то минимизировать?

Изменено пользователем Sharapov317

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 07.04.2017 в 15:04, Sharapov317 сказал:

Нужно не в stylesheet.css вставлять, а в bootstrap.min.css


Вносите все правки в stylesheet.css, стили в этом файле применяются в приоритете.
Файл bootstrap.min.css вообще не нужно трогать...

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 10.04.2017 в 05:05, tim21701 сказал:


Вносите все правки в stylesheet.css, стили в этом файле применяются в приоритете.
Файл bootstrap.min.css вообще не нужно трогать...

Так не сработало в stylesheet.css((( а в min работает. Возможно еще стиль какой то нужно править для 2.3.0.2, но в принципе меня устроил результат.

Благодарю

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 28.06.2016 в 13:57, melsp сказал:

 

В 2.1.0.2.1 делается следующим образом:

находим подраздел "#menu" и после строк "@media (min-width: 768px) {" в двух местах вставляем код:


#menu .navbar-nav {
      float: none;
      text-align: center;
   }
 
#menu .navbar-nav > li {
      display: inline-block;
      float: none;
      text-align: left;
   }

Должно получиться так:

 

  Скрыть контент

Фрагмент кода:



@media (min-width: 768px) {
	
	#menu .navbar-nav {
      float: none;
      text-align: center;
   }

   #menu .navbar-nav > li {
      display: inline-block;
      float: none;
      text-align: left;
   }
	
	#menu .dropdown:hover .dropdown-menu {
		display: block;
	}
}
@media (max-width: 767px) {
	
	#menu .navbar-nav {
      float: none;
      text-align: center;
   }

   #menu .navbar-nav > li {
      display: inline-block;
      float: none;
      text-align: left;
   }
	
	#menu {
		border-radius: 4px;
	}
	#menu div.dropdown-inner > ul.list-unstyled {
		display: block;
	}
	#menu div.dropdown-menu {
		margin-left: 0 !important;
		padding-bottom: 10px;
		background-color: rgba(0, 0, 0, 0.1);
	}
	#menu .dropdown-inner {
		display: block;
	}
	#menu .dropdown-inner a {
		width: 100%;
		color: #fff;
	}
	#menu .dropdown-menu a:hover,
	#menu .dropdown-menu ul li a:hover {
		background: rgba(0, 0, 0, 0.1);
	}
	#menu .see-all {
		margin-top: 0;
		border: none;
		border-radius: 0;
		color: #fff;
	}
}

Спасибо огромное!!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для версии Version 3.0.2.0 (rs.2)  не получаются выше изложенные варианты по размещению главного меню по центру. Может кто сталкивался? Прошу помочь.

 

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 16.12.2017 в 20:00, vanek20121 сказал:

Для версии Version 3.0.2.0 (rs.2)  не получаются выше изложенные варианты по размещению главного меню по центру. Может кто сталкивался? Прошу помочь.

 

 

В файле stylesheet.css

Добавь в  #menu .nav > li > a {
        margin-left: 30px;
}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
22 минуты назад, Blef сказал:

 

он за год решения ж не нащёл... бедняга...

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Похожий контент

    • От tim21701
      Если кому пригодится, то вот способ - как разместить на главной странице любой модуль.
      (для примера я взял три модуля; "Рекомендуем", "Хиты продаж" и "Слайд-шоу".)

      Вот результат:




      Итак, открываем файл catalog/controller/common/home.php и находим строку:
       
      $this->children[] = 'common/header'; Добаваляем после неё то - что хотим видеть на главной:
       
      $this->children[] = 'module/featured';$this->children[] = 'module/bestseller';$this->children[] = 'module/sidebarslideshow'; Далее, открываем catalog/view/theme/default/template/common/home.tpl и находим:
       
      <?php foreach ($modules as $module) { ?><?php echo ${$module['code']}; ?><?php } ?> И ниже добавляем своё:
       
      <?php echo $featured; ?><?php echo $bestseller'; ?><?php echo $sidebarslideshow'; ?> Затем, открываем catalog/view/theme/default/stylesheet/stylesheet.css и вместо блока (он в самом низу):
       
      #content .middle .box {float: left;margin: 0 6px 10px 6px;min-height: 0px;}#content .middle .box .middle {width: 158px;min-height: 0px;} Ставим свой:
       
      #content .box {float: left;margin: 0 6px 10px 6px;min-height: 0px;}#content .box .middle {width: 158px;min-height: 0px;} Таким способом, можно продублировать любой модуль на главной странице.
       
    • От tim21701
      Итак, если Вы не установили изображение для Категории товаров, берём случайное (из товара) и выводим его...

      Пример:



      Для этого, открываем /catalog/controller/product/category.php и находим строки:
       
      if ($category_info['image']) {$image = $category_info['image'];} else {$image = '';} После них, вставляем:

      if ($category_info['image']) {$image = $category_info['image'];} else {$image = '';// Use random image from products in the category$rndImgQry = "SELECT p.image AS image FROM product AS p JOIN product_to_category AS c ON p.product_id = c.product_id ". "WHERE c.category_id = " . $category_info['category_id'] . " AND p.image NOT LIKE 'no_image.jpg'";$rndImgRslt = mysql_query($rndImgQry) or die (mysql_error());if (mysql_num_rows($rndImgRslt) > 0){$imgRows = array();while($imgRow = mysql_fetch_array($rndImgRslt)){$imgRows[] = $imgRow['image'];}$image = $imgRows[array_rand($imgRows)];}} Ниже, находим блок:

      if ($result['image']) {$image = $result['image'];} else {$image = 'no_image.jpg';} После него вставляем:

      if ($result['image']) {$image = $result['image'];} else {$image = 'no_image.jpg';// Use random image from products in the category$rndImgQry = "SELECT p.image AS image FROM product AS p JOIN product_to_category AS c ON p.product_id = c.product_id ". "WHERE c.category_id = " . $result['category_id'] . " AND p.image NOT LIKE 'no_image.jpg'";$rndImgRslt = mysql_query($rndImgQry) or die (mysql_error());if (mysql_num_rows($rndImgRslt) > 0){$imgRows = array();while($imgRow = mysql_fetch_array($rndImgRslt)){$imgRows[] = $imgRow['image'];}$image = $imgRows[array_rand($imgRows)];}} Всё.
       
    • От tim21701
      Если Вы хотите, что бы на странице товара, при нажатии на вкладки "Описание", "Фото", "Отзывы", "Рекомендуем" они открывались "плавно" (эффект fade),
      откройте файл catalog/view/javascript/jquery/tab.js и найдите строку:
       
      $($(this).attr('tab')).css('display', 'block'); Добавьте ПЕРЕД ней эту:
       
      $($(this).attr('tab')).fadeIn(); Сохраните и посмотрите что получилось.
       
    • От tim21701
      Для любителей отображения меню списком "дерево" в стиле Windows XP, предлагаю такой вариант:



      Используемые значки:

      В модуле нет заменяемых файлов, только новые.
      Установка: Копируем папки из архива и включаем меню в админке.

      Внимание.
      Данный мод не заменяет основное меню Категорий, у Вас появится ещё одно меню с Категориями!
      (Которое можно использовать как дополнительное... Если захотите отставить только его - отключите "Основное").

      Tree Category.zip
    • От tim21701
      Все знают "что такое" IE6 и что, этот браузер вытворяет с нашими темами, игнорируя файлы со стилями, скрипты и даже то - что прописано специально для него... Поэтому, хотелось бы найти решение, которое подскажет нашему новому гостю, что он использует то - что уже давно, на всех языках звучит, как: "IE6 is DEAD!", (в мягкой форме, конечно)... Об этом, "недвусмысленно" намекнула даже сама Майкрософт, прекратив всякую потдержку IE6.
      Но, как показывает статистика, сбрасывать со счетов IE6 не стоит, хотя, таких пользователей становится с каждым годом всё меньше и меньше... Поэтому, мы включим проверку версии браузера в OpenCart, и если у пользователя окажется "древний" Internet Explorer 6 или старше - намекнём (напомним) ему об этом.



      1). Для этого, открываем файл catalog/view/theme/ВАША_ТЕМА/template/common/header.tpl и в самом начале, после тега <head> добавляем:
       
      <meta http-equiv="refresh" content="1;url=index.php?route=common/bad_browser"> 2). В этой же папке catalog/view/theme/ВАША_ТЕМА/template/common/ создаём файл bad_browser.tpl со следующим содержанием:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title><?php echo $title; ?></title></head><body style="text-align:center;"><img alt="" src="<?php echo HTTP_IMAGE.$this->config->get( 'config_logo' ); ?>" /><div style="color:black; font-family:sans-serif; font-size:16px; width:500px;margin:12px auto 0 auto; padding:12px; text-align:justify;border:dotted 1px silver; background:#FFFAFA;"><?php echo $text_warning; ?><br /><br /><br /><?php foreach ($links as $name => $link) { ?><a href="<?php echo $link; ?>" alt="<?php echo $name; ?>" style="color:navy;"><?php echo $name; ?></a><br /><?php } ?></div></body></html> 3). Создаём файл bad_browser.php в папке catalog/controller/common/ со следующим содержанием:

      <?phpclass ControllerCommonBadBrowser extends Controller {public function index() {$this->language->load('common/bad_browser');$this->document->title = $this->config->get('config_title');$this->document->description = $this->config->get('config_meta_description');$this->data['title'] = $this->language->get('title');$this->data['text_warning'] = $this->language->get('text_warning');$this->data['links'] = $this->language->get('links');if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/common/bad_browser.tpl')) {$this->template = $this->config->get('config_template') . '/template/common/bad_browser.tpl';} else {$this->template = 'default/template/common/bad_browser.tpl';}$this->children = array();$this->response->setOutput($this->render(TRUE), $this->config->get('config_compression'));}}?> 4). Создаём файл bad_browser.php в папке catalog/language/russian/common/ со следующим содержанием:

      <?php$_['title'] = 'Старый Браузер!';$_['text_warning'] = 'Вы используете <i>Internet Explorer 6</i> или старше!<br /><br />';$_['text_warning'] .= 'Старые браузеры Internet Explorer не поддерживаются на нашем сайте, и просмотр ';$_['text_warning'] .= 'его с этого браузера может привести к неправильному отображению некоторых страниц, ';$_['text_warning'] .= 'и как следствие, неработоспособности определенных функций интернет магазина. <br /><br />';$_['text_warning'] .= 'Пожалуйста, установите у себя более современный веб-браузер.';$_['links'] = array('Opera' => 'http://www.opera.com/','Internet Explorer' => 'http://www.microsoft.com/','Firefox' => 'http://www.mozilla.org/','Safari' => 'http://www.apple.com/safari/','Google Chrome' => 'http://www.google.com/chrome/');?> (Инглиш версия):

      <?php// Title$_['title'] = 'Bad Browser';// Text$_['text_warning'] = 'It looks like you are using <i>Internet Explorer 6</i> or older!<br /><br />';$_['text_warning'] .= 'The old Internet Explorer is not supported by this website, ';$_['text_warning'] .= 'and viewing it with this browser would result in incorrectly rendered pages ';$_['text_warning'] .= 'and missing functionality. Please consider upgrading to a more modern web browser.';$_['links'] = array('Download Opera' => 'http://www.opera.com/','Download Internet Explorer' => 'http://www.microsoft.com/','Download Firefox' => 'http://www.mozilla.org/','Download Safari' => 'http://www.apple.com/safari/','Download Google Chrome' => 'http://www.google.com/chrome/'?> Всё.

      Готовое решение:
      IE6_must_die.zip
       
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.