堆栈内存溢出
  繁体   English   中英

如何完成侧边栏菜单？

[英]How to complete sidebar menu?

 原文  2022-01-15 16:30:46  0   1    javascript/ menu/ jquery-selectors/ sidebar

问题描述

我在尝试完成侧边栏菜单时遇到问题。 现在内容直接显示在 header 下，而不是在单击菜单选项卡时显示。 关闭菜单按钮也包含在标签中，但它现在似乎没有做任何事情。 我可以弄清楚侧边栏的过渡，但我的问题是在单击 header 附近的按钮时显示内容。 我认为使用查询选择器会自动使其显示侧边栏菜单。 请让我知道我错过了什么。

应用程序.js：

import fzero from './image/fzero.jpg';
import sonic from './image/sonic.jpg';
import retail from './image/retail.jpg';
import mark from './image/mark.jpg';
import heli from './image/heli.png';
import team from './image/team.png';
import tiger from './image/tiger.png';
import mario from './image/mario.jpg';
import './index.css';

function App() {

  const openMenu = () =>{
    document.querySelector('.sidebar').classList.add('open')
  }

  const closeMenu = () =>{
    document.querySelector('.sidebar').classList.remove('open')
  }


  return (
<div className="App"> 
  <body>
    <header>
      <div className='head1'>
        <div className='dropdown'>
          <button onClick={openMenu}>&#9776;</button>

        </div>

        <h1>GameShop</h1>
      </div>
    </header>

    <aside className="sidebar">
      <h3>Extras</h3>
      <button className="side-close" onClick={closeMenu}>X</button>
      <ul>
        <li>
          <a href="index.html">Accessories</a>
        </li>

        <li>
        <a href="index.html">Pre-orders</a>
        </li>
      </ul>
    </aside>
    
      <div className='container'>
        <div className='prod'>
          <img src={fzero} className="fzero" alt="logo" />
          <div className='item'>
            <a className="cover" href="">
              F-zero 
            </a>

            <div className='system'>
              <p>Nintendo Switch</p>
            </div>

            <div className="price">
              <p>$59.99</p>
            </div>
          </div>
        </div>

        <div className='prod'>
          <img src={sonic} className="sonic" alt="logo" />
          <div className='item'>
            <a className="cover" href="">
              Sonic Earth
            </a>

            <div className='system'>
              <p>Playstation</p>
            </div>

            <div className='price'>
              <p>$49.99</p>
            </div>
          </div>
        </div>

        <div className='prod'>
          <img src={retail} className="retail" alt="logo" />
          <div className='item'>
            <a className="cover" href="">
              Retail Manager 13
            </a>

            <div className='system'>
              <p>PC</p>
            </div>

            <div className='price'>
              <p>$12.99</p>
            </div>
          </div>
        </div>

        <div className='prod'>
          <img src={mark} className="mark" alt="logo" />
          <div className='item'>
            <a className="cover" href="">
              Mark Zuckerberg's Pro Surfer
            </a>

            <div className='system'>
              <p>Xbox</p>
            </div>
            
            <div className='price'>
              <p>$39.99</p>
            </div>
          </div>
          
        </div>

        <div className='prod'>
          <img src={mario} className="mario" alt="logo" />
          <div className='item'>
            <a className="cover" href="">
              Super Mario Maker Deluxe 
            </a>

            <div className='system'>
              <p>Nintendo Switch</p>
            </div>

            <div className="price">
              <p>$59.99</p>
            </div>
          </div>
        </div>

        <div className='prod'>
          <img src={heli} className="heli" alt="logo" />
          <div className='item'>
            <a className="cover" href="">
              Planet of the Helicopter in Africa 
            </a>

            <div className='system'>
              <p>PC</p>
            </div>

            <div className="price">
              <p>$12.99</p>
            </div>
          </div>
        </div>

        <div className='prod'>
          <img src={team} className="team" alt="logo" />
          <div className='item'>
            <a className="cover" href="">
              Team Fortress 2.5
            </a>

            <div className='system'>
              <p>Xbox</p>
            </div>

            <div className="price">
              <p>$39.99</p>
            </div>
          </div>
        </div>
        
        <div className='prod'>
          <img src={tiger} className="tiger" alt="logo" />
          <div className='item'>
            <a className="cover" href="">
              Tiger Woods Driving Simulator 
            </a>

            <div className='system'>
              <p>Playstation</p>
            </div>

            <div className="price">
              <p>$49.99</p>
            </div>
          </div>
        </div>

        
        
      </div>

  </body>
</div>


);
}

export default App;

1 个解决方案

解决方案1
 0  2022-01-15 17:05:45

目前尚不清楚您的 CSS 是什么样的，但您可以通过以下方式实现您想要的。

注意：假设您使用的是React.js

最终代码：

代码沙盒


索引.css

.wrapper {
  display: flex;
}

.sidebar {
  display: none;
  /*👇 Just for styling 👇*/
  background-color: #aaaaaa;
  padding-right: 80px;
}

.sidebar.open {
  display: block;
}

.container {
  width: 100%;
  /*👇 Just for styling 👇*/
  text-align: center;
}

应用程序.js

import fzero from './image/fzero.jpg';
import sonic from './image/sonic.jpg';
import retail from './image/retail.jpg';
import mark from './image/mark.jpg';
import heli from './image/heli.png';
import team from './image/team.png';
import tiger from './image/tiger.png';
import mario from './image/mario.jpg';
import './index.css';

function App() {
  const openMenu = () => {
    document.querySelector(".sidebar").classList.add("open");
  };

  const closeMenu = () => {
    document.querySelector(".sidebar").classList.remove("open");
  };

  return (
    <div className="App">
      <body>
        <header>
          <div className="head1">
            <div className="dropdown">
              <button onClick={openMenu}>&#9776;</button>
            </div>

            <h1>GameShop</h1>
          </div>
        </header>

        <div className="wrapper">
          <aside className="sidebar">
            <h3>Extras</h3>
            <button className="side-close" onClick={closeMenu}>
              X
            </button>
            <ul>
              <li>
                <a href="index.html">Accessories</a>
              </li>

              <li>
                <a href="index.html">Pre-orders</a>
              </li>
            </ul>
          </aside>

          <div className="container">
            <div className="prod">
              <img src={fzero} className="fzero" alt="logo" />
              <div className="item">
                <a className="cover" href="">
                  F-zero
                </a>

                <div className="system">
                  <p>Nintendo Switch</p>
                </div>

                <div className="price">
                  <p>$59.99</p>
                </div>
              </div>
            </div>

            <div className="prod">
              <img src={sonic} className="sonic" alt="logo" />
              <div className="item">
                <a className="cover" href="">
                  Sonic Earth
                </a>

                <div className="system">
                  <p>Playstation</p>
                </div>

                <div className="price">
                  <p>$49.99</p>
                </div>
              </div>
            </div>

            <div className="prod">
              <img src={retail} className="retail" alt="logo" />
              <div className="item">
                <a className="cover" href="">
                  Retail Manager 13
                </a>

                <div className="system">
                  <p>PC</p>
                </div>

                <div className="price">
                  <p>$12.99</p>
                </div>
              </div>
            </div>

            <div className="prod">
              <img src={mark} className="mark" alt="logo" />
              <div className="item">
                <a className="cover" href="">
                  Mark Zuckerberg's Pro Surfer
                </a>

                <div className="system">
                  <p>Xbox</p>
                </div>

                <div className="price">
                  <p>$39.99</p>
                </div>
              </div>
            </div>

            <div className="prod">
              <img src={mario} className="mario" alt="logo" />
              <div className="item">
                <a className="cover" href="">
                  Super Mario Maker Deluxe
                </a>

                <div className="system">
                  <p>Nintendo Switch</p>
                </div>

                <div className="price">
                  <p>$59.99</p>
                </div>
              </div>
            </div>

            <div className="prod">
              <img src={heli} className="heli" alt="logo" />
              <div className="item">
                <a className="cover" href="">
                  Planet of the Helicopter in Africa
                </a>

                <div className="system">
                  <p>PC</p>
                </div>

                <div className="price">
                  <p>$12.99</p>
                </div>
              </div>
            </div>

            <div className="prod">
              <img src={team} className="team" alt="logo" />
              <div className="item">
                <a className="cover" href="">
                  Team Fortress 2.5
                </a>

                <div className="system">
                  <p>Xbox</p>
                </div>

                <div className="price">
                  <p>$39.99</p>
                </div>
              </div>
            </div>

            <div className="prod">
              <img src={tiger} className="tiger" alt="logo" />
              <div className="item">
                <a className="cover" href="">
                  Tiger Woods Driving Simulator
                </a>

                <div className="system">
                  <p>Playstation</p>
                </div>

                <div className="price">
                  <p>$49.99</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </body>
    </div>
  );
}

export default App;

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何进入侧边栏菜单 单击时如何突出显示侧边栏菜单 如何在边栏菜单中添加href功能？ 如何关闭侧边栏菜单？ （引导程序） 如何在 Angular 的侧边栏菜单上禁用单击偶数 如何从侧边栏菜单打开选项卡？ 如何在没有菜单项的情况下打开侧边栏？ 如何在HTML中添加侧边栏菜单？ 如何制作显示/隐藏侧边栏菜单？ Bootstrap 侧边栏菜单和侧边栏导航
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM