标签: hamburger-menu

我需要一些bootstrap导航的帮助.我想通过移动设备上的汉堡包图标切换它.

这是在codepen:http://codepen.io/sadman/pen/hfGwv (链接无效)

.navbar,
.navbar-inverse {
  border-radius: 0;
  border: none;
  margin-bottom: 0;
  min-height: 80px;
}

.nav li {
  display: inline;
  color: white;
}

.navbar-inverse .navbar-nav>li>a {
  color: #ffffff;
  font-family: Lato;
  font-size: 1.7em;
  font-weight: 300;
  padding: 30px 25px 33px 25px;
}

.navbar-inverse .navbar-nav li a:hover {
  background-color: #444444;
  transition: 0.7s all linear;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
  <div class="container">
    <ul class="nav navbar-nav">
      <li><a href="index.php">Home</a></li>
      <li><a href="about.php">About</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a …

谷歌和其他一些开发人员向我们介绍了一些所谓的汉堡菜单按钮,现在是3个垂直点按钮或垂直省略号.这些按钮/图标的官方名称是什么？

如果开发人员能够始终如一地使用特定图标进行菜单,那就太好了.知道要告诉新手用户按什么也很好.

背景资料:

水平省略号... … … …
Apple使用水平省略号并将其称为" 更多选项"图标.
根据https://design.google.com/icons/,该图标称为"更多horiz".

垂直省略号⋮ ⋮ ⋮ ⋮
Google+桌面版似乎将其用作社区菜单.Google+应用使用此图标作为标准菜单图标.
根据https://design.google.com/icons/,该图标称为"更多顶点".

与≡相同≡ ≡ ≡
Google谷歌浏览器使用类似于相同的图像并将其称为 Chrome菜单.
它也被称为"汉堡包"图标,"热狗"图标,选项菜单,菜单按钮,溢出菜单,侧面菜单,菜单抽屉......
根据https://design.google.com/icons/,图标是称为"菜单".

我想突出我的抽屉图标Toolbar(制作教程).为此,我需要它的立场.如何获得抽屉导航图标(汉堡包)视图的参考？

我注意到,随着Android最近的Gmail更新,当您点击其中一封电子邮件时,会打开一个新的活动(我假设它不是因为后退箭头而产生的碎片).

但是,新活动的后退箭头不会像默认情况那样显示.主界面的汉堡菜单旋转成动画中的箭头(请参阅此处的视频:http://material-design.storage.googleapis.com/publish/material_v_3/material_ext_publish/0B3T7oTWa3HiFbFRfT196SWRyS2s/animation_delightfuldetails_wellcrafted.webm)

(注意:新打开的电子邮件可能是一个片段,因为工具栏没有更改,默认的新活动动画不播放.我不确定它是哪一个.)

澄清:我知道如何让汉堡包菜单在按下/打开导航抽屉时变成箭头.事实上,我故意禁用所说的动画,因为它违反了规范.(参见这篇文章:http://www.androidpolice.com/2014/10/30/google-turns-design-inconsistency-ten-latest-round-navigation-drawers/).但是,我想知道,如果在创建新的片段/活动时可以使用相同的动画,无论Gmail使用哪一个.

我正在尝试更改汉堡包菜单图标,NavigationView但我无法这样做.

这是我到目前为止所尝试的

我有一个基本活动,其中导航抽屉设置完成.这是相关的一段代码

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    super.setContentView(R.layout.activity_base_nav);
    setSupportActionBar(toolbar);
    setupDrawer();
}

private void setupDrawer() {
    mDrawerLayout.setDrawerListener(this);

    mDrawerToggle = new ActionBarDrawerToggle(this,
            mDrawerLayout,
            R.string.open,
            R.string.close);

    mDrawerToggle = new ActionBarDrawerToggle(mContext,
            mDrawerLayout,
            R.string.open,
            R.string.close);

    mDrawerLayout.setDrawerListener(mDrawerToggle);

    if (getSupportActionBar() != null) {
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setDefaultDisplayHomeAsUpEnabled(false);
        mDrawerToggle.setDrawerIndicatorEnabled(false);
       mDrawerToggle.setHomeAsUpIndicator(R.drawable.ic_share_48pt_2x);
    }
    mDrawerToggle.syncState();

    mNavigationView.setNavigationItemSelectedListener(
            menuItem -> {
                mMenuItem = menuItem.getItemId();
                mDrawerUtil.onNavMenuItemClicked(mMenuItem);
                mDrawerLayout.closeDrawers();
                return true;
            });
}

@Override 
public void setContentView(int layoutResID) {
    getLayoutInflater().inflate(layoutResID, mContainer);
}


@Override
protected void onPostCreate(Bundle savedInstanceState) {
    super.onPostCreate(savedInstanceState);
    mDrawerToggle.syncState();
}

@Override
public …

我有这个导航抽屉,工作得非常好.重构我的代码我删除了所有onOptionsItemSelecteds活动,并使所有活动都继承自扩展AppComplatActivity并实现所有必要方法的基本活动.在点击汉堡图标后,即使我有syncstate()和所有东西,它也不再起作用.

任何线索为什么这不起作用？

其中一项活动:

public class MainActivity extends BaseActivity implements SearchFilterFragment.OnFragmentInteractionListener {

NavigationView navigationView;
DrawerLayout drawerLayout;

private Tracker mTracker;

@Override
protected void onResume() {
    super.onResume();
    drawerLayout.openDrawer(GravityCompat.START);
}

@Override
protected void onPostResume() {
    super.onPostResume();
    mTracker.setScreenName("MainActivity" + "-----");
    mTracker.send(new HitBuilders.ScreenViewBuilder().build());
}

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    getWindow().getDecorView().setLayoutDirection(View.LAYOUT_DIRECTION_RTL);
    drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    drawerLayout.openDrawer(GravityCompat.START);
    navigationView = (NavigationView) findViewById(R.id.navigation_view_primary);
    navigationView.setNavigationItemSelectedListener(new NavigationDrawerListener(this));
    setupToolbar();
    Haftdong application = (Haftdong) getApplication();
    mTracker = application.getDefaultTracker();
}

private void …

嗨我想删除工具栏的下方阴影,因为我使用了提升属性,目前我的代码是

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/transparent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"

            />
    </android.support.design.widget.AppBarLayout>


    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


  </android.support.design.widget.CoordinatorLayout>

输出是: -

在这里,我不想要下面的阴影,所以我设置

    app:elevation="0dp" 

到AppBarLayout,然后它删除阴影但HamburgerMenu消失了.新产出如下: -

任何人都可以告诉我如何在不隐藏/消失HamburgerMenu的情况下移除阴影.

如何使用布尔玛组件制作滑动垂直导航栏？我在布尔玛文档中找不到一个。我相信它们通常被称为“非画布”菜单或“汉堡”菜单。

有一个水平的，但我更喜欢这样的垂直，左侧样式：

https://www.sitepoint.com/pure-css-off-screen-navigation-menu/

我是新来的反应。我正在尝试在我的标题中进行导航。我使用布尔玛CSS：

"bulma": "^0.7.4",

我像这样导入 bulma 文件：

import 'bulma/css/bulma.css';

它适用于大多数CSS，但不适用于汉堡菜单，当我单击汉堡按钮时菜单不会折叠

这是我的标题代码：

import React,{Component} from 'react'
import {NavLink} from 'react-router-dom';
import style from './style.css';

class Header extends Component{

    render(){
        return (
            <React.Fragment>
                <nav className="navbar is-fixed-top" role="navigation" aria-label="main navigation">
                    <div className="navbar-brand">
                        <a href="/" className="navbar-item" to="/">
                        <img src="" alt="" width={112} height={28}/>
                        </a>

                        <a role="button" className="navbar-burger burger " aria-label="menu" aria-expanded="false" data-target="mainNavbar">
                        <span aria-hidden="true"></span>
                        <span aria-hidden="true"></span>
                        <span aria-hidden="true"></span>
                        </a>
                    </div>

                    <div  id="mainNavbar" className="navbar-menu">

                        <div className="navbar-start">
                            <NavLink exact activeClassName={style.active} to="/"  className="navbar-item">
                                Home
                            </NavLink>

                            <NavLink activeClassName={style.active} to="/films"  className="navbar-item"> …

我使用 HTML、CSS 和 JS 制作了一个汉堡菜单，它工作得很好，但我想最小化我的 JS 逻辑。
我在YouTube上做了一些研究，但每个人都有几乎相同的逻辑。
看看我的JS逻辑，我可以最小化我的JS逻辑吗？

如果你有更好的简短的 JS 逻辑，请回答我。

HTML：

    <div class="menu-btn">
      <div class="hamburger"></div>
    </div>
    <div class="menu-list">
      <ul class="menu-items">
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#skills">Skills</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>

JS逻辑：

const hamburgerMenu = document.querySelector(".menu-btn");
const hamburger = document.querySelector(".hamburger");
const menuList = document.querySelector(".menu-list");
const homePage = document.getElementById("#home");

hamburgerMenu.onclick = () => {
  hamburger.classList.toggle("active");
  menuList.classList.toggle("active");
  hamburgerMenu.classList.toggle("active");
};
menuList.onclick = function (e) {
  if (e.target.classList !== "menu-btn") {
    hamburger.classList.remove("active");
    menuList.classList.remove("active");
    hamburgerMenu.classList.remove("active");
  }
};