CODE

Javascript code menu bar

This JavaScript code snippet helps you to create a menu bar. It defines the three variables using the document.querySelector and document.querySelectorAll methods to select the elements with the classes “sidebar”, “nav-item”, and “toggle” from the HTML document. Then, an event listener is added to the “toggle” element so that whenever it is clicked, the “open” class is either added or removed from the “sidebar” element depending on its current state. Finally, a loop is used to iterate over each of the “nav-item” elements and add an event listener so that when one of them is clicked, all of the “nav-item” elements have their “active” class removed, and the “active” class is added to the one that was clicked.

How to Create JavaScript Menu Bar

[email protected]/css/boxicons.min.css" rel="stylesheet">[email protected];400;500;600;700;800;900&family=Roboto:[email protected];400;500;700;900&display=swap" rel="stylesheet">
USER

* < margin: 0; padding: 0; border: 0; outline: 0; list-style: none; box-sizing: border-box; >body < height: 100vh; background-image: url('https://4kwallpapers.com/images/walls/thumbs_2t/9192.png'); background-repeat: no-repeat; background-size: cover; font-family: 'Roboto', sans-serif; >.sidebar < width: 120px; height: 200%; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background: rgba(10, 10, 10, .65); box-shadow: 0 8px 32px rgb(2, 4, 24); border-right: 2px solid rgba(255, 255, 255, .09); transition: .4s ease-in-out; >.sidebar.open < width: 360px; >.cd__main < display: block !important; >.sidebar .logo < width: 100%; height: 240px; padding: 40px 0; display: grid; align-items: center; justify-items: center; >.sidebar .logo img < width: 56px; transition: .4s; >.sidebar.open .logo img < width: 96px; >.sidebar .logo h3 < color: #fff; font-size: 36px; margin-top: 12px; font-variant: small-caps; pointer-events: none; scale: 0; opacity: 0; >.sidebar.open .logo h3 < scale: 1; opacity: 1; transition: .4s; transition-delay: .2s; >.sidebar .nav-title < color: #dadada; margin: 40px 0 18px; pointer-events: none; opacity: 0; >.sidebar.open .nav-title < opacity: 1; transition: .4s; transition-delay: .2s; >.sidebar nav < padding: 0 30px; >.sidebar nav .nav-item < cursor: pointer; display: flex; align-items: center; justify-content: flex-start; border-radius: 4px; width: 100%; height: 56px; padding: 0 16px; margin: 8px 0; color: #fff; transition: .3s; >.sidebar nav .nav-item.active < background: #ff328e !important; >.sidebar nav .nav-item:hover < background: rgba(255, 255, 255, .1); >.sidebar nav .nav-item i < font-size: 26px; >.sidebar nav .nav-item span < font-size: 18px; margin-left: 8px; opacity: 0; pointer-events: none; >.sidebar.open nav .nav-item span < opacity: 1; pointer-events: visible; transition: .4s; transition-delay: .2s; >.sidebar hr < width: 100%; height: 2px; border-radius: 3px; margin: 40px 0 50px; background: rgba(255, 255, 255, .1); opacity: 0; >.sidebar.open hr < opacity: 1; transition: .4s; >.sidebar .toggle < cursor: pointer; position: absolute; color: #fff; top: 180px; right: -20px; font-size: 38px; line-height: 50%; text-align: center; border-radius: 50%; padding: 2px 0 2px 2px; background: linear-gradient( 90deg, transparent 50%, rgba(10, 10, 10, .65) 50% ); >.sidebar.open .toggle < transform: translateY(45px); >.sidebar .toggle i < transition: .4s linear; >.sidebar.open .toggle i

const sidebar = document.querySelector('.sidebar'); const navItems = document.querySelectorAll('nav .nav-item'); const toggle = document.querySelector('.sidebar .toggle'); toggle.addEventListener('click', () => < if (sidebar.className === 'sidebar') sidebar.classList.add('open'); else sidebar.classList.remove('open'); >); navItems.forEach(navItem => < navItem.addEventListener('click', () => < navItems.forEach(navItem =>< navItem.classList.remove('active'); >); navItem.classList.add('active'); >); >);

That’s all! hopefully, you have successfully created the JavaScript menu bar. If you have any questions or suggestions, feel free to comment below.

Share this:

Источник

Руководство Javascript Menubar

Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи. Facebook

1- window.menubar

Свойтсво (property) window.menubar возвращает объект Menubar представляющий строку меню (menu bar) на браузере. Но вы почти не можете взаимодействовать с Menubar через Javascript так как он имеет очень мало API для вас.

 window.menubar // Or simple: menubar 

Тенденция современных браузеров делает окно Viewport как можно шире, поэтому они убирают другие компоненты как Statusbar, или уменьшают Menubar.

Свойство (property) menubar.visible возвращает true если строка меню отображена на браузере, и наоборот возвращает false.

Заметьте, что с современными браузерами, вы не можете настроить новое значение для menubar.visible, если вы намеренно сделаете это, оно не будет работать.

     
menubar.visible
 
 
 alert(menubar.visible)   

        
Menubar
 Open a New Window without menubar   

     
Some Page
 
1
 
1 2
 
1 2 3
   

View more Tutorials:

Это онлайн курс вне вебсайта o7planning, который мы представляем, он включает бесплатные курсы или курсы со скидкой.

• The Complete JavaScript Bootcamp
• Getting really good at JavaScript and TypeScript
• Essentials of JavaScript Practice Coding Exercises Tips
• Learn JavaScript From Scratch:Become Top Rated Web Developer
• JavaScript For Beginners — Learn JavaScript From Scratch
• Javascript for Beginners
• Learning ECMAScript 6: Moving to the New JavaScript
• JavaScript Dynamic Quiz Application from Scratch JSON AJAX
• JavaScript Intro to learning JavaScript web programming
• Byte-Sized-Chunks: Dynamic Prototypes in Javascript
• Learn ECMAScript 2015 — ES6 Best Course
• Getting started with javascript and its core concepts
• Quick JavaScript Core learning Course JavaScript Essentials
• * * Master ECMAScript 2015 (ES6)
• HTML CSS JavaScript: Most popular ways to code HTML CSS JS
• Learn JavaScript Fundamentals
• * * Start 3D GIS Web Development in JavaScript
• Learning JavaScript Programming Tutorial. A Definitive Guide
• 2D Game Development With HTML5 Canvas, JS — Tic Tac Toe Game
• JavaScript for Beginning Web Developers
• The Web Development Course: HTML5, CSS3, JavaScript
• JavaScript in 55 Minutes
• JavaScript in Action JavaScript Projects
• The complete beginner JavaScript ES5, ES6 and JQuery Course
• * * Introductory To JavaScript — Learn The Basics of JavaScript

Источник