Question

Здраствуйте.

Можно ли перенести дизайн меню мобильного меню с одного сайта на другой? Просто сейчас появились новые шаблоны и у них очень удобное адаптивное(мобильное меню) которое выезжает сбоку например как на 1-2 фото, а 3 фото это мой тестовый сайт. Можно ли это сделать без смены шаблона?

Answer 1

Вместо кода вашего меню установить в шапке сайта код:

<nav> <div id="catmenu"> <!-- <sblock_nmenu> --> <?if($NMENU_1$)?> <!-- <bc> -->$NMENU_1$<!-- </bc> --> <?endif?> <!-- </sblock_nmenu> --> </div> </nav>

<script type="text/javascript" src="/.s/t/1710/ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>

Comments

В стили прописать:

.nav_menu_toggler{padding:19px 21px 19px 90px;cursor:pointer}
.nav_menu_toggler span{display:block;width:4px;height:4px;background-color:#e64c53;border-radius:50%;margin:1px 5px}
.navItemMore:hover .nav_menu_toggler span{background-color:#fff;transition:all .3s ease}
#catmenu ul,#catmenu li{padding:0;margin:0;list-style:none}
#catmenu ul.uMenuRoot{height:55px;overflow:hidden}
#catmenu ul.uMenuRoot.visible{height:auto;width:100%}
#catmenu ul.uMenuRoot.visible>li{display:inline-block!important}
#catmenu li{display:inline-block;word-wrap:initial;vertical-align:top}
#catmenu li a{display:inline-block;height:55px;padding:0 15px;font-size:13px;color:#fff;font-family:'Open Sans';font-weight:600}
#catmenu li a span{padding-bottom:5px;border-bottom:2px solid transparent;transition:all .2s ease;padding:18px 0 17px;display:inline-block;position:relative}
#catmenu li a span:after{margin-top:4px;content:'';display:block;height:2px;width:0;background:#e64c53;position:absolute}
#catmenu li a:hover span:after,#catmenu li a.uMenuItemA>span:after{width:100%;transition:all .25s ease}
#catmenu .uWithSubmenu li a span,#overflow li a span{padding:10px 0}
#catmenu .menu_tog{color:#fff;position:absolute;top:calc(50% - 6px);font-size:13px;right:7px;cursor:pointer}
#catmenu li.uWithSubmenu a{padding-right:25px}
#catmenu .uWithSubmenu ul li a,a.archiveEntryTitleLink,#uEntriesList .uphoto a{font-weight:400}
#catmenu li a:hover,#catmenu li a.uMenuItemA,#catmenu li.uWithSubmenu:hover>a{color:#fff;text-decoration:none}
div#catmenu{padding:0 30px 0 20px;position:relative}
nav ul li.navItemMore{display:none;position:absolute;right:10px;top:0;margin-bottom:-1px!important;padding-bottom:1px!important}
nav ul li.navItemMore:hover ul#overflow{opacity:1;visibility:visible;display:block;transition:all 1s ease}
nav #overflow{opacity:0;visibility:hidden;position:absolute;text-align:left;transition:all 1s ease}
nav #overflow li{float:none}
#catmenu ul ul#overflow,ul#overflow li ul{left: auto;left:initial;right:-10px}
ul#overflow li.uWithSubmenu ul{left: auto;left:initial;right:100%}
#catmenu #overflow li.uWithSubmenu .menu_tog{right: auto; right:initial;left:5px;-webkit-transform:rotate(90deg)!important;transform:rotate(90deg)!important}
#catmenu #overflow li a{padding:0 15px 0 25px}
#catmenu li.uWithSubmenu:hover>ul,#catmenu ul ul li,.archActive{display:block}
#catmenu ul ul{position:absolute;z-index:20;width:219px;top:55px;left:0;background-color:#574e82;box-shadow:0 2px 5px rgba(0,0,0,0.15)}
#catmenu ul ul ul{top:0;left:219px;border-top:0}
#catmenu ul ul li a,#catmenu ul ul li a:hover,#catmenu li li a.uMenuItemA,#catmenu li li.uWithSubmenu:hover>a{display:block;height:auto;line-height:normal}
.nav-head{padding:0 5px 0 5px;margin-left:10px;color:#e64c53;cursor:pointer;vertical-align:middle}
.nav-head a{color:#fff;text-decoration:none;vertical-align:middle}

@media only screen and (max-width:960px){

@supports(display:flex){div#casing{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;-o-flex-wrap:wrap;flex-wrap:wrap;}}

.nav_menu_toggler{display:none!important}

#catmenu .menu_tog{right:0}

.nav-head{display: inline-block;}

div#uNMenuDiv1:before{content:'close';position:absolute;color:#fff;font-family:"Material Icons";font-size:20px;padding:17px;-webkit-font-feature-settings:'liga' 1;font-feature-settings:'liga' 1;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}

}

@media only screen and (max-width:640px){.mobile-menu-container,.mm-wrapper{width: 50%;}}

 

 

}@media only screen and (max-width:480px){ul.shop-tabs.with-clear li a{width:100%}

.mobile-menu-container,.mm-wrapper{width: 60%;}

}@media (max-width:360px){

.mobile-menu-container,.mm-wrapper{width: 70%;}

.nav-head .icon{position:absolute;width:40px;right:20px;top:12px}

}

/*** Slider Menu Styles** @version 1.0.0*/

.slider-menu{overflow:hidden;}

.slider-menu__container{position:relative;top:0;left:0;transition:left .2s}

.slider-menu__menu{margin:0;padding:0;list-style:none}

.slider-menu__menu .slider-menu__menu{position:absolute;top:0;left:100%;width:100%;opacity:0;transition:opacity .2s;visibility:hidden}

.slider-menu__menu .slider-menu--active{opacity:1;visibility:visible}

.slider-menu__item--vertical .slider-menu__back{display:none}

.slider-menu__item--vertical .slider-menu__menu{position:relative;top:auto;left:auto;display:none;visibility:visible;opacity:1}

.slider-menu{font-weight:600}

.slider-menu__back .slider-menu__text{display:block;width:16px;height:16px;color:transparent;-moz-mask-image:url(/.s/t/1710/arrow.svg);-webkit-mask-image:url(/.s/t/1710/arrow.svg);mask-image:url(/.s/t/1710/arrow.svg);-moz-mask-size:cover;-webkit-mask-size:cover;mask-size:cover;background-color:rgba(37,37,37,.3);-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:#fff}

.slider-menu__back:hover .slider-menu__text{background-color:#fff}

.slider-menu__desc:before{content:'- '}

.slider-menu__item{padding: 0 15px;}

.slider-menu__link{display:block;text-decoration:none;color:#fff;padding:10px 0;transition:all .2s;border-bottom: 1px solid #5f568e;font-size: 16px;}

.slider-menu__link:hover .slider-menu__desc{color:#fff}

.slider-menu__item:active{background-color:#252525}

.slider-menu__link--active-link .slider-menu__desc{color:#fff}

.slider-menu--has-children>.slider-menu__link:before{float:right;content:"";display:block;width:12px;height:12px;margin-top:4px;transition:transform .2s,margin-top .2s;-moz-mask-image:url(/.s/t/1710/arrow.svg);-webkit-mask-image:url(/.s/t/1710/arrow.svg);mask-image:url(/.s/t/1710/arrow.svg);-moz-mask-size:cover;-webkit-mask-size:cover;mask-size:cover;background-color:#fff}

.slider-menu--has-children > .slider-menu__link:hover:before{background-color:#fff}

.slider-menu__item--vertical .slider-menu__menu .slider-menu__link:hover{color:#fff}

.slider-menu__item--vertical.slider-menu--has-children > .slider-menu__link:before{-ms-transform:rotate(90deg);-webkit-transform:rotate(90deg);transform:rotate(90deg);margin-top:6px}

.slider-menu__item--vertical.slider-menu--has-children > .slider-menu__link.slider-menu__link--active-link:before{background-color:#fff;-ms-transform:rotate(270deg);-webkit-transform:rotate(270deg);transform:rotate(270deg);margin-top:4px}

@-moz-document url-prefix(){

.slider-menu--has-children > .slider-menu__link:before,.slider-menu--has-children > .slider-menu__link:hover:before,.slider-menu__item--vertical.slider-menu--has-children > .slider-menu__link.slider-menu__link--active-link:before,.slider-menu__back .slider-menu__text {background-color: transparent !important;background-repeat: no-repeat}

.slider-menu--has-children > .slider-menu__link:before,.slider-menu__back .slider-menu__text {background-image: url('/.s/t/1710/arrow.svg')}

}

---

Yuri_Geruk,

Сделал как вы сказали, получилось вот так.

---

Andrey Churl,

Ссылку на сайт предоставьте где вы его установили.

---

Yuri_Geruk,

http://tested-1.do.am/

---

Andrey Churl,

Поправьте скрипт:

<script type="text/javascript" src="/.s/t/1710/ui.js"></script>

загрузите себе на фтп скрипт http://9bclass.ucoz.ru/.s/t/1710/ui.js и после пропишите ссылку на него в скрипте выше так как сейчас он у вас не подгружается http://tested-1.do.am/.s/t/1710/ui.js 

Плюс этого кода над меню быть не должно:

<div id="show-menu" class="show-menu"></div>

---

Yuri_Geruk,

Сделал как Вы сказали стало так

Но если убирать вот это <div id="show-menu" class="show-menu"></div>

То становится вот так 

А если оставить то вот так

Всё равно даже если не получится огромное Вам спасибо. Вы всегда своевременно и развёрнуто отвечаете. Спасибо.

---

Andrey Churl,

Предоставьте код глобального блока верхняя часть сайта.

---

Yuri_Geruk,

<header>
 <div id="top" class="clearfix">
 <div class="t-container">
 <?if($SEARCH_FORM$)?>
 <div id="show-search" class="show-search"></div>
 <div id="b-search" class="b-search pull-right b-search-min">
 $SEARCH_FORM$
 </div>
 <?endif?>
 <div id="show-menu" class="show-menu"></div> 
 <nav>
<nav> <div id="catmenu"> <!-- <sblock_nmenu> --> <?if($NMENU_1$)?> <!-- <bc> -->$NMENU_1$<!-- </bc> --> <?endif?> <!-- </sblock_nmenu> --> </div> </nav>
<script type="text/javascript" src="http://tested-1.do.am/ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>

 </nav>
 </div>
 </div>
 <div class="b-usermenu t-container">

<?if not($USER_AGENT_PDA$)?><?if($USER_LOGGED_IN$)?> 

<div class="profile"> 
<div class="profile-menu"> 
 <a href="$PERSONAL_PAGE_LINK$" class="profile-button"><?if($UNREAD_PM$>0)?><s>$UNREAD_PM$</s><?endif?><span class="profile-avatar"><img src="<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?else?>/.s/t/1090/logo-img.png<?endif?>" alt="" /></span> $USER_FULL_NAME$ <i></i></a> 
 <div class="profile-list"> 
 <div class="profile-list-in"> 
 <a href="$PERSONAL_PAGE_LINK$">Мой профиль</a> 
 <a href="$PM_URL$"><?if($UNREAD_PM$>0)?><i>$UNREAD_PM$</i><?endif?>Сообщения</a> 
 <a href="$USERS_LIST_URL$">Пользователи</a> 
 <a href="/index/11">Настройки</a> 
 <a href="$LOGOUT_LINK$" class="last">Выйти</a> 
 </div> 
 </div> 
</div> 
</div> 

<?else?> 

<div class="profile"> 
<div class="profile-menu"> 
 <a href="$PERSONAL_PAGE_LINK$" class="profile-button"><span class="profile-avatar"><img src="http://churlenisa.do.am/dizain_saita/search_user_LS/no_avatar.png" alt="" /></span> Личный кабинет <i></i></a> 
 <div class="profile-list"> 
 <div class="profile-list-in"> 
 <a href="$REGISTER_LINK$">Регистрация</a> 
 <a href="$LOGIN_LINK$" class="last">Вход</a> 
 </div> 
 </div> 
</div> 
</div> 
<?endif?><?endif?>
 
<?if($USER_AGENT_PDA$)?><?if($USER_LOGGED_IN$)?>
 <a title="Мой профиль" href="$PERSONAL_PAGE_LINK$"><!--<s5214>-->Профиль($USERNAME$) ^$UNREAD_PM$<!--</s>--></a>|
 <a title="Выход" href="$LOGOUT_LINK$"><!--<s5164>-->Выход<!--</s>--></a>
 <?else?>
 <a title="Регистрация" href="/index/3"><!--<s3089>-->Регистрация <!-- <Удалить и вписать Регистрация> --> <!--</s>--></a> | 
 <a title="Вход" href="/index/1"><!--<s3087>-->Вход<!--</s>--></a>
 <?endif?> <?endif?> 
</header>

---

Andrey Churl,

Как говорил удалить:

<div id="show-menu" class="show-menu"></div>

а скрипты:

<script type="text/javascript" src="http://tested-1.do.am/ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>

удалите с шапки сайта и поместите перед тегом </body>

---

Yuri_Geruk,

Удалил <div id="show-menu" class="show-menu"></div>

<script type="text/javascript" src="http://tested-1.do.am/ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script> удалил и вставил перед </body> на "Страницы сайта"

всё так же

 

---

Andrey Churl,

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

---

Yuri_Geruk,

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

---

Andrey Churl,

Извиняюсь за навязчивость, но можно дать код CSS и скрипт от меню дизайна #1322. И если дадите то вопрос - все устанавливать так же?

---

Andrey Churl,

Да, устанавливается аналогично и стили и скрипт устанавливаются с того шаблона.

---

Yuri_Geruk,

А где там взять скрипт и CSS?

---

Andrey Churl,

Скрипт в страницах шаблонах перед боди, а стили в таблице стилей.

Answer 2

Можно, но без хорошего знания html css  и java, будет сложно...