Menu

Developer
Ddimonn8080
Size
3,823 Kb
Views
36,432
  1. Menu Previews
  2. Menu HTML Codes
  3. Menu CSS Codes
  4. Menu JS Codes

How do I make an menu?

What is a menu? How do you make a menu? This script and codes were developed by Ddimonn8080 on 01 August 2022, Monday.

Menu Previews
IQ Test

Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Menu </title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav class="nav"> <ul class="nav__list nav__list_js"> <li class="nav__item nav__item_js"> <div class="nav_itemTitle nav_itemTitle1 nav__itemTitle_js">Новости</div> <ul class="nav__subList nav__subList_js"> <li class="nav__subItem"><a href="#" class="nav__link">Лента новостей</a></li> <li class="nav__subItem"><a href="#" class="nav__link">Обзор прессы</a></li> <li class="nav__subItem"><a href="#" class="nav__link">Тема дня</a></li> <ul class="nav__subListHidden nav__subListHidden_js"> <li class="nav__subItem"><a href="#" class="nav__link">Главные новости</a></li> <li class="nav__subItem"><a href="#" class="nav__link">Пресс-релизы</a></li> <li class="nav__subItem"><a href="#" class="nav__link">Банковский словарь</a></li> <li class="nav__subItem"><a href="#" class="nav__link">Курсы ЦБ</a></li> </ul> </ul> </li> <li class="nav__item nav__item_js"> <div class="nav_itemTitle nav_itemTitle2 nav__itemTitle_js">Банки</div> <ul class="nav__subList nav__subList_js"> <li class="nav__subItem"><a href="#" class="nav__link">Банки Москвы</a></li> <li class="nav__subItem"><a href="#" class="nav__link">Банки России</a></li> <li class="nav__subItem"><a href="http://www.allbanks.ru/" class="nav__link">Все банки России на Allbanks.ru</a></li> <ul class="nav__subListHidden nav__subListHidden_js"> </ul> </ul> </li> <li class="nav__item nav__item_js"> <div class="nav_itemTitle nav_itemTitle3 nav__itemTitle_js">Продукты и Услуги</div> <ul class="nav__subList nav__subList_js"> <li class="nav__subItem"><a href="#" class="nav__link">Вклады</a></li> <li class="nav__subItem"><a href="#" class="nav__link">Потребительские кредиты</a></li> <li class="nav__subItem"><a href="#" class="nav__link">Специальные предложения</a></li> <ul class="nav__subListHidden nav__subListHidden_js"> <li class="nav__subItem"><a href="#" class="nav__link">Дебетовые карты</a></li> <li class="nav__subItem"><a href="#" class="nav__link">Кредитные карты</a></li> <li class="nav__subItem"><a href="#" class="nav__link">Предложения месяца</a></li> <li class="nav__subItem"><a href="#" class="nav__link">Вклады с подарками</a></li> <li class="nav__subItem"><a href="#" class="nav__link">Автокредиты</a></li> <li class="nav__subItem"><a href="#" class="nav__link">Кредиты для бизнеса</a></li> <li class="nav__subItem"><a href="#" class="nav__link">Курсы обмена валют</a></li> <li class="nav__subItem"><a href="#" class="nav__link">Кредитный калькулятор</a></li> <li class="nav__subItem"><a href="#" class="nav__link">Автокредитный калькулятор</a></li> </ul> </ul> </li> <li class="nav__item nav__item_js"> <div class="nav_itemTitle nav_itemTitle4 nav__itemTitle_js">Рейтинги</div> <ul class="nav__subList nav__subList_js"> <li class="nav__subItem"><a href="#" class="nav__link">Народный рейтинг</a></li> <li class="nav__subItem"><a href="#" class="nav__link">Кредитные рейтинги</a></li> <li class="nav__subItem"><a href="#" class="nav__link">Рейтинг интернет-банков</a></li> <ul class="nav__subListHidden nav__subListHidden_js"> <li class="nav__subItem"><a href="#" class="nav__link">Отзывы о банках</a></li> <li class="nav__subItem"><a href="#" class="nav__link">"Банк года" 2014</a></li> </ul> </ul> </li> </ul> <div class="openNav openNav_js">показать меню &darr;</div>	</nav> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Menu - Script Codes CSS Codes

ul,li { margin: 0; padding: 0; list-style: none;
}
a { color: #369; text-decoration: none;
}
a:hover { text-decoration: underline;
}
/* ------------------------>>> nav <<<----------------------------------------------------- */
.nav {	margin:0 0 18px 0;	padding:0 0 55px 0;	border:1px solid #EAEAEA;	position:relative;
}
.nav__list {	overflow: hidden;
}
.nav__item {	float: left;	width: 25%;
}
.nav_itemTitle {	height: 36px;	line-height: 36px;	font-size: 16px;	font-weight: 400;	color: #fff;	padding: 0 0 0 20px;
}
.nav_itemTitle1 {	background: #418CCE;
}
.nav_itemTitle2 {	background: #6CB44D;
}
.nav_itemTitle3 {	background: #F78F4A;
}
.nav_itemTitle4 {	background: #BF689F;
}
.nav__subList {	padding: 10px 0 0 20px;
}
.nav__subItem {	display: block;
}
.nav__link {	font-size: 14px;	font-weight: 400;	line-height: 24px;	display: block;
}
.openNav {	position:absolute;	bottom:0;	left:0;	height:39px;	line-height:39px;	border-top:1px solid #eaeaea;	border-right:1px solid #eaeaea;	padding:0 15px 0 10px;	color:#336699;	font-size:14px;	cursor:pointer;	background:#ECF0F1;
}
.nav__subListHidden {	display:none;
}
@media only screen and (max-width:750px) { .nav {	margin-bottom: 20px;	padding-bottom: 10px; } .nav__item { float: none; width: auto; } .nav_itemTitle { text-align: center; cursor: pointer; margin: 10px 0 0 0; } .nav__link { text-align: center; } .nav__subListHidden { display: block; } .nav__subList { display: none; } .openNav { display: none; }
}
/* ------------------------>>> nav End <<<------------------------------------------------- */

Menu - Script Codes JS Codes

$(document).ready(function(){
/*--------------------------------- функция для меню ---------------------------*/ function setMenu() { var $openNav = $('.openNav_js'), $subListHidden = $('.nav__subListHidden_js'), $itemTitle = $('.nav__itemTitle_js'), $navList = $('.nav__list_js'), $navItem = $('.nav__item_js'), $navSubList = $('.nav__subList_js'), maxWidth750 = 'only screen and (max-width : 750px)', minWidth750 = 'only screen and (min-width : 750px)'; // функция для открытия и закрытия меню в блоке nav при окне больше 750px function toggleMenu() {	$openNav.on('click', function() { $subListHidden.slideToggle(500, function() {//открывает и закрывает основное меню $openNav.html($(this).is(':hidden') ? 'показать меню &darr;' : 'скрыть меню &uarr;'); });	});	}	toggleMenu(); // функция для открытия и закрытия меню в блоке nav при окне больше 750px End // функция для открытия и закрытия меню в блоке nav при окне меньше 750px function toggleMenuMini() {	$navList.on('click', function(e) {	var $target = $(e.target),	$targetNext = $target.next('.nav__subList_js'),	hasClass = $target.hasClass('nav__itemTitle_js'),	floatValue = $navItem.css('float');	if ( hasClass && floatValue === 'none') {//если клик по нужному блоку и меню находится в мобильной версии	if ($targetNext.is(':hidden')) {//если пункт меню скрыт	$navSubList.slideUp();//закрывает все пункты	$targetNext.slideDown();//открывает тот по которому кликнули	} else {	$navSubList.slideUp();//иначе,если клик по открытому, то закрывает его	}	}	});	}	toggleMenuMini(); // функция для открытия и закрытия меню в блоке nav при окне меньше 750px End // открытие и закрытие меню в блоке nav при изменении окна браузера $(window).resize(function(){ console.log(window.innerWidth);//вывод в консоль ширины окна браузера	if ($navSubList.is(':hidden') && window.matchMedia(minWidth750).matches) { $navSubList.show(); $subListHidden.hide();	} else if (window.matchMedia(maxWidth750).matches) { $navSubList.hide(); $subListHidden.show();	} else if (window.matchMedia(minWidth750).matches) { $subListHidden.hide(); $openNav.html('показать меню &darr;');	} }); // открытие и закрытие меню в блоке nav при изменении окна браузера End } setMenu();
/*--------------------------------- функция для меню End-----------------------------*/
});
Menu - Script Codes
Menu - Script Codes
Home Page Home
Developer Ddimonn8080
Username ddimonn8080
Uploaded August 01, 2022
Rating 3
Size 3,823 Kb
Views 36,432
Do you need developer help for Menu?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ddimonn8080 (ddimonn8080) Script Codes
Name
Menu icons css
A Pen by ddimonn8080
Bootstrap grid sistem
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!