Горизонтальное меню с раскладкой для uCoz
 | |
| Здесь представлено горизонтального меню с раскладкой на сайт uCoz, где идет раскладка его и заключается в работе как на слайдер. Каждый веб мастер старается информацию по своему сайту и также, что на нем находиться держать в одном месте и желательно, чтоб это место было на виду. А здесь навигация будет вверх интернет ресурса и безусловно его заметят, так как оно сделано привлекательно и в нем будет находиться с правой стороны мини профиль. А это как пользователю зайти на сайт, или гость хочет пройти регистрацию, и через мини профиль он может это сделать. Но больше всего нравится своей функциональностью, в это по умолчанию будет в темном оттенке цвета, что на светлый портал подойдет и аналогично можно говорить про темный. В левой стороне идет обвод виде кнопки под категорий, что если произвести клик, то сверху просто появляется вторая навигация, а которая была по умолчанию просто пропадает и на ее место идет уже другие запросы по сайту. Если говорит по распределению, то лучше делать так, а это по умолчанию на темном цвете делать запросы к примеру как связаться с администрацией, или обратная связь, можно и правила сайта, в общем все что качается технического направление. Здесь разберем вторую раскладку, на которых написаны категорий. То ее безусловно лучше направить на материалы, что находятся на сайты. А это разделы и в них если есть категорий, то все выставить, и для пользователя будет удобно найти тот материал или статью, здесь смотря еще какая тематика идет, в общем будет удобно. Сам мини профиль многим знаком, его просто перекрасил, все на стилях можно сделать, там Avatar будет, если вам написали, то отобразиться в кугу, сколько писем вам пришло. Если вы смотрите как гость, то вы увидите предложение зайти на интернет сайт или пройти регистрацию, здесь все корректно отображается и уже как было сказано, очень удобно сделано и распределены функций по обеим сторонам. Давайте рассмотрим как будет визуально отображаться. Это для тех кто не прошел регистрацию:  Это показано, что вы уже пользователь и нажали, чтоб появилась вторая информация.  И меняется оттенок цвета:  Теперь с мини профилем и это по умолчанию.  Здесь вы решили искать материал и нажали на кнопку с право и появилась вторая раскладка.  Переходим к установке: Вверх сайта, лично на тестовом сайте полностью вверх на код поменял, здесь смотря у кого какая конструкция, вообще в самый потолок устанавливаем. Код <link rel="stylesheet" href="http://zornet.ru/Aben/Aben-Abag/fer/reset.css"> <!-- CSS reset --> <link rel="stylesheet" href="http://zornet.ru/Aben/Aben-Abag/fer/style.css"> <!-- Resource style --> <script src="http://zornet.ru/Aben/Aben-Abag/fer/modernizr.js"></script> <!-- Modernizr --> <script src="http://zornet.ru/Aben/Aben-Abag/fer/main.js"></script> <!-- Resource jQuery --> <header> <div class="cd-logo"> <?if($LOGIN_LINK$)?> <div class="login"> <div class="login_in"> <a href="javascript://" rel="nofollow" onclick="new _uWnd('LF',' ',-250,-110,{autosize:0,resize:0,modal:1,fadetype:1,fadeclosetype:1},{url:'/index/40'});return false;" title="">Вход</a> / <a href="/index/3" title="">Регистрация</a> </div> </div> <?else?> <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> <?endif?> </div> <nav class="cd-main-nav-wrapper"> <ul class="cd-main-nav"> <li><a href="http://zornet.ru/">ZORNET.RU</a></li> <li><a href="#0">Проекты</a></li> <li><a href="#0">Блог</a></li> <li><a href="#0">Контакты</a></li> <li> <a href="#0" class="cd-subnav-trigger"><span>Категории</span></a> <ul> <li class="go-back"><a href="http://zornet.ru/">Меню</a></li> <li><a href="#0">Категория 1</a></li> <li><a href="#0">Категория 2</a></li> <li><a href="#0">Категория 3</a></li> <li><a href="#0">Категория 4</a></li> <li><a href="#0">Категория 5</a></li> <li><a href="#0" class="placeholder">Placeholder</a></li> </ul> </li> </ul> <!-- .cd-main-nav --> </nav> <!-- .cd-main-nav-wrapper --> <a href="#0" class="cd-nav-trigger">Меню<span></span></a> </header> CSS Код .login {float:right;margin-top: 21px;margin-right: 20px;height:30px;background: url('http://zornet.ru/Ajaxoskrip/Abren/fingerprint.png') #38A3EC 7px 7px no-repeat;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 10px;border: 1px solid #286894;} .login_in {padding: 7px;padding-left:32px;padding-right:10px;color: rgba(255, 255, 255, 0.4);font-size:13px;} .login_in a {text-decoration:none;color:rgba(255,255,255,0.9);} .login_in a:hover {text-decoration:none;color:#FFF} .profile {height:30px;font-size:13px;display:inline-block;position:relative} .profile-menu {position:relative!important} .profile-button s {display:inline-block;z-index:9;background:#3297db;color:#fff;font-size:10px;margin-right:10px;margin-left:1px;line-height:14px;padding:2px 6px;text-decoration:none;-webkit-border-radius: 55px;-moz-border-radius: 55px;border-radius: 55px;} .profile-button, .profile-button:hover {display:inline-block;color: #FFF;position:relative;line-height: 60px;padding-left: 39px;padding-right: 18px;text-decoration:none;line-height: 73px;} .profile-button i {position:absolute;right:0px;top: 35px;width: 0;height: 0;border-left: 3px solid transparent;border-right: 3px solid transparent;border-top: 4px solid rgba(0, 0, 0, 0.67);} .profile-avatar, .profile-avatar img {-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;} .profile-avatar {display:inline-block;width:24px;height:24px;position:absolute;top: 5px;left:0px;border-radius: 20px;} .profile-avatar img {width:24px;height:24px;object-fit:cover;vertical-align:bottom;background:#fff;border:2px solid #fff;} .profile-menu:hover .profile-list {visibility:visible;} .profile-list {position:absolute;/* width: 190px!important; */right:0px!important;top: 65px;padding-top:18px;visibility:hidden;z-index:9;} .profile-list-in {background: #3F494F;width:190px!important;max-width:190px!important;padding:3px 0px;box-shadow: 0px 8px 35px rgba(119, 119, 119, 1);/* -webkit-border-radius: 5px; */-moz-border-radius: 5px;border-radius: 5px;} .profile-list-in a {display: block;padding:0px 20px!important;line-height:42px!important;text-decoration:none;text-align:left;border-bottom: 1px solid #6A6A6B;font-size:12px;color: #FFFFFF;} .profile-list-in a:hover {color: #C0C0C0;} .profile-list-in a.last {border-bottom:0px !important} .profile-list-in a i {background:#3297db;color:#fff;float:right;font-style:normal;font-size:10px;padding:0px 6px;line-height:16px !important;margin-top:12px;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;} Вы сами можете поставить другой профиль, если вам этот не понравился, или просто вместо его установить логотип, то что вы считаете нужным, но в таком случай нужно искать место на площадке, чтоб сразу можно было заметить. То иногда зайдешь на сайт и не понимаешь, где пройти регистрацию, здесь как видим все понятно в этом направление. Источник: Yrааа и codyhouse.co | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 10 | |
|
| |
| 1 2 » | |
