Html 如何在侧边栏中创建子菜单_Html

Html 如何在侧边栏中创建子菜单

html

Html 如何在侧边栏中创建子菜单,html,Html,我正试图在侧边栏中创建这种类型的社交子菜单。社交子菜单的选项有：fb、twitter、youtube 我的html： <ul class="sidebar-nav" id="sidebar"> <li class="sub-sidebar-brand"><a href="#/abc">abc<span class="sub_icon fa fa-upload"></span></a&

我正试图在侧边栏中创建这种类型的社交子菜单。社交子菜单的选项有：fb、twitter、youtube

我的html：

<ul class="sidebar-nav" id="sidebar">
        <li class="sub-sidebar-brand"><a href="#/abc">abc<span
                class="sub_icon fa fa-upload"></span></a></li>
        <li class="sub-sidebar-brand"><a href="#/System">System<span
                class="sub_icon fa fa-hdd-o"></span>
        </a></li>
        <li class="sub-sidebar-brand"><a href="#/web">Web<span
                class="sub_icon fa fa-hdd-o"></span></a></li>
        <li class="sub-sidebar-brand"><a href="#/social">Social<span
                class="sub_icon fa fa-hdd-o"></span></a></li>
    </ul>

这里我尝试为social.social创建一个子菜单，它应该是一个包含3个选项的下拉列表。单击social下拉列表中的一个选项，应该重定向到其他页面

我在这里怎么做？有人能帮我一下吗。

试试这个方法

$（'.sidebar nav li a'）。单击（函数（）{
$（this.parent（）.toggleClass（'active'））
})

.sidebar导航{列表样式：无；宽度：200px；}
.子菜单{填充：0；显示：无；列表样式：无；}
.sidebar nav li.active ul{display:block；}

试试这种方法

$（'.sidebar nav li a'）。单击（函数（）{
$（this.parent（）.toggleClass（'active'））
})

.sidebar导航{列表样式：无；宽度：200px；}
.子菜单{填充：0；显示：无；列表样式：无；}
.sidebar nav li.active ul{display:block；}

这是一个适用于React的解决方案

用图像替换材质图标

import React, { useState } from "react";
import styled from "@emotion/styled";
import { useHistory } from "react-router-dom";
import { css } from "@emotion/core";
import Icon from "@material-ui/core/Icon";
import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";

const MenuItem = (props) => {
  const {
    page,
    isSubMenu = false,
    onClick,
    isActive = false,
    showArrow,
  } = props;



const { name, icon } = page;

  return (
    <MenuItem.Wrapper
      isActive={isActive}
      isSubMenu={isSubMenu}
      onClick={() => onClick(page)}
    >
      <Icon>{icon}</Icon>
      <div className="d-flex justify-content-between w-100">
        <span className="name-holder">{name}</span>
        {showArrow && <KeyboardArrowDownIcon />}
      </div>
    </MenuItem.Wrapper>
  );
};

MenuItem.Wrapper = styled.span`
  font-size: 14px;
  display: flex;
  align-items: center;
  color: white;
  margin-bottom: 13px;
  border-radius: 0 24px 24px 0;
  padding: 11px 20px;
  .name-holder {
    margin-left: 2rem;
  }
  .show-arrow {
    display: none;
  }
  &:hover {
    background-color: #f7c948;
    cursor: pointer;
  }

  ${(props) =>
    props.isSubMenu &&
    css`
      padding-left: 20px;
    `}

  ${(props) =>
    props.isActive &&
    css`
      background-color: #f7c948;
      cursor: pointer;
    `}
`;

const SubMenu = (props) => {
  const [visible, setVisible] = useState(false);
  const { icon, name, pages, onSubMenuClick } = props;

  const itemPage = {
    name,
    icon,
    link: "",
  };

  const currentLocation = window.location.pathname;

  console.log("currentLocation:", currentLocation);

  return (
    <React.Fragment>
      <MenuItem
        page={itemPage}
        showArrow
        onClick={() => setVisible(!visible)}
      />

      <SubMenu.Wrapper visible={visible}>
        {pages.map((page, index) => (
          <MenuItem
            isActive={currentLocation === page.link}
            key={index}
            isSubMenu
            page={page}
            onClick={onSubMenuClick}
          />
        ))}
      </SubMenu.Wrapper>
    </React.Fragment>
  );
};

SubMenu.Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  max-height: 0;
  transition: max-height 0.15s ease-out;
  overflow: hidden;
  ${(props) =>
    props.visible &&
    css`
      max-height: 500px;
      transition: max-height 0.25s ease-in;
    `}
`;

const SideBarHandler = (props) => {
  const { pages } = props;
  const history = useHistory();
  const currentLocation = window.location.pathname;
  const menuItemClickHandler = (page) => history.push(page.link);

  return (
    <div>
      <div className="items">
        {pages.map((page, index) => {
          const { name, icon, submenu } = page;

          return submenu === undefined ? (
            <MenuItem
              isActive={currentLocation.includes(page.link)}
              page={page}
              key={index}
              onClick={menuItemClickHandler}
            />
          ) : (
            <SubMenu
              onSubMenuClick={menuItemClickHandler}
              key={page.name}
              name={name}
              icon={icon}
              pages={submenu}
            />
          );
        })}
      </div>
    </div>
  );
};

export default SideBarHandler;

import React，{useState}来自“React”；
从“@emotion/styled”导入样式；
从“react router dom”导入{useHistory}；
从“@emotion/core”导入{css}；
从“@material ui/core/Icon”导入图标；
从“@material ui/icons/KeyboardArrowDown”导入键盘箭头向下图标；
常量菜单项=（道具）=>{
常数{
页
isSubMenu=false，
onClick，
isActive=false，
showArrow，
}=道具；
const{name，icon}=页面；
返回(
单击（第页）}
>
{icon}
{name}
{showArrow&&}
);
};
MenuItem.Wrapper=styled.span`
字体大小：14px；
显示器：flex；
对齐项目：居中；
颜色：白色；
边缘底部：13px；
边界半径：0 24px 24px 0；
填充：11px 20px；
.姓名持有人{
左边距：2em；
}
.显示箭头{
显示：无；
}
&：悬停{
背景色：#f7c948；
光标：指针；
}
${（道具）=>
props.isSubMenu&&
css`
左侧填充：20px；
`}
${（道具）=>
道具&&
css`
背景色：#f7c948；
光标：指针；
`}
`;
常量子菜单=（道具）=>{
const[visible，setVisible]=useState（false）；
const{icon，name，pages，onSubMenuClick}=props；
const itemPage={
名称
偶像
链接：“，
};
const currentLocation=window.location.pathname；
日志（“当前位置：”，当前位置）；
返回(
setVisible（！visible）}
/>
{pages.map（（页面，索引）=>(
))}
);
};
子菜单.Wrapper=styled.div`
显示器：flex；
弯曲方向：立柱；
最大高度：0；
过渡：最大高度0.15s放松；
溢出：隐藏；
${（道具）=>
可见道具&&
css`
最大高度：500px；
过渡：最大高度0.25s缓进；
`}
`;
常量SideBarHandler=（道具）=>{
const{pages}=props；
const history=useHistory（）；
const currentLocation=window.location.pathname；
const menuItemClickHandler=（page）=>history.push（page.link）；
返回(
{pages.map（（页面，索引）=>{
常量{名称，图标，子菜单}=页面；
返回子菜单===未定义(
) : (
);
})}
);
};
导出默认边栏处理程序；

这是一个适用于React的解决方案

用图像替换材质图标

import React, { useState } from "react";
import styled from "@emotion/styled";
import { useHistory } from "react-router-dom";
import { css } from "@emotion/core";
import Icon from "@material-ui/core/Icon";
import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";

const MenuItem = (props) => {
  const {
    page,
    isSubMenu = false,
    onClick,
    isActive = false,
    showArrow,
  } = props;



const { name, icon } = page;

  return (
    <MenuItem.Wrapper
      isActive={isActive}
      isSubMenu={isSubMenu}
      onClick={() => onClick(page)}
    >
      <Icon>{icon}</Icon>
      <div className="d-flex justify-content-between w-100">
        <span className="name-holder">{name}</span>
        {showArrow && <KeyboardArrowDownIcon />}
      </div>
    </MenuItem.Wrapper>
  );
};

MenuItem.Wrapper = styled.span`
  font-size: 14px;
  display: flex;
  align-items: center;
  color: white;
  margin-bottom: 13px;
  border-radius: 0 24px 24px 0;
  padding: 11px 20px;
  .name-holder {
    margin-left: 2rem;
  }
  .show-arrow {
    display: none;
  }
  &:hover {
    background-color: #f7c948;
    cursor: pointer;
  }

  ${(props) =>
    props.isSubMenu &&
    css`
      padding-left: 20px;
    `}

  ${(props) =>
    props.isActive &&
    css`
      background-color: #f7c948;
      cursor: pointer;
    `}
`;

const SubMenu = (props) => {
  const [visible, setVisible] = useState(false);
  const { icon, name, pages, onSubMenuClick } = props;

  const itemPage = {
    name,
    icon,
    link: "",
  };

  const currentLocation = window.location.pathname;

  console.log("currentLocation:", currentLocation);

  return (
    <React.Fragment>
      <MenuItem
        page={itemPage}
        showArrow
        onClick={() => setVisible(!visible)}
      />

      <SubMenu.Wrapper visible={visible}>
        {pages.map((page, index) => (
          <MenuItem
            isActive={currentLocation === page.link}
            key={index}
            isSubMenu
            page={page}
            onClick={onSubMenuClick}
          />
        ))}
      </SubMenu.Wrapper>
    </React.Fragment>
  );
};

SubMenu.Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  max-height: 0;
  transition: max-height 0.15s ease-out;
  overflow: hidden;
  ${(props) =>
    props.visible &&
    css`
      max-height: 500px;
      transition: max-height 0.25s ease-in;
    `}
`;

const SideBarHandler = (props) => {
  const { pages } = props;
  const history = useHistory();
  const currentLocation = window.location.pathname;
  const menuItemClickHandler = (page) => history.push(page.link);

  return (
    <div>
      <div className="items">
        {pages.map((page, index) => {
          const { name, icon, submenu } = page;

          return submenu === undefined ? (
            <MenuItem
              isActive={currentLocation.includes(page.link)}
              page={page}
              key={index}
              onClick={menuItemClickHandler}
            />
          ) : (
            <SubMenu
              onSubMenuClick={menuItemClickHandler}
              key={page.name}
              name={name}
              icon={icon}
              pages={submenu}
            />
          );
        })}
      </div>
    </div>
  );
};

export default SideBarHandler;

import React，{useState}来自“React”；
从“@emotion/styled”导入样式；
从“react router dom”导入{useHistory}；
从“@emotion/core”导入{css}；
从“@material ui/core/Icon”导入图标；
从“@material ui/icons/KeyboardArrowDown”导入键盘箭头向下图标；
常量菜单项=（道具）=>{
常数{
页
isSubMenu=false，
onClick，
isActive=false，
showArrow，
}=道具；
const{name，icon}=页面；
返回(
单击（第页）}
>
{icon}
{name}
{showArrow&&}
);
};
MenuItem.Wrapper=styled.span`
字体大小：14px；
显示器：flex；
对齐项目：居中；
颜色：白色；
边缘底部：13px；
边界半径：0 24px 24px 0；
填充：11px 20px；
.姓名持有人{
左边距：2em；
}
.显示箭头{
显示：无；
}
&：悬停{
背景色：#f7c948；
光标：指针；
}
${（道具）=>
props.isSubMenu&&
css`
左侧填充：20px；
`}
${（道具）=>
道具&&
css`
背景色：#f7c948；
光标：指针；
`}
`;
常量子菜单=（道具）=>{
const[visible，setVisible]=useState（false）；
const{icon，name，pages，onSubMenuClick}=props；
const itemPage={
名称
偶像
链接：“，
};
const currentLocation=window.location.pathname；
日志（“当前位置：”，当前位置）；
返回(
setVisible（！visible）}
/>
{pages.map（（页面，索引）=>(
))}
);
};
子菜单.Wrapper=styled.div`
显示器：flex；
弯曲方向：立柱；
最大高度：0；
特兰