<MyRusakov.ru />

Создание Интернет-магазина на OpenCart 2.0

Создание Интернет-магазина на OpenCart 2.0

Видеокурс "Создание Интернет-магазина на OpenCart 2.0" обучит Вас созданию любых Интернет-магазинов на OpenCart 2. В первом разделе курса разбираются абсолютно все возможности данного движка с примерами.

Во втором разделе создаётся полноценный Интернет-магазин, где Вы уже всё увидите своими глазами.

И, наконец, в третьем разделе курса созданный Интернет-магазин будет размещён в Интернете.

К курсу так же идут бесплатные и очень ценные Бонусы сопоставимые с самим курсом: "Как сэкономить на Яндекс.Директ до 50%", "Дропшиппинг" и "Как раскрутить Интернет-магазин".

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Подменю на CSS

Подменю на CSS

Давно хотел написать статью о том, как сделать подменю на CSS. Многие делают его на JQuery и получается достаточно неплохо, однако, весь базовый принцип создания подменю на CSS я изложу здесь. А уже дальше, отталкиваясь от этой базы, можно совершенствовать подменю дальше.

Привожу сразу CSS-код:

* html ul li {
  float: left;
}
* html ul li a {
  height: 1%;
}
ul {
  border-bottom: 1px solid #000;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100px;
}
ul li {
  position: relative;
}
ul li a {
  display: block;
  border: 1px solid #000;
  border-bottom: 1px;
  padding: 5px;
  text-decoration: none;
}
li ul {
  display: none;
  left: 99px;
  position: absolute;
  top: 0;
}
li:hover ul {
  display: block;
}

Самое главное здесь - это селектор "li:hover ul". Фактически, он и показывает содержимое меню. По умолчанию, оно "display: none", а при наведении курсора на пункт меню, подменю становится: "display: block", то есть видимым. Это самое главное. Также в первых двух селекторах (которые со *) идёт CSS-хак для IE, иначе без него в этом браузере ничего работать не будет. Всё остальное - это внешний вид, который, безусловно, можно менять.

Привожу и HTML-код:

<ul>
  <li>
    <a href="#">Главная</a>   </li>
  <li>
    <a href="#">Меню 1</a>
    <ul>
      <li>
        <a href="#">Подменю 1</a>
      </li>
      <li>
        <a href="#">Подменю 2</a>
      </li>
      <li>
        <a href="#">Подменю 3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Меню 2</a>
    <ul>
      <li>
        <a href="#">Подменю4</a>
      </li>
      <li>
        <a href="#">Подменю 5</a>
      </li>
      <li>
        <a href="#">Подменю 6</a>
      </li>
      <li>
        <a href="#">Подменю7</a>
      </li>
      <li>
        <a href="#">Подменю 8</a>
      </li>
    </ul>
  </li>
</ul>

Если внимательно вдуматься в эту структуру, то становится всё очень понятно. Тег ul - создаёт меню. Если ul находится внутри другого ul, то это уже подменю. А тег li отвечает за конкретный пункт меню.

Разумеется, меню самое наипростейшее, как с точки зрения логики и структуры, так и с точки зрения дизайна. Разумеется, можно с помощью JQuery сделать плавное раскрытие. Можно также изменить дизайн, но весь принцип останется тем же, что и в этом подменю, написанном на CSS и HTML.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (46):

DantE777 DantE777 03.08.2011 16:02:46

Спасибо за статью Михаил!Она оказалась очень полезной. Скажите,а как создать например в "Подменю 1" подменю второго уровня?

Ответить

Admin Admin 05.08.2011 14:38:26

Аналогично, внутри подменю 1-го уровня добавить очередной <ul>.

Ответить

aneryadov aneryadov 10.12.2014 15:06:55

Думаю, что аналогично нужно и в CSS добавить строки. Если этого не сделать - то будет некрасивость)

Ответить

stalker777 stalker777 14.08.2011 10:47:58

А куда нужно написать сss код? У меня получается только html код

Ответить

Alim_(I) Alim_(I) 15.08.2011 11:24:21

В отдельный CSS файл (style.css -> открыть с помощью Notepad (или другой текстовый редактор)) , или в тег <style> в теге <head>

Ответить

Ivanec Ivanec 13.11.2011 17:41:22

Статья действительно оказалась полезной, спасибо. Возник только один вопрос: что делать если вместо меню 1 и меню 2 мне нужно поставить изображение?

Ответить

Admin Admin 13.11.2011 17:44:46

Написать тег <img>.

Ответить

Ivanec Ivanec 13.11.2011 18:37:49

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

Ответить

Admin Admin 13.11.2011 18:51:09

Вот так нужно вставлять img: <a href="#"><img src="image.jpg" alt="Изображение" /></a>

Ответить

Ivanec Ivanec 13.11.2011 19:03:11

ничего не изменилось

Ответить

Admin Admin 13.11.2011 19:06:44

Значит, смотрите на саму картинку. Возможно, там много белого фона, который при этом, безусловно, частью картинки является. У меня же всё почему-то работает.

Ответить

Ivanec Ivanec 13.11.2011 19:25:03

а вот на это я внимания не обратил, спасибо большое

Ответить

Tooloop Tooloop 18.05.2012 14:38:32

Здравствуйте Михаил, я сделал меню через программу CSS3 Menu если вы знаете как вставить меню через эту программу подскажите

Ответить

Admin Admin 18.05.2012 14:41:01

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

Ответить

BotaniQue BotaniQue 31.07.2012 14:04:13

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

Ответить

Admin Admin 31.07.2012 21:16:49

Тут никаких проблем быть не должно. Проверьте правильно ли прописали background-color:transparent;

Ответить

BotaniQue BotaniQue 01.08.2012 15:08:03

Вот часть кода CSS, отвечающая за неупорядоченный список. Куда вставлять свойство background-color:transparent; ? .header ul a{ list-style: none; margin: 2px 2px 2px 0; padding: 0; width: 100%; text-align: center; background-image: -moz-linear-gradient(bottom, #FFA500, #999999); /* FF3.6 */ background-image: -o-linear-gradient(bottom, #FFA500, #999999); /* Opera 11.10+ */ background-image: -webkit-gradient(linear, left top, left bottom, from(#FFA500), to(#999999)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(bottom, #FFA500, #999999); /* Chrome 10+, Saf5.1+ */ border-radius: 17px; -moz-border-radius: 17px; } .header ul { list-style: none; margin: 0; padding: 0; width: 100%; text-align: center; opacity: 0.24; } .header ul { position: relative; text-align: center; } .header li { position: relative; text-align: center; } .header ul li a { display: block; border: none; padding-top: 20px; padding-bottom: 20px; padding-left: 0px; padding-right: 0px; text-decoration: none; font-style: normal; font-variant: normal; font-weight: bold; font-size: 115%; font-family: arial, sans-serif; text-transform: uppercase; text-align: center; color: #000000; }

Ответить

Admin Admin 01.08.2012 22:37:07

Видимо у Вас проблема в наследовании свойства opacity. Добавьте его не в ul а в .header ul li a {}

Ответить

BotaniQue BotaniQue 02.08.2012 00:38:42

Поменял. Что делать дальше? Куда вставлять свойство background-color:transparent; ?

Ответить

Admin Admin 02.08.2012 12:59:19

В Вашем случае не нужно, так как у Вас градиент в этих менюшках, а не фоновый цвет. opacity должно хватить, но оно распространяется на все дочерние элементы.

Ответить

BotaniQue BotaniQue 02.08.2012 13:12:06

То-есть, нельзя сделать фон прозрачным, а текст непрозрачным?

Ответить

Admin Admin 02.08.2012 13:39:03

Можно сделать сам градиент прозрачным. Строчка для мозиллы будет выглядеть примерно так: -moz-linear-gradient(bottom, rgba(255,163,0,0.24) 0%, rgba(255,255,255,0.24) 100%) Суть в том что все цвета надо задавать в rgba, где последний аргумент меняет прозрачность.

Ответить

BotaniQue BotaniQue 02.08.2012 13:54:48

Спасибо. В Mozilla работает. Прописую -o-linear-gradient(bottom, rgba(255,163,0,0.54) 0%, rgba(255,255,255,0.54) 100%); и в Опере не работает (((

Ответить

Admin Admin 02.08.2012 23:57:54

Везде цвета замените на rgba(). Только проценты не нужно копировать.

Ответить

BotaniQue BotaniQue 03.08.2012 12:12:14

Спасибо большое. Работает. А может быть Вы знаете какие нибудь хорошие сервисы, где можно одновременно смотреть одну и ту же страницу во всех возможных браузерах?

Ответить

Admin Admin 03.08.2012 14:51:06

Я использовал только IETester, так как трудно держать под рукой сразу множество версий IE.

Ответить

BotaniQue BotaniQue 03.08.2012 15:42:47

Спасибо

Ответить

fabrigas201 fabrigas201 08.08.2012 20:15:51

тут не то что трудно, возможно только одну версию IE держать

Ответить

BotaniQue BotaniQue 13.08.2012 15:45:13

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

Ответить

Admin Admin 13.08.2012 21:19:45

Чтобы меню было горизонтальным, нужно display не block ставить, а inline. Ну и ширину поменять на нужную. А по центру выровнять внешний блок, в котором оно находится.

Ответить

Eric Eric 20.09.2014 18:59:53

Какой из двух?

Ответить

viktor viktor 12.12.2012 12:06:19

Михаил спасибо за статью, меню сделал без проблем. Но как добавлять материал в категории, ведь в БД этой менюшки нет?

Ответить

Admin Admin 12.12.2012 13:57:39

Изучить PHP и MySQL, вот базовый курс: http://srs.myrusakov.ru/freephp

Ответить

viktor viktor 07.01.2013 12:54:59

Спасибо. А как сделать многоуровневое меню, к примеру вот так: http://clip2net.com/s/2GiK1

Ответить

Admin Admin 07.01.2013 16:33:17

Продолжить внутри очередного <li> создавать новый <ul>.

Ответить

alina alina 01.04.2013 11:59:04

Здраствуйте Михаил,я создала выпадающее меню,но хотелось бы ,чтобы оно открывалась не по правому краю,а вниз,как это делать.

Ответить

Admin Admin 01.04.2013 17:05:22

http://myrusakov.ru/css-submenu-hor.html

Ответить

mike153 mike153 30.08.2013 14:40:00

Михаил подскажите пожалуйста как сделать это подменю ниже http://s60.radikal.ru/i168/1308/18/01c0e63c431d.png

Ответить

Admin Admin 30.08.2013 19:20:08

Применяйте позиционирование с помощью css

Ответить

mike153 mike153 30.08.2013 19:50:15

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

Ответить

roman6304 roman6304 24.06.2014 19:38:30

здравствуйте. у меня вопрос по схожему меню.Если несложно, подскажите: меню здесь- http://astrological-prediction.ru/ как главное меню отцентрировать на странице, но так чтобы выпадающее подменю не смещалось вместе с верхним. т.е. чтобы к центру сместились только буквы главного меню, а всё остальное осталось как есть?

Ответить

tikkiwiki tikkiwiki 25.06.2014 09:49:28

Задайте размеры фиксированные, а не на всю ширину страницы.

Ответить

littus littus 27.11.2014 14:16:51

Не получилось что-то у меня, чтобы из уровня ПодМЕНЮ выпадало еще МЕНЮ. В HTML создал, внутри очередного <li> (уровня ПодМЕНЮ), новый <ul> с ячейками <li>.Это понятно. Оно отобразилось. Но в SCC не понял как правильно прописать свойства для вновь добавленных элементов списка. Попробовал скопировать свойства для li ul и li:hover ul но для новых элементов, но не работает или работает совсем не корректно. Михаил, не могли бы Вы привести пример как прописать для уровня подМЕНЮ дополнительное выпадающее меню. Спасибо.

Ответить

tikkiwiki tikkiwiki 28.11.2014 14:23:34

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

Ответить

kate1977 kate1977 01.04.2015 19:56:40

Почему несмотря на хаки подменю в IE не выпадает? В других браузерах все работает нормально. Какая может быть ошибка?

Ответить

umaxi umaxi 16.12.2015 20:49:04

как выровнять меню по середине с возможностью добавления новых пунктов меню

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.