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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • 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)
       
      Какие мне элементы использовать в коде, чтобы выравнивание всех блоков меню (который появляется при нажатии на кнопку) происходило по центру самого блока относительно кнопки? Как правильно выровнять блок относительно кнопки?
       



    • By garmoni
      Нашла анимацию гамбургер меню из трех полосок в крестик. Не могу понять как к нему прикрепить появление самого меню при нажатии.
      <nav class="nav"> <div class="nav__btn"> <a id="nav-toggle" href="#"><span></span> </a> </div> <ul class="nav__list"> <li> <a href="#" class="nav__link">Episodes</a> </li> <li> <a href="#" class="nav__link">Characters</a> </li> <li> <a href="#" class="nav__link">Park</a> </li> <li> <a href="#" class="nav__link">Gallery</a> </li> <li> <a href="#" class="nav__link">actors</a> </li> </ul> </nav> $(document).ready(function(){ $('#nav-toggle').click(function(){ $(this).toggleClass('active'); }); .nav__list { display: none; } #nav-toggle {position: relative; display: inline-block; width:42px; height:25px;} #nav-toggle span { position: absolute; left: 0; top: 10px; } #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { position: absolute; display: block; content: ''; height: 5px; width: 42px; background: #000; border-radius: 2px; cursor: pointer; } #nav-toggle span:before { top: -10px; } #nav-toggle span:after { bottom: -10px; } /* Добавим анимацию всех свойств для блоков нашей иконки */ #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { transition: all 500ms ease-in-out; } /* Центральный блок делаем прозрачным */ #nav-toggle.active span { background-color: transparent; } /* Смещаем псевдо-элементы в центр иконки (на место основного блока) */ #nav-toggle.active span:before, #nav-toggle.active span:after { top: 0; } /* Наклоняем псевдо-элементы под углом 45 градусов, но в разные стороны */ #nav-toggle.active span:before { transform: rotate(45deg); } #nav-toggle.active span:after { transform: rotate(-45deg); }  
  • Member Statistics

    46,330
    Total Members
    3,128
    Most Online
    TimofejUS
    Newest Member
    TimofejUS
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.