css / html / javascript accordeon菜单 - 在父“方形”内显示子列表。 [英] css/html/javascript accordeon menu - display sublist inside parent "square"

问题描述

我对css和网页设计很新鲜，我有这个想法，以创建一个小的塔形式的导航包含主菜单项的堆叠小方块。基本上是一个手风琴菜单，但有一点点扭曲。我想让小方块在悬停时变大，并显示一个子菜单项列表，但在其中。
我要存档的图片在这里

这可以做，我有点迷路了吗？

我在互联网上找到一些css代码，以便做一个非常好的工作，如下所示，但我不知道如何改变它显示

这可能是有很多经验和一个愚蠢问题的人很容易的东西，但我有点卡住:-(。认为悬停还需要触发父项目的大小调整，但是如何？或者我可以忽略一个非常简单的解决方案吗？

感谢alot和对不起我的坏英语。

n。

  .menu {margin：0 auto; padding ：0; width：150px;}。menu li {list-style：none;} menu li a {display：table; margin-top：1px; height：90px; padding：14px 10px; width：90px; 5DB26E; text-decoration：none; text-align：left; vertical-align：middle; color：#fff; overflow：hidden; -webkit-transition-property：background; -webkit-transition-duration：0.4s; -webkit-transition-timing-function：ease-out; transition-property：background;过渡持续时间：0.4s; transition-timing-function：ease-out;}。menu> li：first-child a {margin-top：0;}菜单li a：hover {background：＃4AADBB; -webkit-transition-property：background; -webkit-transition-duration：0.2s; -webkit-transition-timing-function：ease-out; transition-property：background; transition-duration：0.2s; transition-timing-function：ease-out;}。menu liul {margin：0; padding：0;}。menu li li a {display：block; margin-top：0; padding：0 10px; height：0;背景：＃C6DDD9;颜色：＃1F3D39; -webkit-transition-property：all; -webkit-transition-duration：0.5s; -webkit-transition-timing-function：ease-out; transition-property：all; transition-duration：0.5s; transition-timing-function：ease-out;}。menu> li：hover li a {display：table; margin-top：1px; padding：10px; width：100％; height：1em; -webkit-transition-property：all; -webkit-transition-duration：0.3s; -webkit-transition-timing-function：ease-out; transition-property：all; transition-duration：0.3s; transition-timing-function：ease-out;}。menu> li：hover li a：hover {background：＃A4CAC8; -webkit-transition-property：background; -webkit-transition-duration：0.2s; -webkit-transition-timing-function：ease-out; transition-property：background; transition-duration：0.2s; transition-timing-function：ease-out;}  

你可能想用锚点标签替换标题，只要你的导航链接链接到。

/ p>

  ul {padding：0; margin：0;} li {box-sizing：border-box; padding：0; margin：0; list-style：none;} ul.menu> li {overflow：hidden; width：47px; max-height：47px; padding：10px; margin-bottom：10px;背景：蓝色;颜色：白色; cursor：pointer; transition：all 1s ease;} ul.menu> li：hover {width：100px; max-height：120px;} h2 {margin：0 0 10px 0;} h3 {margin：0;}  

 < ul class =menu> < li> < h2> A< / h2> < ul> < li> < h3> A.a< / h3> < h3>< / h3> < h3>< / h3> < / li> < / ul> < / li> < li> < h2> B< / h2> < ul> < li> < h3> B.a< / h3> < h3> B.b< / h3> < h3> B.c< / h3> < / li> < / ul> < / li> < li> < h2> C< / h2> < ul> < li> < h3> C.a< / h3> < h3> C.b< / h3> < h3> C.c< / h3> < / li> < / ul> < / li> < li> < h2> D< / h2> < ul> < li> < h3> D.a< / h3> < h3> D.b< / h3> < h3> D.c< / h3> < / li> < / ul> < / li>< / ul>  

I'm pretty new to css and webdesign and I have this idea in mind of creating a navigation in the form of a little "tower" of stacked little squares containing the main menu items. Basically an accordeon menu, but with a litte twist. I want the little squares to grow larger on hover and display a list of submenu items but INSIDE of them. A picture of what I'm trying to archive is here

Can this be done, I am a little lost ?

I have found some css code on the internet to make an accordeon menu that works nicely (as shown below), but I don't know how to change it to display the sublist inside the parent menu square.

This is probably easy stuff for someone with lots of experience and a stupid question, but I'm kinda stuck :-(. I think the "on hover" also needs to trigger the resizing of the parent item, but how ? Or am I overlooking a very simple solution ?

Thanks alot and sorry for my bad English.

n.

.menu {
  margin: 0 auto;
  padding: 0;
  width: 150px;
}
.menu li {
  list-style: none;
}
.menu li a {
  display: table;
  margin-top: 1px;
  height: 90px;
  padding: 14px 10px;
  width: 90px;
  background: #5DB26E;
  text-decoration: none;
  text-align: left;
  vertical-align: middle;
  color: #fff;
  overflow: hidden;
  -webkit-transition-property: background;
  -webkit-transition-duration: 0.4s;
  -webkit-transition-timing-function: ease-out;
  transition-property: background;
  transition-duration: 0.4s;
  transition-timing-function: ease-out;
}
.menu > li:first-child a {
  margin-top: 0;
}
.menu li a:hover {
  background: #4AADBB;
  -webkit-transition-property: background;
  -webkit-transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  transition-property: background;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}
.menu li ul {
  margin: 0;
  padding: 0;
}
.menu li li a {
  display: block;
  margin-top: 0;
  padding: 0 10px;
  height: 0;
  background: #C6DDD9;
  color: #1F3D39;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: ease-out;
}
.menu > li:hover li a {
  display: table;
  margin-top: 1px;
  padding: 10px;
  width: 100%;
  height: 1em;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}
.menu > li:hover li a:hover {
  background: #A4CAC8;
  -webkit-transition-property: background;
  -webkit-transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  transition-property: background;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}

解决方案

How about something like this?

You'd probably want to replace the headers with anchor tags for wherever your nav links link to.

ul {
    padding:0;
    margin:0;
}

li {
    box-sizing:border-box;
    padding:0;
    margin:0;
    list-style:none;
}

ul.menu > li {
    overflow:hidden;
    width:47px;
    max-height:47px;
    padding:10px;
    margin-bottom:10px;
    background:blue;
    color:white;
    cursor:pointer;
    transition:all 1s ease;
}

ul.menu > li:hover {
    width:100px;
    max-height:120px;
}

h2 {
    margin:0 0 10px 0;
}

h3 {
    margin:0;
}

<ul class="menu">
    <li>
        <h2>A</h2>
        <ul>
            <li>
                <h3>A.a</h3>
                <h3>A.b</h3>
                <h3>A.c</h3>
            </li>
        </ul>
    </li>
    <li>
        <h2>B</h2>
        <ul>
            <li>
                <h3>B.a</h3>
                <h3>B.b</h3>
                <h3>B.c</h3>
            </li>
        </ul>
    </li>
    <li>
        <h2>C</h2>
        <ul>
            <li>
                <h3>C.a</h3>
                <h3>C.b</h3>
                <h3>C.c</h3>
            </li>
        </ul>
    </li>
    <li>
        <h2>D</h2>
        <ul>
            <li>
                <h3>D.a</h3>
                <h3>D.b</h3>
                <h3>D.c</h3>
            </li>
        </ul>
    </li>
</ul>

这篇关于css / html / javascript accordeon菜单 - 在父“方形”内显示子列表。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！