OsClass и Bender — делаем плоское кроссбраузерное меню

Содержание:

  1. Пример меню
  2. Подготовка CSS
  3. Редактируем шапку
  4. Редактируем подвал
  5. Копируем скрипт и изображения
  6. Проверяем и наслаждаемся

Пример меню

Мне давно не давало покоя стандартное меню темы Bender в CMS  OsClass. С одной стороны всё минималистично, просторно и понятно, но с другой стороны — всё это очень простецки и не современно. Вот я и решил вплотную заняться этим вопросом. Заготовку для меню я нашёл на сайте codyhouse.co, где можно найти много полезных и модных штук. Пример меню можно увидеть тут.

Screen Shot 2014-07-20 at 15.11.32

А теперь я подробно расскажу вам, как сменить банальное меню Bender на современное и модное от codyhouse.co.

Поехали…

Подготовка CSS

Для начала сделаем резервную копию всей папки с темой Bender и приступим к подготовке файла стилей main.css

(/oc-content/themes/bender/css/main.css). В самом верху файла отчистим пару строк для нашего меню и вставим следующее:

 html, body {height: 100%;}
 body {font-size: 100%;font-family: "Titillium Web", sans-serif;}
 a {color: #6cac70;text-decoration: none;}
 .cd-img-replace {display: inline-block;overflow: hidden;text-indent: 100%;white-space: nowrap;}
 .overflow-hidden {overflow: hidden;}
 .cd-main-content {min-height: 100%;position: relative;background-color: #fff;z-index: 2;padding-top: 50px;
 -webkit-transform: translateZ(0);
 -webkit-backface-visibility: hidden;
 -webkit-transition-property: -webkit-transform;
 -moz-transition-property: -moz-transform;
 transition-property: transform;
 -webkit-transition-duration: 0.4s;
 -moz-transition-duration: 0.4s;
 transition-duration: 0.4s;}
 .cd-main-content.lateral-menu-is-open {
 -webkit-transform: translateX(-260px);
 -moz-transform: translateX(-260px);
 -ms-transform: translateX(-260px);
 -o-transform: translateX(-260px);
 transform: translateX(-260px);}
 @media only screen and (min-width: 768px) {.cd-main-content {padding-top: 70px;}}
 header {position: fixed;top: 0;left: 0;height: 50px;width: 100%;background: rgba(53, 195, 217, 0.95);z-index:9999999999999999999999999999;-webkit-transform: translateZ(0);-webkit-backface-visibility: hidden;-webkit-transition-property: -webkit-transform;-moz-transition-property: -moz-transform;transition-property: transform;-webkit-transition-duration: 0.4s;-moz-transition-duration: 0.4s;transition-duration: 0.4s;}
 header.lateral-menu-is-open {
 -webkit-transform: translateX(-260px);
 -moz-transform: translateX(-260px);
 -ms-transform: translateX(-260px);
 -o-transform: translateX(-260px);
 transform: translateX(-260px);
 }
 header.is-fixed {position: fixed;}
 @media only screen and (min-width: 768px) {header {height: 70px;}}
 #cd-logo {display: block;float: left;margin: 12px 0 0 20px;}
 #cd-logo img {display: block;}
 #cd-top-nav {position: absolute;top: 0;right: 120px;height: 100%;display: none;}
 #cd-top-nav ul {height: 100%;padding-top: 18px;}
 #cd-top-nav li {display: inline-block;margin-right: 1em;}
 #cd-top-nav a {display: inline-block;padding: .5em;color: #FFF;font-weight: 600;font-size: 14px;}
 #cd-top-nav a.current {background-color: #242e30;}
 .no-touch #cd-top-nav a:hover {color: rgba(255, 255, 255, 0.7);}
 @media only screen and (min-width: 768px) {#cd-top-nav {display: block;}}
 #cd-menu-trigger {position: absolute;right: 0;top: 0;height: 100%;width: 50px;background-color: #2A9DAF;}
 #cd-menu-trigger .cd-menu-text {height: 100%;text-transform: uppercase;color: #FFF;font-weight: 600;display: none;}
 #cd-menu-trigger .cd-menu-icon {display: inline-block;position: absolute;left: 50%;top: 50%;bottom: auto;right: auto;
 -webkit-transform: translateX(-50%) translateY(-50%);
 -moz-transform: translateX(-50%) translateY(-50%);
 -ms-transform: translateX(-50%) translateY(-50%);
 -o-transform: translateX(-50%) translateY(-50%);
 transform: translateX(-50%) translateY(-50%);width: 18px;height: 2px;background-color: #FFF;}
 #cd-menu-trigger .cd-menu-icon::before, #cd-menu-trigger .cd-menu-icon:after {content: '';width: 100%;height: 100%;position: absolute;background-color: inherit;left: 0;
 -webkit-transform: translateZ(0);
 -webkit-backface-visibility: hidden;}
 #cd-menu-trigger .cd-menu-icon::before {bottom: 5px;}
 #cd-menu-trigger .cd-menu-icon::after {top: 5px;}
 #cd-menu-trigger.is-clicked .cd-menu-icon {background-color: rgba(255, 255, 255, 0);}
 #cd-menu-trigger.is-clicked .cd-menu-icon::before, #cd-menu-trigger.is-clicked .cd-menu-icon::after {background-color: white;}
 #cd-menu-trigger.is-clicked .cd-menu-icon::before {bottom: 0;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);}
 #cd-menu-trigger.is-clicked .cd-menu-icon::after {top: 0;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg);}
 @media only screen and (min-width: 768px) {#cd-menu-trigger {width: 110px;padding-left: 1.25em;}#cd-menu-trigger .cd-menu-text {display: inline-block;line-height: 70px;}
 #cd-menu-trigger .cd-menu-icon {left: auto;right: 1.25em;
 -webkit-transform: translateX(0);
 -moz-transform: translateX(0);
 -ms-transform: translateX(0);
 -o-transform: translateX(0);
 transform: translateX(0);}}
 #cd-lateral-nav {position: fixed;height: 100%;right: 0;top: 0;z-index: 1;width: 260px;background-color: #242e30;overflow-y: auto;
 -webkit-transform: translateZ(0);
 -webkit-backface-visibility: hidden;
 -webkit-transition-property: -webkit-transform;
 -moz-transition-property: -moz-transform;
 transition-property: transform;
 -webkit-transition-duration: 0.4s;
 -moz-transition-duration: 0.4s;
 transition-duration: 0.4s;
 -webkit-transform: translateX(80px);
 -moz-transform: translateX(80px);
 -ms-transform: translateX(80px);
 -o-transform: translateX(80px);
 transform: translateX(80px);}
 #cd-lateral-nav .cd-navigation {margin: 10px 0 16px;}
 #cd-lateral-nav .sub-menu {padding: 0 10px 20px 15px;display: none;}
 #cd-lateral-nav a {display: block;line-height: 2em;padding: 0 16px 0 32px;color: #aab5b7;}
 #cd-lateral-nav a.current {background-color: #3a4a4d;color: #FFF;}
 .no-touch #cd-lateral-nav a:hover {color: #FFF;}
 @media only screen and (min-width: 768px) {#cd-lateral-nav .cd-navigation {margin: 20px 0;}}
 #cd-lateral-nav.lateral-menu-is-open {
 -webkit-transform: translateX(0);
 -moz-transform: translateX(0);
 -ms-transform: translateX(0);
 -o-transform: translateX(0);
 transform: translateX(0);
 -webkit-overflow-scrolling: touch;}
 #cd-lateral-nav .item-has-children > a {position: relative;text-transform: uppercase;font-weight: 600;}
 #cd-lateral-nav .item-has-children > a::after {content: '';display: block;height: 11px;width: 8px;position: absolute;top: 50%;bottom: auto;
 -webkit-transform: translateY(-50%);
 -moz-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 -o-transform: translateY(-50%);
 transform: translateY(-50%);right: 1em;background: url("/images/cd-arrow.svg") no-repeat center center;background-size: 8px 11px;
 -webkit-transition-property: -webkit-transform;
 -moz-transition-property: -moz-transform;
 transition-property: transform;
 -webkit-transition-duration: 0.2s;
 -moz-transition-duration: 0.2s;
 transition-duration: 0.2s;}
 #cd-lateral-nav .item-has-children > a.submenu-open::after {
 -webkit-transform: translateY(-50%) rotate(90deg);
 -moz-transform: translateY(-50%) rotate(90deg);
 -ms-transform: translateY(-50%) rotate(90deg);
 -o-transform: translateY(-50%) rotate(90deg);
 transform: translateY(-50%) rotate(90deg);}
 #cd-lateral-nav .socials {padding: 0 32px;}
 #cd-lateral-nav .socials:after {content: "";display: table;clear: both;}
 #cd-lateral-nav .socials a {height: 32px;width: 32px;float: left;padding: 0;background-image: url("/images/cd-socials.svg");background-repeat: no-repeat;background-size: 128px 64px;background-color: #FFF;margin-right: .5em;border-radius: 0.25em;}
 #cd-lateral-nav .socials a.cd-twitter {background-position: 0 0;}
 #cd-lateral-nav .socials a.cd-github {background-position: -32px 0;}
 #cd-lateral-nav .socials a.cd-facebook {background-position: -64px 0;}
 #cd-lateral-nav .socials a.cd-google {background-position: -96px 0;}
 .no-touch #cd-lateral-nav .socials a:hover {background-color: #4e6361;}
 .no-touch #cd-lateral-nav .socials a:hover.cd-twitter {background-position: 0 -32px;}
 .no-touch #cd-lateral-nav .socials a:hover.cd-github {background-position: -32px -32px;}
 .no-touch #cd-lateral-nav .socials a:hover.cd-facebook {background-position: -64px -32px;}
 .no-touch #cd-lateral-nav .socials a:hover.cd-google {background-position: -96px -32px;}

Теперь в этой же папке стилей создадим новый файл с именем reset.css и добавим в него следующий код

 ul, li {margin: 0;padding: 0;border: 0;font-size: 100%;vertical-align: baseline;}
 article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section, main {display: block;}
 ol, ul {list-style: none;}
 blockquote, q {quotes: none;}
 blockquote:before, blockquote:after,
 q:before, q:after {content: '';content: none;}
 table {border-collapse: collapse;border-spacing: 0;}

Редактируем шапку

Теперь отредактируем шапку в файле header.php (oc-content/themes/bender/header.php). Для этого нам нужно вырезать всё, начиная от тега <body> до <div class=»wrapper wrapper-flash»> (строка поиска). Теперь вставим часть кода для нашего нового меню:

 <header>
 <a id="cd-logo" href="http://вашсайт.ру/" title="<?php _e('Classifieds', 'bender'); ?>"><img src="images/logo.png" alt="Homepage" class="logolink" title="<?php _e('Classifieds', 'bender'); ?>"></a>
 <nav id="cd-top-nav">
 <ul>
 <?php if( osc_is_web_user_logged_in() ) { ?>
 <li><?php echo sprintf(__('Hi %s', 'bender'), osc_logged_user_name() . '!'); ?></li>
 <li><a href="<?php echo osc_user_dashboard_url(); ?>"><?php _e('My account', 'bender'); ?></a></li>
 <?php } else { ?>
 <li><a id="login_open" href="<?php echo osc_user_login_url(); ?>"><?php _e('Login', 'bender') ; ?></a></li>
 <?php if(osc_user_registration_enabled()) { ?>
 <?php }; ?>
 <?php } ?>
 <li><a href="<?php echo osc_item_post_url_in_category() ; ?>"><?php _e("Publish your ad for free", 'bender');?></a></li>
 </ul>
 </nav>
 <a id="cd-menu-trigger" href="#0"><span class="cd-menu-text">Menu</span><span class="cd-menu-icon"></span></a>
 </header>
 <main class="cd-main-content">
 <!-- put your content here -->

Не забудьте исправить ссылку и путь к логотипу вашей доски объявлений.

Теперь вставим link на шрифт и файл стилей reset.css между тегом <head>***</head>

 <link rel="stylesheet" href="http://вашсайт.ру/oc-content/themes/bender/css/reset.css"/>
 <link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,600,700' rel='stylesheet' type='text/css'>

Отлично, спускаемся в подвал 🙂

 

Редактируем подвал

Открываем файл footer.php (oc-content/themes/bender/footer.php) и находим строку

<?php osc_run_hook('footer'); ?>

Теперь вставляем следующий код над этой строкой

 </main> <!-- cd-main-content -->
 <nav id="cd-lateral-nav">
 <ul class="cd-navigation cd-single-item-wrapper">
 <?php if( osc_is_web_user_logged_in() ) { ?>
 <li><a href="<?php echo osc_user_dashboard_url(); ?>"><?php _e('My account', 'bender'); ?></a></li>
 <li><a href="<?php echo osc_user_logout_url(); ?>"><?php _e('Logout', 'bender'); ?></a></li>
 <?php } else { ?>
 <li><a id="login_open" href="<?php echo osc_user_login_url(); ?>"><?php _e('Login', 'bender') ; ?></a></li>
 <!-- если у вас есть плагин входа и регистрации через Facebook --><li><?php fbc_button(); ?></li>
 <?php if(osc_user_registration_enabled()) { ?>
 <li><a href="<?php echo osc_register_account_url() ; ?>"><?php _e('Register for a free account', 'bender'); ?></a></li>
 <?php }; ?>
 <?php } ?>
 <li><a href="<?php echo osc_item_post_url_in_category() ; ?>"><?php _e("Publish your ad for free", 'bender');?></a></li>
 <li><a href="<?php echo osc_contact_url(); ?>"><?php _e('Contact', 'bender'); ?></a></li>
 </ul> <!-- cd-single-item-wrapper -->
 <!-- языковое меню --><ul class="cd-navigation cd-single-item-wrapper">
 <?php if ( osc_count_web_enabled_locales() > 1) { ?>
 <?php osc_goto_first_locale(); ?>
 <strong></strong>
 <?php $i = 0; ?>
 <?php while ( osc_has_web_enabled_locales() ) { ?>
 <li><a href="<?php echo osc_change_language_url ( osc_locale_code() ); ?>"><?php echo osc_locale_name(); ?></a></li><?php if( $i == 0 ) { echo " "; } ?>
 <?php $i++; ?>
 <?php } ?>
 <?php } ?>
 </ul> <!-- cd-single-item-wrapper -->
 <div class="cd-navigation socials">
 <a class="cd-twitter cd-img-replace" href="#0">Twitter</a>
 <a class="cd-github cd-img-replace" href="#0">Git Hub</a>
 <a class="cd-facebook cd-img-replace" href="#0">Facebook</a>
 <a class="cd-google cd-img-replace" href="#0">Google Plus</a>
 </div> <!-- socials -->
 </nav>
 <script src="js/main.js"></script> <!-- Resource jQuery -->

И так мы почти закончили. Переходим к следующему шагу…

Копируем скрипт и изображения

На сайте codyhouse.co необходимо скачать архив со скриптами и изображениями для нашего меню, для этого пройдите по ссылке codyhouse.co и нажмите Download. Затем, в корневом каталоге вашего сайта необходимо создать две папки

  • js
  • images

Теперь нужно открыть скачанный архив с сайта codyhouse.co и скопировать файлы modernizr.js и main.js в созданную папку js.

Тоже самое мы делаем с файлами из папки img (cd-arrow.svg, cd-logo.svg, cd-socials.svg), копируем в папку images.

 

Проверяем и наслаждаемся

После сохранения всех файлов и правильно скопированных скриптов и изображений вы можете насладиться полученным результатом.

Screen Shot 2014-07-20 at 12.03.40

На этом всё. Подписывайтесь на новости, рассказывайте друзьям в социальных сетях и читайте блог.

end

  • анна

    подскажите что значит очистить пару строк /oc-content/themes/bender/css/main.css, у меня все идет одной строкой!! что конкретно нужно очистить? и еще вопрос подскажите как исправить ссылку и путь к логотипу моей доски объявлений.

  • Добрый день, Анна. Отчистить пару строк — это значит поставить курсор перед самым первым символом в файле и нажать пару раз Enter, таким образом всё содержимое файла съедит на пару строк вниз и у вас появится место для того, чтобы вставить код из примера.
    Загрузить логотип можно через админку:
    Внешний вид —> Логотип верхней части страницы
    Исправить ссылку вы можете в файле header.php, у меня эта строка выглядит так:
    <a id="cd-logo" href="http://вашсайт.ру/" title="<?php _e('Classifieds', 'bender'); ?>"><img src="images/logo.png" alt="Homepage" class="logolink" title="<?php _e('Classifieds', 'bender'); ?>"></a>

  • Руслан

    А можно по подробнее об этом пункте: Теперь вставим link на шрифт и файл стилей reset.css между тегом *** — See more at: http://mywwweb.ru/osclass-bender-menu/#sthash.mXZrzBMG.dpuf

  • Этот пункт означает, что в самом начале вашего HTML файла есть тег <head>***</head>, внутри которого мы вставляем строки, которые подгрузят файл со стилями reset.css и шрифт Titillium с серверов Google.

  • Tolegen Altynbek

    не работает