Search the Community
Showing results for tags 'menu'.
Found 25 results
-
Здравствуйте ! Нужна ваша помощь . Не знаю как сделать такой стиль для меню ( отметила стрелочками на фотографии) Нужен стиль элементов меню , вертикальной линии с маркерами как на фото . Буду рада любой помощи.
-
Здравствуйте. padding подгоняется не четко, при изменении масштаба видно изъяны (подсветка кнопки не на всю высоту или на оборот больше чем нужно) Код: https://jsfiddle.net/aemjkhp9/
-
Доброго времени суток. Проблема лежит в Bootstrap menu, точнее в телефонной версии, так называемый гамбургер появляется только на экранах разрешения 767px шириной, а хотелось чтобы гамбургер меню было на планшетах. Причина заключается в том, что это первоначальное меню, и оно еще будет дополняться. (хотя и уже такое на телефоне не приятно видеть). Как и где поменять размер смены обычного меню на гамбургер? Сайт если будет нужен http://izhprint.org/ bootstrap файл тоже прикрепил. Заранее спасибо за помощь! bootstrap.css
-
Подскажите плиз! Почему я создаю в HTML тег " " в него закладываю "UL" и LI, а в "LI" текст которому хочу придать нужное изображение. В CSS делаю селектор - .menu, прописываю туда правила, но почему то это не влияет на LI, что бы изменить текст, мне приходится прописывать правила непосредственно для "LI". в чем причина?, и как сделать так что бы правила для блока .menu распространялись на текст внутри его? Ведь LI я хотел добавить еще в некоторые блоки уже с другими правилами. <!DOCTYPE html> <html lang="en"> <head> <title>MySite</title> <meta charset="utf-8"> <link rel="stylesheet" href="text/style.css"> </head> <body> <header class="page-header--home"> <div class="menu"> <ul> <li>Группа творчества</li> <li>Статьи</li> <li>Форум</li> <li>Видео</li> <li>Вход</li> </ul> </div> </header> </div> <div class="avtorizacia"> <input type="submit" name="Поиск"> </div> </body> </html> body{ background-image: url(..//img/MS3.jpg); max-width: 1920px; margin: 0; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } .page-header--home{ position: relative; background-image: url(..//img/MS4.jpg); width: 1920px; height: 80px; margin-top: 0px; } ul{ position: relative; margin: 0px; } li{ display: inline; font-size: 32px; font-family: "Tahoma"; font-weight: 800; color: #45a8ff; margin: 0px; margin-top: 5px; margin-left: 80px; margin-right: 80px; } .avtorizacia{ position: relative; background-color: rgba(31, 16, 16, 0.75); max-width: 80px; height: 250px; margin-top: 100px; }
-
Здравствуйте. Не могу никак понять как сделать подобного вида меню(Как в приложении). Пробовал через display:none->display:box; , через opacity:0->opacity:1; теперь через transform:scale(0.5); -> transform:scale(2); <!doctype html> <html> <head> <meta charset="utf-8"> <title>Документ без названия</title> <link href="about.css" rel="stylesheet" type="text/css"> </head> <body> <div class="menu"></div> <div class="show-menu"></div> </body> </html> Задача такая чтобы при наведении курсора на центральный элемент, круговое меню появлялось как-бы вокруг него. Вот одна из попыток : html CSS .menu { width:100px; height:100px; background:orange; transform:scale(0.5); } .menu .show-menu:hover { transform:scale(2); } .show-menu { width:50px; height:50px; background:black; position:absolute; top:33px; left:33px; }
-
Добрый день, не получается сделать разделитель, в виде символа "/" ,между элементами <a> на одинаковом расстоянии от элементов <li> <a> ,вот ссылка на код https://jsfiddle.net/tu6rwm2j/
-
Доброго времени суток. Ни как не получается прикрутить готовое боковое меню к сайту, первая проблема это не отоброжает текст когда закидываешь на локальный хост... стоит apache, php... локальные хосты работают отлично. когда запускаешь index.html из папки все работает на удивление... Мои подозрения пали на js, в этом я полный ноль, да и в html не очень силен... поэтому прошу помощи у панимающих людей которым не жалко своего времени на такого пацана как я... P.S. когда то вы же и сами были такими, а во круг и подсказать не кому, а разобраться очень хочется... спасибо за понимание... вот index.html <!DOCTYPE html> <head> <meta charset="UTF-8" /> <title></title> <meta name="description" content="" /> <meta name="keywords" content="" /> <!-- menu styles --> <link rel="stylesheet" type="text/css" href="css/component.css" /> <script src="js/modernizr-custom.js"></script> <script src="js/main.js"></script> <script src="js/classie.js"></script> </head> <body> <!-- Main container --> <button class="action action--open" aria-label="Open Menu"><span class="icon icon--menu"></span></button> <nav id="ml-menu" class="menu"> <button class="action action--close" aria-label="Close Menu"><span class="icon icon--cross"></span></button> <div class="menu__wrap"> <ul data-menu="main" class="menu__level"> <li class="menu__item"><a class="menu__link" data-submenu="submenu-1" href="#">Vegetables</a></li> <li class="menu__item"><a class="menu__link" data-submenu="submenu-2" href="#">Fruits</a></li> <li class="menu__item"><a class="menu__link" data-submenu="submenu-3" href="#">Grains</a></li> <li class="menu__item"><a class="menu__link" data-submenu="submenu-4" href="#">Mylk & Drinks</a></li> </ul> <!-- Submenu 1 --> <ul data-menu="submenu-1" class="menu__level"> <li class="menu__item"><a class="menu__link" href="#">Stalk Vegetables</a></li> <li class="menu__item"><a class="menu__link" href="#">Roots & Seeds</a></li> <li class="menu__item"><a class="menu__link" href="#">Cabbages</a></li> <li class="menu__item"><a class="menu__link" href="#">Salad Greens</a></li> <li class="menu__item"><a class="menu__link" href="#">Mushrooms</a></li> <li class="menu__item"><a class="menu__link" data-submenu="submenu-1-1" href="#">Sale %</a></li> </ul> <!-- Submenu 1-1 --> <ul data-menu="submenu-1-1" class="menu__level"> <li class="menu__item"><a class="menu__link" href="#">Fair Trade Roots</a></li> <li class="menu__item"><a class="menu__link" href="#">Dried Veggies</a></li> <li class="menu__item"><a class="menu__link" href="#">Our Brand</a></li> <li class="menu__item"><a class="menu__link" href="#">Homemade</a></li> </ul> <!-- Submenu 2 --> <ul data-menu="submenu-2" class="menu__level"> <li class="menu__item"><a class="menu__link" href="#">Citrus Fruits</a></li> <li class="menu__item"><a class="menu__link" href="#">Berries</a></li> <li class="menu__item"><a class="menu__link" data-submenu="submenu-2-1" href="#">Special Selection</a></li> <li class="menu__item"><a class="menu__link" href="#">Tropical Fruits</a></li> <li class="menu__item"><a class="menu__link" href="#">Melons</a></li> </ul> <!-- Submenu 2-1 --> <ul data-menu="submenu-2-1" class="menu__level"> <li class="menu__item"><a class="menu__link" href="#">Exotic Mixes</a></li> <li class="menu__item"><a class="menu__link" href="#">Wild Pick</a></li> <li class="menu__item"><a class="menu__link" href="#">Vitamin Boosters</a></li> </ul> <!-- Submenu 3 --> <ul data-menu="submenu-3" class="menu__level"> <li class="menu__item"><a class="menu__link" href="#">Buckwheat</a></li> <li class="menu__item"><a class="menu__link" href="#">Millet</a></li> <li class="menu__item"><a class="menu__link" href="#">Quinoa</a></li> <li class="menu__item"><a class="menu__link" href="#">Wild Rice</a></li> <li class="menu__item"><a class="menu__link" href="#">Durum Wheat</a></li> <li class="menu__item"><a class="menu__link" data-submenu="submenu-3-1" href="#">Promo Packs</a></li> </ul> <!-- Submenu 3-1 --> <ul data-menu="submenu-3-1" class="menu__level"> <li class="menu__item"><a class="menu__link" href="#">Starter Kit</a></li> <li class="menu__item"><a class="menu__link" href="#">The Essential 8</a></li> <li class="menu__item"><a class="menu__link" href="#">Bolivian Secrets</a></li> <li class="menu__item"><a class="menu__link" href="#">Flour Packs</a></li> </ul> <!-- Submenu 4 --> <ul data-menu="submenu-4" class="menu__level"> <li class="menu__item"><a class="menu__link" href="#">Grain Mylks</a></li> <li class="menu__item"><a class="menu__link" href="#">Seed Mylks</a></li> <li class="menu__item"><a class="menu__link" href="#">Nut Mylks</a></li> <li class="menu__item"><a class="menu__link" href="#">Nutri Drinks</a></li> <li class="menu__item"><a class="menu__link" data-submenu="submenu-4-1" href="#">Selection</a></li> </ul> <!-- Submenu 4-1 --> <ul data-menu="submenu-4-1" class="menu__level"> <li class="menu__item"><a class="menu__link" href="#">Nut Mylk Packs</a></li> <li class="menu__item"><a class="menu__link" href="#">Amino Acid Heaven</a></li> <li class="menu__item"><a class="menu__link" href="#">Allergy Free</a></li> </ul> </div> </nav> <script> (function() { var menuEl = document.getElementById('ml-menu'), mlmenu = new MLMenu(menuEl, { breadcrumbsCtrl : true, // show breadcrumbs initialBreadcrumb : 'all', // initial breadcrumb text backCtrl : false, // show back button itemsDelayInterval : 60, // delay between each menu item sliding animation onItemClick: loadDummyData // callback: item that doesn´t have a submenu gets clicked - onItemClick([event], [inner HTML of the clicked item]) }); // mobile menu toggle var openMenuCtrl = document.querySelector('.action--open'), closeMenuCtrl = document.querySelector('.action--close'); openMenuCtrl.addEventListener('click', openMenu); closeMenuCtrl.addEventListener('click', closeMenu); function openMenu() { classie.add(menuEl, 'menu--open'); } function closeMenu() { classie.remove(menuEl, 'menu--open'); } // simulate grid content loading var gridWrapper = document.querySelector('.content'); function loadDummyData(ev, itemName) { ev.preventDefault(); closeMenu(); gridWrapper.innerHTML = ''; classie.add(gridWrapper, 'content--loading'); setTimeout(function() { classie.remove(gridWrapper, 'content--loading'); gridWrapper.innerHTML = '<ul class="products">' + dummyData[itemName] + '<ul>'; }, 700); } })(); </script> </body> </html> вот к нему СSS: /* Icons (made with Icomoon.io) */ @font-face { font-family: 'feather'; font-weight: normal; font-style: normal; src: url('../fonts/feather/feather.eot?1gafuo'); src: url('../fonts/feather/feather.eot?1gafuo#iefix') format('embedded-opentype'), url('../fonts/feather/feather.woff2?1gafuo') format('woff2'), url('../fonts/feather/feather.ttf?1gafuo') format('truetype'), url('../fonts/feather/feather.woff?1gafuo') format('woff'), url('../fonts/feather/feather.svg?1gafuo#feather') format('svg'); } .icon { font-family: 'feather'; font-weight: normal; font-style: normal; font-variant: normal; line-height: 1; text-transform: none; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; speak: none; } .icon--arrow-left:before { content: '\e901'; } .icon--menu:before { content: '\e903'; } .icon--cross:before { content: '\e117'; } /* Menu styles */ .menu { position: fixed; top: 0px; left: 0; width: 300px; height: calc(100vh - 120px); background: #1c1d22; } .menu__wrap { position: absolute; top: 3.5em; bottom: 0; overflow: hidden; width: 100%; } .menu__level { position: absolute; top: 0; left: 0; visibility: hidden; overflow: hidden; overflow-y: scroll; width: calc(100% + 50px); height: 100%; margin: 0; padding: 0; list-style-type: none; } .menu__level--current { visibility: visible; } .menu__item { display: block; width: calc(100% - 50px); } .menu__link { font-weight: 600; position: relative; display: block; padding: 1em 2.5em 1em 1.5em; color: #bdbdbd; -webkit-transition: color 0.1s; transition: color 0.1s; } .menu__link[data-submenu]::after { content: '\e904'; font-family: 'feather'; position: absolute; right: 0; padding: 0.25em 1.25em; color: #2a2b30; } .menu__link:hover, .menu__link[data-submenu]:hover::after { color: #5c5edc; } .menu__link--current::before { content: '\00B7'; font-size: 1.5em; line-height: 0; position: absolute; top: 50%; left: 0.5em; height: 4px; color: #5c5edc; } [class^=animate-], [class*= animate-] { visibility: visible; } .animate-outToRight .menu__item { -webkit-animation: outToRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1); animation: outToRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1); } @-webkit-keyframes outToRight { to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes outToRight { to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .animate-outToLeft .menu__item { -webkit-animation: outToLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1); animation: outToLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1); } @-webkit-keyframes outToLeft { to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes outToLeft { to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .animate-inFromLeft .menu__item { -webkit-animation: inFromLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1); animation: inFromLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1); } @-webkit-keyframes inFromLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes inFromLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate-inFromRight .menu__item { -webkit-animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1); animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1); } @-webkit-keyframes inFromRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes inFromRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .menu__breadcrumbs { font-size: 0.65em; line-height: 1; position: relative; padding: 2.5em 3.75em 1.5em 2.5em; } .menu__breadcrumbs a { font-weight: bold; display: inline-block; cursor: pointer; vertical-align: middle; letter-spacing: 1px; text-transform: uppercase; color: #5c5edc; } .menu__breadcrumbs a:last-child { pointer-events: none; } .menu__breadcrumbs a:hover { color: #8182e0; } .menu__breadcrumbs a:not(:last-child)::after { content: '\e902'; font-family: 'feather'; display: inline-block; padding: 0 0.5em; color: #33353e; } .menu__breadcrumbs a:not(:last-child):hover::after { color: #33353e; } .menu__back { font-size: 1.05em; position: absolute; z-index: 100; top: 0; right: 2.25em; margin: 0; padding: 1.365em 0.65em 0 0; cursor: pointer; color: #2a2b30; border: none; background: none; } .menu__back--hidden { pointer-events: none; opacity: 0; } .menu__back:hover, .menu__back:focus { color: #fff; outline: none; } /* Open and close buttons */ .action { position: absolute; display: block; margin: 0; padding: 0; cursor: pointer; border: none; background: none; } .action:focus { outline: none; } .action--open { font-size: 1.5em; top: 1em; left: 1em; display: none; color: #fff; position: fixed; z-index: 1000; } .action--close { font-size: 1.1em; top: 1.25em; right: 1em; display: none; color: #45464e; } @media screen and (max-width: 40em) { .action--open, .action--close { display: block; } .menu { z-index: 1000; top: 0; width: 100%; height: 100vh; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; } .menu--open { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } а это дополнительные скрипты: /** * main.js * http://www.codrops.com * * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * Copyright 2015, Codrops * http://www.codrops.com */ ;(function(window) { 'use strict'; var support = { animations : Modernizr.cssanimations }, animEndEventNames = { 'WebkitAnimation' : 'webkitAnimationEnd', 'OAnimation' : 'oAnimationEnd', 'msAnimation' : 'MSAnimationEnd', 'animation' : 'animationend' }, animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ], onEndAnimation = function( el, callback ) { var onEndCallbackFn = function( ev ) { if( support.animations ) { if( ev.target != this ) return; this.removeEventListener( animEndEventName, onEndCallbackFn ); } if( callback && typeof callback === 'function' ) { callback.call(); } }; if( support.animations ) { el.addEventListener( animEndEventName, onEndCallbackFn ); } else { onEndCallbackFn(); } }; function extend( a, b ) { for( var key in b ) { if( b.hasOwnProperty( key ) ) { a[key] = b[key]; } } return a; } function MLMenu(el, options) { this.el = el; this.options = extend( {}, this.options ); extend( this.options, options ); // the menus (<ul>´s) this.menus = [].slice.call(this.el.querySelectorAll('.menu__level')); // index of current menu this.current = 0; this._init(); } MLMenu.prototype.options = { // show breadcrumbs breadcrumbsCtrl : true, // initial breadcrumb text initialBreadcrumb : 'all', // show back button backCtrl : true, // delay between each menu item sliding animation itemsDelayInterval : 60, // direction direction : 'r2l', // callback: item that doesn´t have a submenu gets clicked // onItemClick([event], [inner HTML of the clicked item]) onItemClick : function(ev, itemName) { return false; } }; MLMenu.prototype._init = function() { // iterate the existing menus and create an array of menus, more specifically an array of objects where each one holds the info of each menu element and its menu items this.menusArr = []; var self = this; this.menus.forEach(function(menuEl, pos) { var menu = {menuEl : menuEl, menuItems : [].slice.call(menuEl.querySelectorAll('.menu__item'))}; self.menusArr.push(menu); // set current menu class if( pos === self.current ) { classie.add(menuEl, 'menu__level--current'); } }); // create back button if( this.options.backCtrl ) { this.backCtrl = document.createElement('button'); this.backCtrl.className = 'menu__back menu__back--hidden'; this.backCtrl.setAttribute('aria-label', 'Go back'); this.backCtrl.innerHTML = '<span class="icon icon--arrow-left"></span>'; this.el.insertBefore(this.backCtrl, this.el.firstChild); } // create breadcrumbs if( self.options.breadcrumbsCtrl ) { this.breadcrumbsCtrl = document.createElement('nav'); this.breadcrumbsCtrl.className = 'menu__breadcrumbs'; this.el.insertBefore(this.breadcrumbsCtrl, this.el.firstChild); // add initial breadcrumb this._addBreadcrumb(0); } // event binding this._initEvents(); }; MLMenu.prototype._initEvents = function() { var self = this; for(var i = 0, len = this.menusArr.length; i < len; ++i) { this.menusArr.menuItems.forEach(function(item, pos) { item.querySelector('a').addEventListener('click', function(ev) { var submenu = ev.target.getAttribute('data-submenu'), itemName = ev.target.innerHTML, subMenuEl = self.el.querySelector('ul[data-menu=' + submenu + ']'); // check if there's a sub menu for this item if( submenu && subMenuEl ) { ev.preventDefault(); // open it self._openSubMenu(subMenuEl, pos, itemName); } else { // add class current var currentlink = self.el.querySelector('.menu__link--current'); if( currentlink ) { classie.remove(self.el.querySelector('.menu__link--current'), 'menu__link--current'); } classie.add(ev.target, 'menu__link--current'); // callback self.options.onItemClick(ev, itemName); } }); }); } // back navigation if( this.options.backCtrl ) { this.backCtrl.addEventListener('click', function() { self._back(); }); } }; MLMenu.prototype._openSubMenu = function(subMenuEl, clickPosition, subMenuName) { if( this.isAnimating ) { return false; } this.isAnimating = true; // save "parent" menu index for back navigation this.menusArr[this.menus.indexOf(subMenuEl)].backIdx = this.current; // save "parent" menu´s name this.menusArr[this.menus.indexOf(subMenuEl)].name = subMenuName; // current menu slides out this._menuOut(clickPosition); // next menu (submenu) slides in this._menuIn(subMenuEl, clickPosition); }; MLMenu.prototype._back = function() { if( this.isAnimating ) { return false; } this.isAnimating = true; // current menu slides out this._menuOut(); // next menu (previous menu) slides in var backMenu = this.menusArr[this.menusArr[this.current].backIdx].menuEl; this._menuIn(backMenu); // remove last breadcrumb if( this.options.breadcrumbsCtrl ) { this.breadcrumbsCtrl.removeChild(this.breadcrumbsCtrl.lastElementChild); } }; MLMenu.prototype._menuOut = function(clickPosition) { // the current menu var self = this, currentMenu = this.menusArr[this.current].menuEl, isBackNavigation = typeof clickPosition == 'undefined' ? true : false; // slide out current menu items - first, set the delays for the items this.menusArr[this.current].menuItems.forEach(function(item, pos) { item.style.WebkitAnimationDelay = item.style.animationDelay = isBackNavigation ? parseInt(pos * self.options.itemsDelayInterval) + 'ms' : parseInt(Math.abs(clickPosition - pos) * self.options.itemsDelayInterval) + 'ms'; }); // animation class if( this.options.direction === 'r2l' ) { classie.add(currentMenu, !isBackNavigation ? 'animate-outToLeft' : 'animate-outToRight'); } else { classie.add(currentMenu, isBackNavigation ? 'animate-outToLeft' : 'animate-outToRight'); } }; MLMenu.prototype._menuIn = function(nextMenuEl, clickPosition) { var self = this, // the current menu currentMenu = this.menusArr[this.current].menuEl, isBackNavigation = typeof clickPosition == 'undefined' ? true : false, // index of the nextMenuEl nextMenuIdx = this.menus.indexOf(nextMenuEl), nextMenuItems = this.menusArr[nextMenuIdx].menuItems, nextMenuItemsTotal = nextMenuItems.length; // slide in next menu items - first, set the delays for the items nextMenuItems.forEach(function(item, pos) { item.style.WebkitAnimationDelay = item.style.animationDelay = isBackNavigation ? parseInt(pos * self.options.itemsDelayInterval) + 'ms' : parseInt(Math.abs(clickPosition - pos) * self.options.itemsDelayInterval) + 'ms'; // we need to reset the classes once the last item animates in // the "last item" is the farthest from the clicked item // let's calculate the index of the farthest item var farthestIdx = clickPosition <= nextMenuItemsTotal/2 || isBackNavigation ? nextMenuItemsTotal - 1 : 0; if( pos === farthestIdx ) { onEndAnimation(item, function() { // reset classes if( self.options.direction === 'r2l' ) { classie.remove(currentMenu, !isBackNavigation ? 'animate-outToLeft' : 'animate-outToRight'); classie.remove(nextMenuEl, !isBackNavigation ? 'animate-inFromRight' : 'animate-inFromLeft'); } else { classie.remove(currentMenu, isBackNavigation ? 'animate-outToLeft' : 'animate-outToRight'); classie.remove(nextMenuEl, isBackNavigation ? 'animate-inFromRight' : 'animate-inFromLeft'); } classie.remove(currentMenu, 'menu__level--current'); classie.add(nextMenuEl, 'menu__level--current'); //reset current self.current = nextMenuIdx; // control back button and breadcrumbs navigation elements if( !isBackNavigation ) { // show back button if( self.options.backCtrl ) { classie.remove(self.backCtrl, 'menu__back--hidden'); } // add breadcrumb self._addBreadcrumb(nextMenuIdx); } else if( self.current === 0 && self.options.backCtrl ) { // hide back button classie.add(self.backCtrl, 'menu__back--hidden'); } // we can navigate again.. self.isAnimating = false; }); } }); // animation class if( this.options.direction === 'r2l' ) { classie.add(nextMenuEl, !isBackNavigation ? 'animate-inFromRight' : 'animate-inFromLeft'); } else { classie.add(nextMenuEl, isBackNavigation ? 'animate-inFromRight' : 'animate-inFromLeft'); } }; MLMenu.prototype._addBreadcrumb = function(idx) { if( !this.options.breadcrumbsCtrl ) { return false; } var bc = document.createElement('a'); bc.innerHTML = idx ? this.menusArr[idx].name : this.options.initialBreadcrumb; this.breadcrumbsCtrl.appendChild(bc); var self = this; bc.addEventListener('click', function(ev) { ev.preventDefault(); // do nothing if this breadcrumb is the last one in the list of breadcrumbs if( !bc.nextSibling || self.isAnimating ) { return false; } self.isAnimating = true; // current menu slides out self._menuOut(); // next menu slides in var nextMenu = self.menusArr[idx].menuEl; self._menuIn(nextMenu); // remove breadcrumbs that are ahead var siblingNode; while (siblingNode = bc.nextSibling) { self.breadcrumbsCtrl.removeChild(siblingNode); } }); }; window.MLMenu = MLMenu; })(window); /*! * classie v1.0.1 * class helper functions * from bonzo https://github.com/ded/bonzo * MIT license * * classie.has( elem, 'my-class' ) -> true/false * classie.add( elem, 'my-new-class' ) * classie.remove( elem, 'my-unwanted-class' ) * classie.toggle( elem, 'my-class' ) */ /*jshint browser: true, strict: true, undef: true, unused: true */ /*global define: false, module: false */ ( function( window ) { 'use strict'; // class helper functions from bonzo https://github.com/ded/bonzo function classReg( className ) { return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); } // classList support for class management // altho to be fair, the api sucks because it won't accept multiple classes at once var hasClass, addClass, removeClass; if ( 'classList' in document.documentElement ) { hasClass = function( elem, c ) { return elem.classList.contains( c ); }; addClass = function( elem, c ) { elem.classList.add( c ); }; removeClass = function( elem, c ) { elem.classList.remove( c ); }; } else { hasClass = function( elem, c ) { return classReg( c ).test( elem.className ); }; addClass = function( elem, c ) { if ( !hasClass( elem, c ) ) { elem.className = elem.className + ' ' + c; } }; removeClass = function( elem, c ) { elem.className = elem.className.replace( classReg( c ), ' ' ); }; } function toggleClass( elem, c ) { var fn = hasClass( elem, c ) ? removeClass : addClass; fn( elem, c ); } var classie = { // full names hasClass: hasClass, addClass: addClass, removeClass: removeClass, toggleClass: toggleClass, // short names has: hasClass, add: addClass, remove: removeClass, toggle: toggleClass }; // transport if ( typeof define === 'function' && define.amd ) { // AMD define( classie ); } else if ( typeof exports === 'object' ) { // CommonJS module.exports = classie; } else { // browser global window.classie = classie; } })( window ); /*! modernizr 3.2.0 (Custom Build) | MIT * * http://modernizr.com/download/?-cssanimations-prefixed !*/ !function(e,n,t){function r(e,n){return typeof e===n}function o(){var e,n,t,o,i,s,a;for(var f in C)if(C.hasOwnProperty(f)){if(e=[],n=C[f],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;t<n.options.aliases.length;t++)e.push(n.options.aliases[t].toLowerCase());for(o=r(n.fn,"function")?n.fn():n.fn,i=0;i<e.length;i++)s=e,a=s.split("."),1===a.length?Modernizr[a[0]]=o:(!Modernizr[a[0]]||Modernizr[a[0]]instanceof Boolean||(Modernizr[a[0]]=new Boolean(Modernizr[a[0]])),Modernizr[a[0]][a[1]]=o),g.push((o?"":"no-")+a.join("-"))}}function i(e){var n=w.className,t=Modernizr._config.classPrefix||"";if(x&&(n=n.baseVal),Modernizr._config.enableJSClass){var r=new RegExp("(^|\\s)"+t+"no-js(\\s|$)");n=n.replace(r,"$1"+t+"js$2")}Modernizr._config.enableClasses&&(n+=" "+t+e.join(" "+t),x?w.className.baseVal=n:w.className=n)}function s(e){return e.replace(/([a-z])-([a-z])/g,function(e,n,t){return n+t.toUpperCase()}).replace(/^-/,"")}function a(e,n){return!!~(""+e).indexOf(n)}function f(){return"function"!=typeof n.createElement?n.createElement(arguments[0]):x?n.createElementNS.call(n,"http://www.w3.org/2000/svg",arguments[0]):n.createElement.apply(n,arguments)}function l(e,n){return function(){return e.apply(n,arguments)}}function u(e,n,t){var o;for(var i in e)if(ein n)return t===!1?e:(o=n[e],r(o,"function")?l(o,t||n) );return!1}function p(e){return e.replace(/([A-Z])/g,function(e,n){return"-"+n.toLowerCase()}).replace(/^ms-/,"-ms-")}function d(){var e=n.body;return e||(e=f(x?"svg":"body"),e.fake=!0),e}function c(e,t,r,o){var i,s,a,l,u="modernizr",p=f("div"),c=d();if(parseInt(r,10))for(;r--;)a=f("div"),a.id=o?o[r]:u+(r+1),p.appendChild(a);return i=f("style"),i.type="text/css",i.id="s"+u,(c.fake?c:p).appendChild(i),c.appendChild(p),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(n.createTextNode(e)),p.id=u,c.fake&&(c.style.background="",c.style.overflow="hidden",l=w.style.overflow,w.style.overflow="hidden",w.appendChild©),s=t(p,e),c.fake?(c.parentNode.removeChild©,w.style.overflow=l,w.offsetHeight) .parentNode.removeChild(p),!!s}function m(n,r){var o=n.length;if("CSS"in e&&"supports"in e.CSS){for(;o--;)if(e.CSS.supports(p(n[o]),r))return!0;return!1}if("CSSSupportsRule"in e){for(var i=[];o--;)i.push("("+p(n[o])+":"+r+")");return i=i.join(" or "),c("@supports ("+i+") { #modernizr { position: absolute; } }",function(e){return"absolute"==getComputedStyle(e,null).position})}return t}function v(e,n,o,i){function l(){p&&(delete z.style,delete z.modElem)}if(i=r(i,"undefined")?!1:i,!r(o,"undefined")){var u=m(e,o);if(!r(u,"undefined"))return u}for(var p,d,c,v,h,y=["modernizr","tspan"];!z.style;)p=!0,z.modElem=f(y.shift()),z.style=z.modElem.style;for(c=e.length,d=0;c>d;d++)if(v=e[d],h=z.style[v],a(v,"-")&&(v=s(v)),z.style[v]!==t){if(i||r(o,"undefined"))return l(),"pfx"==n?v:!0;try{z.style[v]=o}catch(g){}if(z.style[v]!=h)return l(),"pfx"==n?v:!0}return l(),!1}function h(e,n,t,o,i){var s=e.charAt(0).toUpperCase()+e.slice(1),a=(e+" "+b.join(s+" ")+s).split(" ");return r(n,"string")||r(n,"undefined")?v(a,n,o,i):(a=(e+" "+N.join(s+" ")+s).split(" "),u(a,n,t))}function y(e,n,r){return h(e,t,t,n,r)}var g=[],C=[],_={_version:"3.2.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var t=this;setTimeout(function(){n(t[e])},0)},addTest:function(e,n,t){C.push({name:e,fn:n,options:t})},addAsyncTest:function(e){C.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=_,Modernizr=new Modernizr;var w=n.documentElement,x="svg"===w.nodeName.toLowerCase(),S="Moz O ms Webkit",b=_._config.usePrefixes?S.split(" "):[];_._cssomPrefixes=b;var E=function(n){var r,o=prefixes.length,i=e.CSSRule;if("undefined"==typeof i)return t;if(!n)return!1;if(n=n.replace(/^@/,""),r=n.replace(/-/g,"_").toUpperCase()+"_RULE",r in i)return"@"+n;for(var s=0;o>s;s++){var a=prefixes,f=a.toUpperCase()+"_"+r;if(f in i)return"@-"+a.toLowerCase()+"-"+n}return!1};_.atRule=E;var N=_._config.usePrefixes?S.toLowerCase().split(" "):[];_._domPrefixes=N;var P={elem:f("modernizr")};Modernizr._q.push(function(){delete P.elem});var z={style:P.elem.style};Modernizr._q.unshift(function(){delete z.style}),_.testAllProps=h;_.prefixed=function(e,n,t){return 0===e.indexOf("@")?E(e) -1!=e.indexOf("-")&&(e=s(e)),n?h(e,n,t):h(e,"pfx"))};_.testAllProps=y,Modernizr.addTest("cssanimations",y("animationName","a",!0)),o(),i(g),delete _.addTest,delete _.addAsyncTest;for(var T=0;T<Modernizr._q.length;T++)Modernizr._q[T]();e.Modernizr=Modernizr}(window,document); без этих скриптов текст тоже не отоброжается в меню...
-
Добрый день. Зачем нужны такие теги как <menu>, <main> или <time>?
-
Здравствуйте. Кто подскажет, как разместить меню под картинкой. В моем случае получается внизу страницы. <div id="wrapper"><header> <div id= "logo"><img src= "images/logo.png" alt="Логотип" /></div><nav><ul id="menu"><li><a href="#"><span>Home</span></a></li><li><a href="#"><span>About us</span></a></li><li><a href="#"><span>Our support</span></a></li></ul></nav></header></div> CSS#wrapper {width:1260px;margin:0 auto;}
-
Существует несколько методов вывода иконки навигации(три горизонтальных линии) на сайте кто-то просто вставляет png иконку, кто-то делает с помощью border`a, кто-то использует box-shadow, кто-то градиенты, кто-то svg. кто-то псевдо-элементы. я не сильно силен в этой теме, но понимаю, что мне хотелось бы менять, к примеру, цвет иконки в зависимости от цвета фона шапки, поэтому я хотел бы иметь возможность гибко работать с иконкой. Суть вопроса, кто какой метод использует и какие плюсы/минусы разных методов. п.с. Кто-то подключает иконочный шрифт, вопрос такой, имеет ли смысл грузить мобильный трафик подключением этого шрифта ради 1-2 иконок?? или это не особо влияет на скорость загрузки сайта?
-
Привет. Есть горизонтальное меню. Как после каждого пункта меню вывести точки, как тут: Если кому нужна картинка точек.
-
Здравствуйте ! Подскажите, каким образом я могу реализовать вот такой принцип мега-меню http://www.joomla.org/, как на официальном сайте джумлы. Желательно без использования посторонних модулей (плагинов), которые нагружали бы сайт.
-
Всем добрый день! Решил переделать с 1-страничного во многостраничный сайт и столкнулся с непонятной проблемой: ВТОРОЙ пункт меню не открывается. Не могу понять в чем дело. ПОМОГИТЕ!!!! http://xn--80apgctu.in.ua/ Спасибо!
-
Всем привет, друзья подскажите, как быть в такой ситуации ? Проблема с отображением меню на сайте, кто может подсказать, как исправить ?
-
Доброго времени суток. Есть css меню, из ряда разделов, последний - форма поиска. При маштабировании (уменьшении масштаба) блок с формой поиска уезжает. Старница с проблемой: http://www.kino.sumy.ua/ , ширина страницы 1024px. Скриншот №1, без масштабирования Скринфот №2, тоже меню при масшатабировании.
-
Друзья добрый день, у меня возник вопрос по поводу шаблона который я скачал Вот пример моего сайта http://homavi.gallery/open_release/a3_base.html Существует фильтра, можно увидеть это меню справа от название Showing. Фильтр разбивает материал по названиям, можно ли сделать такой же фильтр внутри фильтра. Подскажите где и что искать, может быть есть пример какой то ?
-
Ребят помогите разобраться, почему так происходит и как избежать наследование ширины элементом ul.dropdown-menu от его родителя li.dropmenu. http://jsfiddle.net/AqaL2/
-
Доброго времени суток всем! Есть горизонтальное меню с выпадающими списками подменю. Выпадает всё здорово, но подсвечивается несколько не так, как хотелось бы. Чего хочу, и что не получилось: когда наводится мышь на пункт меню - всё здорово, пункт подсвечивается оранжевым, меню выпадает, но после того, как мышь уходит с основного пункта меню и начинает "гулять" по подменю, подсветка с основного пункта меню пропадает, а должна оставаться. когда на ней hover - она загорается, hover пропал - пропала подсветка. как заставить светиться этот пункт, пока я шарю мышкой в пределах его подменю? пример в картинках вот так оно есть сейчас: вот так надо (монтаж): вот кусок кода элемента меню, из которого выпадает подменю: <ul class="menu"> /*top menu*/ <li class="item-101 current active deeper parent"> <a href="/" >О компании</a> /*drop-down menu*/ <ul> <li class="item-114"> <a href="/home/history" >История компании</a> </li> <li class="item-115"> <a href="/home/partners" >Наши партнёры</a> </li> <li class="item-116"> <a href="/home/suppliers" >Наши поставщики</a> </li> </ul> </li></ul>вот стиль для меню: ul.menu { margin: 0; padding: 0; width: 100%; height: 100%; text-align: justify;}ul.menu li { float: left; list-style: none; position: relative; display: inline-block;}ul.menu li.active { background-color: #f93; text-shadow: 1px -1px 0px #000;}ul.menu li a { color: #fff; display: block; padding: 8px 12px 10px; text-decoration: none;}ul.menu li a:hover { background-color: #f93; text-shadow: 1px -1px 0px #000;}/* drop-down menu */ul.menu li ul { display: none;}ul.menu li:hover ul { display: block; position: absolute; top: 38px; background-color: #f93; z-index: 1000;}ul.menu li:hover ul li { float: none; width: 330px; border-bottom: 1px solid #ff9; text-shadow: 1px -1px 0px #000;}ul.menu li ul li a:hover { background-color: #ff3;}подскажите, что сделать или что изменить, чтобы получилось задуманное, а то уже идеи кончились.. если по поводу моего кода есть куча замечаний, то не стесняйтесь делать замечания, учту!
-
Приветствую! Интересная штука. Когда водишь мышью над третьим пунктом меню (Logout), попадается непонятная невидимая область, принадлежащая второму пункту (Gallery). И она довольно большая. Это хорошо видно по ховер эффекту изменения цвета иконки второго пункта. Такое действо происходит в Хроме, Опере, Сафари. А в Фаерфоксе - нет. Что это? http://tellmeof.cc.ua/DarkVertMenu/darkvertmenu.html
-
Добрый день! Нужна помощь коллективного разума, так как сама не справляюсь. Нужно сделать выпадающие окна с помощью css. У меня получилось вот такое (см. код), но я уперлась в проблему: выпадающее меню не становится линейным, как список верхнего режима. Я в курсе, что это свойство задается float: left, однако куда именно его вписывать - не понимаю (метод тыка результатов не принес). Если сможете объяснить, в чем ошибка - буду крайне признательна. Код прилагается. Спасибо! <style type="text/css"> #navigation { list-style: none; float:left; color: white; font-family: Franklin Gothic Medium; font-size:14px; width: 100%; } #navigation li { float:left; position:relative; display:block; } #navigation li a { text-decoration:none; color: white; font-family: Franklin Gothic Medium; font-size:14px; padding: 10px; background: #333333; } #navigation li a:hover { color:#000; background:#FFF; padding: 10px; } #navigation ul { position:absolute; top: -9999px; list-style: none; } #navigation ul a { white-space: nowrap; display:block; } #navigation li:hover ul { display: block; top: 28px; position:absolute; } #navigation li:hover a { background: #FFF; color: #000; border: none; } </style> <body> <div style="height: 300px; width: 100%; background-color: #DDD;"> <ul id="navigation" > <li><a href="#">ГЛАВНАЯ</a> <ul> <li><a href="#">О КОМПАНИИ</a></li> <li ><a href="#">О ПРОДУКЦИИ</a></li> <li ><a href="#">О ЖИЗНИ</a></li> </ul> </li> <li><a href="#">УСЛУГИ</a></li> <li><a href="#">ПРАЙС-ЛИСТ</a></li> <li><a href="#">ПОЧЕМУ МЫ</a></li> <li><a href="#">ПРЕСС-ЦЕНТР</a></li> <li><a href="#">PRO BONO</a></li> <li><a href="#">КОНТАКТЫ</a></li> </ul> </div>
-
Подскажите, можно чисто теоретически. Как делают такие меню? Т.е. чтобы фон слева продолжался по максимуму влево. Ну а справа чтобы фон "обрезался" по-последнему элементу.
-
удалите пжлст. прошу прощения
-
Собственно само меню: http://jsfiddle.net/npofopr/TygPr/ Не могу понять, как мне у активного пункта убирать все бордеры. Т.е. чтобы не было той белой полоски справа. Пришло на ум только делать у активного тень, которая будет скрывать границу. Больше ничего не придумывается. Делать по другому границы... Особо вариантов не много вроде. Подскажите, кто чем может.
-
Добрый день, Ув. Форумчанены. Я у Вас новичек, но много полезной информации увидил на форуме. Вот решил создать сайт дял автосервиса и столкнулся с такой проблемой. Сделал я меню картинками, т.к знакомый так попросил. Задача была такая: Поставить активный пукнт меню второй картинкой. Я думал это мелочи жизни, т.к на подобии кодом .актив ставил много раз. Начал делать менюшку, с ховером всё отлично получилось при наведении пункт меню меняет. Но при клике, ни чего. +( Может кто посоветует что либо?! Ссылка на сайт тут Код меню: <div id="menu"> <ul> <?php if ($multi_lang == '') { echo ' <li><a class="onas" href="./?page=onas" '.($page=='onas'?('class="onas"'):'').'></a></li> <li><a class="uslugi" href="./?page=uslugi" '.($page=='uslugi'?('class="uslugi"'):'').'></a></li> <li><a class="klienti" href="./?page=klienti" '.($page=='klienti'?('class="klienti"'):'').'></a></li> <li><a class="partneri" href="./?page=partneri" '.($page=='partneri'?('class="partneri"'):'').'></a></li> <li><a class="otvetstvennostj" href="./?page=otvetstvennostj" '.($page=='otvetstvennostj'?('class="otvetstvennostj"'):'').'></a></li> <li><a class="kontakti" href="./?&page=kontakti"'.($page=='kontakti'?('class="kontakti"'):'').'></a></li> '; } ?php> Цсс код: .onas { width: 125px; height: 57px; background-image: url(../menu/1.png); background-repeat: no-repeat; display: block; text-decoration: none; } a.onas:hover { background-image: url(../menu/1-1.png); } .uslugi{ width: 129px; height: 57px; background-image: url(../menu/2.png); background-repeat: no-repeat; display: block; text-decoration: none; } a.uslugi:hover { background-image: url(../menu/2-2.png); } Пробывал делать так: .onas { width: 124px; height: 128px; background-image: url(../menu/1.png); background-repeat: no-repeat; display: block; text-decoration: none; } a.onas:active { background-image: url(../menu/1-1.png); } Не помогло! С Уважением, Алексей
-
Добрый день! Помогите, пожалуйста, с кодом. Меню. Иконки (в примере она одна) будут расположены вертикально (всего их будет шесть штук). В "спокойной режиме", видно только иконки (с изображением). При наведении "выезжает" плашка с текстом. И пользователь может нажать как на иконку, так и на плашку. Как только указатель мышки "ушел", плашка снова пропадает. Помогите, пожалуйста!
