Menu burger icon

SVG Vector SVG VectorsBurger Menu Right SVG Vector is a part of SVG Vector vector collection. Following vectors are from the same pack as this vector also checkout all SVG Vector icons and vectors. SVG Icon SVG Icon SVG Icon SVG Icon SVG Icon SVG Icon SVG Icon SVG Icon SVG Icon SVG Icon SVG Icon SVG Icon SVG Icon SVG Icon SVG Icon SVG Icon SVG Icon SVG Icon SVG Icon SVG IconSee All CollectionNo Ads here 🤗Instead, you can give us a Share on Twitter.×Burger Menu Right SVG VectorsCheckout other Burger Menu Right Vectors with different styles in SVG vector and icon library. SVG Icon SVG Icon SVG Icon SVG Icon SVG Icon SVG Icon SVG Icon SVG Icon SVG Icon SVG Icon SVG Icon SVG Icon SVG Icon SVG Icon SVG Icon SVG Icon SVG Icon SVG Icon SVG Icon SVG IconSee More Burger Menu Right Vectors

Are you sure you want to delete this collection? We are sorry you canceled your Premium subscription You can still enjoy Flaticon Collections with the following limits: You can choose only 3 collections to keep You can only add up to 100 icons per collection You cannot add Premium icons to your collection The advantages of your collections changed You can choose only 3 collections to keep You can only add up to 100 icons per collection You cannot add Premium icons to your collection Keep making the most of your icons and collections Get 20% OFF our Annual Premium Plan Select 3 collections to continue: You have 8 collections but can only unlock 3 of them Report download Base 64 encoded image Copy the base64 encoded data and insert it in you document HTML or CSS. Need help? Maybe this link can help you Using it for web? Copy this link in your website: Check our Menu-burger icon font in action See how our icon font will look on your web interfaces or Android and iOS apps projects. See how Menu-burger icon looks like in a mobile app Menu-burger icon in a button Menu-burger icon in a button Menu-burger icon Is perfect in your next interface design. Find the best Menu-burger icon font for your project.Search among +41,400 icons fonts including your favorite brands icons! See all icons Any doubts? Take a quick look at our starting guide where we easily explain how to use our interface icons, download, using CSS, switch styles, and more! Contact us We listen to you. Have you had any issues or suggestions about our Uicons? Our support team will help you with them. $(function(){ $('input, textarea').placeholder(); });

介绍侧边栏菜单是一种出现在网页侧面的导航形式。这些菜单提供对网站不同部分的访问，同时不干扰页面上的内容。按钮经常用于切换侧边栏菜单的打开和关闭。这些按钮往往有一个由三个水平线组成的图标来代表一个菜单。由于此图标的形状，它通常被称为“汉堡包”菜单图标。两条外线形成“面包”，中间线形成“馅饼”。react-burger-menu是一个允许您为 React 应用程序创建侧边栏的库。它还带有多种效果和样式，用于自定义菜单的外观和感觉。在本教程中，您将为react-burger-menu一个提供沙拉、比萨饼和甜点的名义餐厅网站使用和构建侧边栏。先决条件要完成本教程，您需要：Node.js 的本地开发环境。遵循如何安装 Node.js 并创建本地开发环境。本教程已通过 Node v14.7.0、npmv6.14.7、reactv16.13.1 和react-burger-menuv2.7.1 验证。步骤 1 — 设置项目从使用create-react-app生成一个 React App 开始，然后安装依赖项：npx create-react-app react-burger-menu-example切换到新的项目目录：cd react-burger-menu-example接下来，打开index.css：nano src/index.css添加以下样式：源代码/索引.css* { box-sizing: border-box;}#page-wrap { padding-bottom: 10px; padding-top: 10px;}此代码将box-sizing属性设置border-box为解决 CSS 盒模型计算问题。此代码还建立了一些垂直填充以防止边距折叠。将更改保存到index.css然后打开App.js：nano src/App.js删除logo.svg并用App示例餐厅的消息替换组件的内容：源代码/App.jsimport React from 'react';import './App.css';function App() { return ( id="outer-container"> Cool Restaurant Check out our offerings in the sidebar! );}export default App;outer-container和page-wrap是重要的ids，稍后将被引用react-burger-menu。保存更改后，您可以运行 React 应用程序：npm start 修复项目的任何错误或问题，然后localhost:3000在 Web 浏览器中打开：一旦您正确显示了Cool Restaurant消息，您就可以开始构建侧边栏。您的侧边栏将需要react-burger-menu一个 React 组件。首先，安装react-burger-menu：npm install [email protected]现在，Sidebar.js为新Sidebar组件创建一个新文件：nano src/Sidebar.js添加以下代码：源代码/侧边栏.jsimport React from 'react';import { slide as Menu } from 'react-burger-menu';export default props => { return ( Home Salads Pizzas Desserts );};此代码将生成一个Sidebar与菜单链接Home，Salads，Pizzas，和Desserts。本教程不会为这些项目创建单独的路由。相反，它将专注于Sidebar自身的功能。react-burger-menu将要求您提供一些样式，因此创建一个Sidebar.css文件：nano src/Sidebar.css添加react-burger-menu文档提供的默认样式：src/Sidebar.css/* Position and sizing of burger button */.bm-burger-button { position: fixed; width: 36px; height: 30px; left: 36px; top: 36px;}/* Color/shape of burger icon bars */.bm-burger-bars { background: #373a47;}/* Color/shape of burger icon bars on hover*/.bm-burger-bars-hover { background: #a90000;}/* Position and sizing of clickable cross button */.bm-cross-button { height: 24px; width: 24px;}/* Color/shape of close button cross */.bm-cross { background: #bdc3c7;}/*Sidebar wrapper stylesNote: Beware of modifying this element as it can break the animations - you should not need to touch it in most cases*/.bm-menu-wrap { position: fixed; height: 100%;}/* General sidebar styles */.bm-menu { background: #373a47; padding: 2.5em 1.5em 0; font-size: 1.15em;}/* Morph shape necessary with bubble or elastic */.bm-morph-shape { fill: #373a47;}/* Wrapper for item list */.bm-item-list { color: #b8b7ad; padding: 0.8em;}/* Individual item */.bm-item { display: inline-block;}/* Styling of overlay */.bm-overlay { background: rgba(0, 0, 0, 0.3);}对于您的教程，您需要应用链接颜色和悬停颜色。修改Sidebar.css以添加这些自定义样式：src/Sidebar.css/* Individual item */.bm-item { display: inline-block; color: #d1d1d1; margin-bottom: 10px; text-align: left; text-decoration: none; transition: color 0.2s;}.bm-item:hover { color: #ffffff;}最后，要Sidebar在您的应用程序中使用 ，您需要重新访问App.js：nano src/App.js导入Sidebar组件并将其添加到您的App组件中：源代码/App.jsimport React from 'react';import Sidebar from './Sidebar';import './App.css';function App() { return ( Cool Restaurant Check out our offerings in the sidebar! );}export default App;此时，您可以再次运行您的应用程序：npm start修复项目的任何错误或问题。并localhost:3000在网络浏览器中访问：现在，如果你点击“汉堡包”菜单图标，你的工具栏菜单中会出现链接Home，Salads，Pizzas，和Desserts：接下来，您可以探索一些可用于react-burger-menu.第 3 步 – 添加高级动画现在，您的侧边栏使用slide动画。react-burger-menu带有十种动画可能性。要尝试另一个动画，请打开Sidebar.js：nano src/Sidebar.js并替换slide为不同的动画：源代码/侧边栏.js// ...import { bubble as Menu } from 'react-burger-menu';// ...此代码将导致菜单出现气泡效果。源代码/侧边栏.js// ...import { elastic as Menu } from 'react-burger-menu';// ...此代码将使菜单显示为具有弹性效果。完整的动画列表可以在react-burger-menu文档中找到。该文档还具有高级自定义功能，可让侧边栏菜单适合您的应用程序。结论在本教程中，您曾经react-burger-menu创建过侧边栏菜单。侧边栏菜单是导航网站的一种常见解决方案。存在侧边栏菜单的替代库，您可能会找到更适合您的应用程序的库。如果您想了解有关 React 的更多信息，请查看我们的How To Code in React.js系列，或查看我们的 React 主题页面以获取练习和编程项目。