Jump to content

Recommended Posts

Доброго времени суток!

Как можно сделать вот такое вот меню?

 

post-670395-0-56822600-1376133374_thumb.png

Share this post


Link to post
Share on other sites

Доброго времени суток!

Как можно сделать вот такое вот меню?

качаете версию 1.4.9 ставите на локалку, открываете фаербаг и копируете, или у вас вопрос по какому-то конкретному элементу?

Share this post


Link to post
Share on other sites

да. именно вопрос как сделать этот элемент меню

Share this post


Link to post
Share on other sites

как-то так

#menu {
border-bottom: 2px solid #BFA447;
height: 39px;
margin-bottom: 15px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu > ul > li {
position: relative;
float: left;
z-index: 20;
}
#menu > ul > li > a {
color: #494D56;
display: block;
font-family: Arial;
font-size: 12px;
font-weight:bold;
line-height: 14px;
margin-bottom: 5px;
padding: 12px 20px;
position: relative;
text-decoration: none;
z-index: 6;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
border-top-right-radius: 5px;
border-top:1px solid #C2CFE0;
border-left:1px solid #C2CFE0;
border-right:1px solid #C2CFE0;


}
#menu > ul > li > a.active{
background:#494D56;
color:#fff;
}
#menu > ul > li:hover > a {
border-top:1px solid #BFA447;
border-left:1px solid #BFA447;
border-right:1px solid #BFA447;
background:#fff;
padding-bottom:14px;
}
#menu > ul > li > div {
display: none;
background: #FFFFFF;
position: absolute;
top:40px;
z-index: 5;
padding: 5px;
border:1px solid #BFA447;
-webkit-border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-khtml-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
}
#menu > ul > li:hover > div {
display: table;
}
#menu > ul > li > div > ul {
display: table-cell;
}
#menu > ul > li ul + ul {
padding-left: 20px;
}
#menu > ul > li ul > li > a {
text-decoration: none;
padding: 4px;
color: #3374FF;
display: block;
white-space: nowrap;
min-width: 120px;
}
#menu > ul > li ul > li > a:hover {
background: #eeeeee;
}
#menu > ul > li > div > ul > li > a {
color: #3374FF;
}

  • +1 1

Share this post


Link to post
Share on other sites

как-то так

#menu {

border-bottom: 2px solid #BFA447;

height: 39px;

margin-bottom: 15px;

}

#menu ul {

list-style: none;

margin: 0;

padding: 0;

}

#menu > ul > li {

position: relative;

float: left;

z-index: 20;

}

#menu > ul > li > a {

color: #494D56;

display: block;

font-family: Arial;

font-size: 12px;

font-weight:bold;

line-height: 14px;

margin-bottom: 5px;

padding: 12px 20px;

position: relative;

text-decoration: none;

z-index: 6;

-moz-border-radius-topleft: 5px;

-webkit-border-top-left-radius: 5px;

border-top-left-radius: 5px;

-moz-border-radius-topright: 5px;

-webkit-border-top-right-radius: 5px;

border-top-right-radius: 5px;

border-top:1px solid #C2CFE0;

border-left:1px solid #C2CFE0;

border-right:1px solid #C2CFE0;

}

#menu > ul > li > a.active{

background:#494D56;

color:#fff;

}

#menu > ul > li:hover > a {

border-top:1px solid #BFA447;

border-left:1px solid #BFA447;

border-right:1px solid #BFA447;

background:#fff;

padding-bottom:14px;

}

#menu > ul > li > div {

display: none;

background: #FFFFFF;

position: absolute;

top:40px;

z-index: 5;

padding: 5px;

border:1px solid #BFA447;

-webkit-border-radius: 0px 0px 5px 5px;

-moz-border-radius: 0px 0px 5px 5px;

-khtml-border-radius: 0px 0px 5px 5px;

border-radius: 0px 0px 5px 5px;

}

#menu > ul > li:hover > div {

display: table;

}

#menu > ul > li > div > ul {

display: table-cell;

}

#menu > ul > li ul + ul {

padding-left: 20px;

}

#menu > ul > li ul > li > a {

text-decoration: none;

padding: 4px;

color: #3374FF;

display: block;

white-space: nowrap;

min-width: 120px;

}

#menu > ul > li ul > li > a:hover {

background: #eeeeee;

}

#menu > ul > li > div > ul > li > a {

color: #3374FF;

}

Благодарю. Именно то что я и искал

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Similar Content

    • By Gilbert
      Как убрать прокрутку сайта вверх при добавлении товара в корзину? http://aquadom-group.ru/
    • By owner1
      Добрый день. Сайт: https://элит-маркет.рф/ . OcStore 2.3. Требуется исполнитель, способный переделать шапку по тз и подправить карточку товара. Все подробности и само тз скину в личку.
    • By sashamaximiv
      Здравствуйте. Есть шапка с таким дизайном:
      https://prnt.sc/s5ize9
       
      После клика по иконке добавить в закладки, сайт почему то добавляет этой иконке текст:
      https://prnt.sc/s5j024
       
       
      Такое еще было при удалении или добавления товара в корзину на иконке корзины. Не могу найти тему. Подскажите кто знает.

      Двиг: опенкарт 2.3.0.2
      шапка стандарт
      ссылка http://c97046u6.beget.tech/
       
       
       
       
       
    • By inguard
      300.00 руб
      Скачать/Купить дополнение


      Модерн Меню
      Не изменяет файлы движка! Не использует VQMOD!
      Мультиязычный!
      Для ocStore 1.5.4.x, 1.5.5.x
      Поддержка браузеров IE 8+, Chrome, Safari, Opera, Firefox
      Модуль Модерн Меню заменяет стандартное горизонтальное меню на выбранных схемах (макетах, страницах) сайта.
      В Модерн Меню выводятся элементы Категории с выпадающим блоком с изображениями и описаниями категорий.
      Если есть подкатегории, в блоке категории выводится элемент с выпадающим блоком ссылок с изображениями подкатегорий.

      В Модерн Меню выводится также элемент Производители с выпадающим блоком
      с изображениями и описаниями производителей, и с ссылками на них.
      Элементы Категории и Производители можно отключить из админ-панели настроек модуля.

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


      Важно! Модуль для шаблонов свёрстанных на основе дефолтного!
      Для нестандартных шаблонов надо будет править пару строк в файле стилей модуля.
      Меню (временно) не адаптивное.
      Инструкция по настройкам модуля прилагается.
      Лицензия: Одна покупка - один сайт.
      При обновлениях с улучшением/расширением функционала модуля
      цена будет повышаться!
      Для покупателей все дальнейшие обновления бесплатны!
      Демо
      Демо админки логин/пароль demo/demo
      Если модуль понравился, не забываем про звёздочки :-)
      Добавил inguard Добавлено 13.07.2014 Категория Модули  
    • By Orkh3ll0
      Всем Привет,

      Я новенький в opencart. Хочу добавить в id="top-links"  свои ссылки.Но хочу сделать это правильно, что бы менялся текст при смене языка. Для этого я должен определить переменную PHP. Я уже создал в "Статьи" новую, все написал и взял ссылку на эту статью. Как мне определить PHP переменную и просто вводить например так?

      "Contact" тут является ссылкой, в  "telephone" является имя ссылки.
      <li><a href="{{ contact }}"><i class="fa fa-phone"></i></a> <span class="hidden-xs hidden-sm hidden-md">{{ telephone }}</span></li> Как мне создать например вот то что внизу? Где добавлять ссылки и переменные?
       
      <li><a href="{{ about_me_link }}"><i class="fa fa-phone"></i></a> <span class="hidden-xs hidden-sm hidden-md">{{ my_info-link-name }}</span></li>  
  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.