Jump to content
  • Sign Up
Sign in to follow this  
Aiky

Готовое меню интегрировать как шаблон в Битрикс

Recommended Posts

Доброго времени суток! Я новичок в сфере Битрикс и PHP, поэтому общаться со мной на эти темы можно, как с пятилетней дурой :blush: .

Теперь по теме: был сверстан сайт на Html. В нем есть готовое меню, выглядит оно таким вот образом:

<div id="menu">                                            <div class="active" id="nav">                            <ul>                            <li class="active">                                <span class="outer_active">                                    <span>                                        <a class="active" href="index.html">                                            Главная                                            <span class="bottom_text"></span>                                        </a>                                        <span class="outer"></span>                                    </span>                                </span>                            </li>                            <li>                                <span class="outer_active">                                    <span>                                        <a href="about.html">О нас<span class="bottom_text"></span>                                        </a>                                        <span class="outer"></span>                                    </span>                                </span>                            </li>                            <li>                                <span class="outer_active">                                    <span>                                        <a>                                            Информация                                            <span class="bottom_text"></span>                                        </a>                                        <span class="outer"></span>                                    </span>                                </span>                                 <ul>                                    <li class="toparrow"></li>                                        <li class="noback">                                            <span>                                                <span class="span_nonactive">                                                    <a class="sub" href="ioyo.html">                                                      Общая информация об управляющей организации                                                    </a>                                                </span>                                            </span>                                        </li>                                        <li class="noback">                                            <span>                                                <span class="span_nonactive">                                                    <a class="sub" href="opfxd.html">                                                      Показатели финансово-хозяйственной деятельности                                                    </a>                                                </span>                                            </span>                                        </li>                                        <li class="noback">                                            <span>                                                <span class="span_nonactive">                                                    <a class="sub" href="iovr.html">                                                   Информация о выполняемых работах                                                    </a>                                                </span>                                            </span>                                        </li>                                        <li class="noback">                                            <span>                                                <span class="span_nonactive">                                                    <a class="sub" href="piyoy.html">                                                    Порядок и условия оказания услуг                                                    </a>                                                </span>                                            </span>                                        </li>                                        <li class="noback">                                            <span>                                                <span class="span_nonactive">                                                    <a class="sub" href="spkao.html">                                          Случаи привлечения к административной ответственности                                                    </a>                                                </span>                                            </span>                                        </li>                                        <li class="noback">                                            <span>                                                <span class="span_nonactive">                                                    <a class="sub" href="iosriy.html">                                            Информация о стоимости работ и услуг                                                    </a>                                                </span>                                            </span>                                        </li>                                        <li class="noback">                                            <span>                                                <span class="span_nonactive">                                                    <a class="sub" href="iocnkr.html">                                                  Информация о ценах на коммунальные ресурсы                                                    </a>                                                </span>                                            </span>                                        </li>                                                                               <li class="menubottom"></li>                                </ul>                            </li>                            <li>                                <span class="outer_active">                                    <span>                                        <a href="passport.html">                                            Паспортный стол                                            <span class="bottom_text"></span>                                        </a>                                        <span class="outer"></span>                                    </span>                                </span>                                                           </li>                            <li>                                <span class="outer_active">                                    <span>                                        <a href="payment.html">                                            Оплата услуг                                            <span class="bottom_text"></span>                                        </a>                                        <span class="outer"></span>                                    </span>                                </span>                                                            </li>                            <li>                                <span class="outer_active">                                    <span>                                        <a href="pribori.html">                                            Приборы учета                                            <span class="bottom_text"></span>                                        </a>                                        <span class="outer"></span>                                    </span>                                </span>                            </li>                            <li>                                <span class="outer_active">                                    <span>                                        <a href="http://fkr-mosreg.ru">                                            Капитальный ремонт                                            <span class="bottom_text"></span>                                        </a>                                        <span class="outer"></span>                                    </span>                                </span>                                                            </li>                            <li>                                <span class="outer_active">                                    <span>                                        <a href="contacts.html">Контакты<span class="bottom_text"></span>                                        </a>                                        <span class="outer"></span>                                    </span>                                </span>                            </li>                        </ul>                    </div>                    </div>

Также есть к нему вот такие стили

#nav ul li {	margin-left:0px;	position: relative;}#nav a {	color:#383838;	cursor:pointer;	display:block;	float:left;	font-size:14px;	font-weight:bold;	height:68px;	line-height:17px;	margin-left:25px;	margin-top:0;	overflow:hidden;	padding-left:0px;	padding-right:3px;	padding-top:25px;	text-decoration:none;	text-shadow:1px 1px #ffffff;}#nav a span {	display:block;	color:#383838;	font-weight:normal;	font-size:11px;}#nav li li a {	margin-left:0px;	line-height:35px;	margin-top:0px;	height: 30px;	background: none;	font-weight: normal;	padding: 0;	text-indent: 18px;}#nav li li {	text-align: left;	width: 400px;    float: left;    padding: 0;    background: none;	height:30px;	padding-top:0px;}#nav ul li ul li a {    font-size:12px; 	line-height:28px;    font-weight: normal; 	;	width:400px; }#nav ul li a {    background: none; } #nav ul li ul li {	width:400px;    background:transparent url(images/fusion_ddmenumidh.png) repeat-x scroll 0 -33px; }	#nav ul li ul li:hover {    background:transparent url(images/fusion_ddmenumidh.png) repeat-y 0px 0px; }   	 #nav {	position:relative;	z-index:2;	height: 30px;}#nav, #nav ul {	list-style: none;	padding-top: 0px;	padding-right: 0px;	padding-bottom: 0;	padding-left: 0px;}#nav ul {	float:left;	padding: 0;	margin: 0;	margin:-3px 0 0;}	#nav ul ul a {	display: block;	text-decoration: none;	width: 400px;	text-transform: none;}#nav li {    float: left;    padding: 0;	margin-right:0px;    background: none;    height: 51px;}#nav li ul {	top: 59px;	position: absolute;	left: -999em;	height: auto;	width:  400px;	border-width: 0;	margin: 0;	padding: 0;	margin-left:16px;    z-index: 4;}#nav li ul a {	font-weight: bold;	color:#FFFFFF;}#nav li ul ul {	width:400px;	margin: -70px 0 0 227px;}* html #nav li ul ul {	margin: -74px 0 0 227px;}#nav li:hover ul ul, #nav li:hover ul ul ul,#nav li:hover ul ul ul ul{	left: -999em;}#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{	left: 0;    position: absolute;}#nav li:hover ul {	left: 0;	background-position: 0 0;}#nav ul li:hover {	background:transparent;	color:#000000;}#nav li:hover span a{	color:#ffffff;}		#nav ul li:hover ul li span span a{	color:#ffffff;}			#nav ul li ul li:hover ul li span span a{			color:#ffffff;}								#nav ul li ul li ul li:hover ul li span span a{					color:#ffffff;}			#nav ul li ul li:hover span span a{			color:#ffffff;}				#nav ul li ul li ul li:hover span span a{				color:#ffffff;}								#nav ul li ul li ul li ul li:hover span span a{					color:#ffffff;}#nav ul li.active a {	background:transparent url(images/fusion_mmiddle.png) repeat-x scroll left 1pt;    color:#ffffff;	text-shadow:1px 1px #000000;}	#nav ul li:hover a{	background: transparent url(images/fusion_mmiddle.png) repeat-x scroll left 1pt;	color: #ffffff;	text-shadow: 1px 1px 1px #000000;	font-family: Tahoma, Geneva, sans-serif;	font-size: 14px;}		#nav ul li:hover ul li a{		background:transparent; 	    color:#ffffff;}			#nav ul li ul li:hover a{	    color:#ffffff;		width:400px;}			#nav li.active span.outer_active, #nav span.outer_active:hover, #nav ul li:hover span.outer_active {	background:transparent url(images/fusion_mleft.png) no-repeat scroll 0 1pt;	height:68px;}#nav ul li span.outer {	height:68px;	width:12px;	float:left;}					#nav ul li:hover span.outer, #nav ul li a.active:hover span.span_active, #nav ul li.active span.outer  {		height:68px;		width:23px;		float:left;		background:transparent url(images/fusion_mright.png) no-repeat scroll 0 1pt;}	#nav ul li span.outer, #nav ul li a.active span.span_active, #nav ul li.active span.outer  {		height:68px;		width:23px;}				#nav ul li ul li:hover span.span_active {			background:none;}#nav span.span_active, #nav span.span_active:hover {	height:53px;	width:6px;	float:left;	background:transparent url(images/fusion_mright.png) no-repeat scroll 0 1pt;}#nav ul li ul li span.span_active, #nav ul li ul li span.span_active:hover {	height:29px;}.outer_active {	display:block;	height:32px;	float:left;}	 #nav a span:hover, #nav li:hover a span, #nav li.active span, #nav li.over a span{	color:#cccccc;} 	#nav ul li li:hover span{	background:none;	color:#FFFFFF;}#nav ul li li span.span_active {	background:none;}	 /* Rounded menu top/bottoms */#nav ul li.toparrow, #nav ul li.toparrow:hover {	height:16px;	line-height:25px;	width:400px;	background:transparent url(images/fusion_ddmenutop.png) no-repeat scroll 0 0;}		#nav ul li.menubottom, #nav ul li.menubottom:hover {	background:transparent url(images/fusion_ddmenubot.png) no-repeat scroll 0 0;	height:17px;	line-height:25px;	width:400px;}

Задача такая: нужно интегрировать, или как это правильно называется(не сильна я в терминологии) данное меню в шаблон меню Битрикс. А так, как я не сильна ни в Битриксе, ни в PHP, шаблон template.php Битрикса вызывает у меня тихий ужОс. Огромная просьба, помогите с созданием этого дела, мучаюсь вторую неделю, перерыла все просторы рунета.

P.S. Еще раз прошу прощения за тупость. 

 

Share this post


Link to post
Share on other sites

хм... странно, в профиле вы мужчина, а разговариваете как женщина... :blink:

в любом случае, бесплатно вам никто делать не будет.

Share this post


Link to post
Share on other sites

хм... странно, в профиле вы мужчина, а разговариваете как женщина... :blink:

в любом случае, бесплатно вам никто делать не будет.

Я и не говорила, что мне нужно что-то сделать, я просила помочь, чтобы мое меню выглядело, как в моем html: http://s58.radikal.ru/i162/1412/e8/1c5804538747.png

А не как сейчас выглядит в Битрикс: http://s42.radikal.ru/i095/1412/a4/726ed55df421.png

Может, я просто что-то делаю не так:

<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?><?if (!empty($arResult)):?>                                            <div class="active" id="nav">                            <ul><?/*                            <li class="active">                                <span class="outer_active">                                    <span>                                        <a class="active" href="index.html">                                            Главная                                            <span class="bottom_text"></span>                                        </a>                                        <span class="outer"></span>                                    </span>                                </span>                            </li>                            <li>                                <span class="outer_active">                                    <span>                                        <a href="about.html">О нас<span class="bottom_text"></span>                                        </a>                                        <span class="outer"></span>                                    </span>                                </span>                            </li>                            <li>                                <span class="outer_active">                                    <span>                                        <a>                                            Информация                                            <span class="bottom_text"></span>                                        </a>                                        <span class="outer"></span>                                    </span>                                </span>                                 <ul>                                    <li class="toparrow"></li>                                        <li class="noback">                                            <span>                                                <span class="span_nonactive">                                                    <a class="sub" href="ioyo.html">                                                      Общая информация об управляющей организации                                                    </a>                                                </span>                                            </span>                                        </li>                                        <li class="noback">                                            <span>                                                <span class="span_nonactive">                                                    <a class="sub" href="opfxd.html">                                                      Показатели финансово-хозяйственной деятельности                                                    </a>                                                </span>                                            </span>                                        </li>                                        <li class="noback">                                            <span>                                                <span class="span_nonactive">                                                    <a class="sub" href="iovr.html">                                                   Информация о выполняемых работах                                                    </a>                                                </span>                                            </span>                                        </li>                                        <li class="noback">                                            <span>                                                <span class="span_nonactive">                                                    <a class="sub" href="piyoy.html">                                                    Порядок и условия оказания услуг                                                    </a>                                                </span>                                            </span>                                        </li>                                        <li class="noback">                                            <span>                                                <span class="span_nonactive">                                                    <a class="sub" href="spkao.html">                                          Случаи привлечения к административной ответственности                                                    </a>                                                </span>                                            </span>                                        </li>                                        <li class="noback">                                            <span>                                                <span class="span_nonactive">                                                    <a class="sub" href="iosriy.html">                                            Информация о стоимости работ и услуг                                                    </a>                                                </span>                                            </span>                                        </li>                                        <li class="noback">                                            <span>                                                <span class="span_nonactive">                                                    <a class="sub" href="iocnkr.html">                                                  Информация о ценах на коммунальные ресурсы                                                    </a>                                                </span>                                            </span>                                        </li>                                                                               <li class="menubottom"></li>                                </ul>                            </li>                            <li>                                <span class="outer_active">                                    <span>                                        <a href="passport.html">                                            Паспортный стол                                            <span class="bottom_text"></span>                                        </a>                                        <span class="outer"></span>                                    </span>                                </span>                                                           </li>                            <li>                                <span class="outer_active">                                    <span>                                        <a href="payment.html">                                            Оплата услуг                                            <span class="bottom_text"></span>                                        </a>                                        <span class="outer"></span>                                    </span>                                </span>                                                            </li>                            <li>                                <span class="outer_active">                                    <span>                                        <a href="pribori.html">                                            Приборы учета                                            <span class="bottom_text"></span>                                        </a>                                        <span class="outer"></span>                                    </span>                                </span>                            </li>                            <li>                                <span class="outer_active">                                    <span>                                        <a href="http://fkr-mosreg.ru">                                            Капитальный ремонт                                            <span class="bottom_text"></span>                                        </a>                                        <span class="outer"></span>                                    </span>                                </span>                                                            </li>                            <li>                                <span class="outer_active">                                    <span>                                        <a href="contacts.html">Контакты<span class="bottom_text"></span>                                        </a>                                        <span class="outer"></span>                                    </span>                                </span>                            </li>                          */?><?foreach($arResult as $arItem):if($arParams["MAX_LEVEL"] == 1 && $arItem["DEPTH_LEVEL"] > 1) continue;?><?if($arItem["SELECTED"]):?><li class="active"><a href="<?=$arItem["LINK"]?>" ><?=$arItem["TEXT"]?></a></li><?else:?><li><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li><?endif?><?endforeach?></ul></div>  <?endif?>

 

Share this post


Link to post
Share on other sites

А, все, и без вас справилась. Спасибо за не-помощь  :P

тут помогают, но помогают в том случае, когда видят что вы что-то пытались сделать, но у вас по каким-то причинам не получилось, а изначально вы ни кода, ни ссылки, ничего не предоставили что бы подтвердить свое участие в процессе ;)

всегда пожалуйста :P

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.
Note: Your post will require moderator approval before it will be visible.

Guest
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 Etaro
      Я не понимаю, в чём проблема в вертикальном выпадающем меню. Где я мог напортачить? Нужно сделать, чтобы колонки были по вертикали, а не по горизонтали.


    • By Sve
      Всем привет :)
      Пытаюсь сверстать свой первый макет, и возникла проблема с меню. Должно быть, как на первой картинке - это макет из фш.
      Выходит, как на второй, меню спадает вниз. 
      Прошу, пожалуйста, тыкните на ошибку в коде, и, если есть возможность, объясните. буду очень рада ответам!
      Код кидаю:
      *{margin: 0; padding: 0; outline: 0} .clearfix::after { content:""; height: 0; display: block; clear: both; } div .container { width: 1300px; margin: auto; background: #fff; } header { width: 100%; height: 130px; border-top: 8px solid #a292b3; position: fixed; z-index: 2; } .logo { margin: 30px 0 20px 170px; } .menu { float: right; margin-right: 145px; } .menu li { display: inline-block; list-style: none; padding: 35px; }  


    • By Рома
      Доброго дня!
      Есть многоуровневое меню (картинка 1)
      Жму на кнопку Каталог - открывается блок с дополнительным содержимым. В этом содержимом есть подменю и под-под меню. Проблема тут такая часть содержимого из правого под-под меню не умещается на экране. Все потому, что блок с доп. содержимым относительно кнопки КАТАЛОГ открывается с выравниванием по левой своей части.
      Вот код в этом положении
      .cs-menu-container .dropdown, ul.type-category li .sub-cate { position: absolute; top: auto; left: 0; z-index: 1000; float: none; min-width: 230px; padding: 0; margin: 0; border: 1px solid #cccccc; border-top:2px solid #c04a62; background: #fff; Что я делаю: 
      меняю значение left: на -200px;
      В итоге получаю нужное мне расположение (картинка 2)
      Но тут же исправляя одно я получаю вторую проблему: блок содержимого кнопки ИНФОРМАЦИЯ уходит далеко влево от самой кнопки вызова (картинка 3)
       
      Какие мне элементы использовать в коде, чтобы выравнивание всех блоков меню (который появляется при нажатии на кнопку) происходило по центру самого блока относительно кнопки? Как правильно выровнять блок относительно кнопки?
       



  • Member Statistics

    46,884
    Total Members
    1,451
    Most Online
    yalstudio
    Newest Member
    yalstudio
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Мы приглашаем в нашу команду опытного верстальщика для работы над клиентскими проектами. Что предстоит делать: Кроссбраузерная адаптивная вёрстка сайтов и отдельных web-страниц по предоставленным макетам; Кроссбраузерная адаптивная вёрстка сайтов и отдельных web-страниц по предоставленным макетам (ps, figma); Поддержка и доработка frontend-части действующих сайтов; Вёрстка писем. Требования: Экспертное владение CSS3, HTML5; Знание Photoshop достаточное для верстки макетов; Навыки кроссбраузерной, адаптивной верстки; Отличные знания JS, технологий Ajax, JSON; Хорошее знание jQuery, Bootstrap https://www.yalstudio.ru/company/vacancy/.  о нас и работев нашей компании
    • Оптимизированный хостинг для проектов на Bitrix: Управление сайтом Владельцы и администраторы сайтов на CMS Bitrix знают, что при всех преимуществах данной системы управления контентом важно правильно выбрать хостинг, так как она достаточно требовательна к ресурсам. Обычный shared-хостинг не всегда отвечает требованиям производительности, в особенности, когда речь идет об интернет-магазине с сотнями товарных единиц (SKU) и существенным потоком трафика. Пользователи не могут нормально взаимодействовать с контентом и просто покидают сайт, недовольные скоростью его работы. В результате владельцы теряют потенциальных покупателей, а с ними и возможную прибыль. Мы поставили перед собой задачу предоставить владельцам сайтов сервис, адаптированный под Bitrix: Управление сайтом, способный быстро и стабильно работать при большом количестве трафика и с большим объемом информации. Что из этого получилось, читайте в статье.
    • Более подробно о тестовом периоде здесь  ,могу сказать что это очень полезно для людей который изначально хотят проверить продукт
  • Popular Contributors

×
×
  • Create New...