0

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;
}
CoderPi
  • 12,985
  • 4
  • 34
  • 62
nindevelops
  • 15
  • 5

2 Answers2

0

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>
Andy Furniss
  • 3,814
  • 6
  • 31
  • 56
  • Hi, that doesn't really do the trick for me, as the "real" texts are longer, so the sqare needs to be larger and the submenus are no longer hidden completely (since I really want sqares not rectangles)...but your answer has given me another perspective on how to look at it to find a solution that may work for me. So thanks anyway :-). – nindevelops Nov 24 '15 at 13:37
  • @nindevelops Yeah, maintaining the 1:1 aspect ratio will be your biggest problem. There is a trick for maintaining the proportions here: http://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout/6615994#6615994 your dummy margin-top would be 100% though. Live example: http://jsfiddle.net/daey0Lms/. Hope this helps. – Andy Furniss Nov 24 '15 at 15:00
  • Okay, based on Andy Furniss' answer I have (probably) found a solution that works for me. I need to do some testing in different browsers and I still want to makes a few minor changes. If I'm still happy with it tomorrow I'm going to post it here. – nindevelops Nov 24 '15 at 17:31
0

my solution is as seen below (for everyone who is faced with the same problem)

#hideme{display:none;}

.menu  ul {
    padding:0;
    margin:0;
 color:white;
 text-decoration:none;
}

.menu  li {
    box-sizing:border-box;
    padding:0;
    margin:0;
    list-style:none;
 color:white;
 text-decoration: none;
 text-align: bottom; vertical-align: bottom;
}


.menu > li ul li{
    box-sizing:border-box;
    margin-left:20px;
 margin-top:5px;
    list-style:none;
 text-decoration: none;
    text-align: bottom; vertical-align: bottom;
}

ul.menu > li {
    overflow:hidden;
    width:90px;
 min-height:90px;
    max-height:90px;
    padding:10px;
    margin-bottom:10px;
    background:#5DB26E;
    color:#5DB26E;
    cursor:pointer;
    transition:all 0s ease;
 
}


ul.menu > li:hover {
    width:180px;
 min-height:180px;
 color: white;
    border: 3px solid white;
 box-shadow: 0px 0px 0px 3px #5DB26E;
  position: relative;
}

ul.menu> li:hover #hideme{display:block;  position: absolute;
    bottom: 10;}
ul.menu> li:hover .fa-arrow-right{content: "\f023";}

.hoverme:hover .fa-arrow-right,
.hoverme .fa-check {
    display: none;
}
.hoverme:hover .fa-check {
    display: inline;
}

 
.menu a {
    margin:0;
 text-decoration:none;
 color:white;
}
<ul class="menu"> 
<li> <a href="news.html"><b>news</b></a>
      <ul> <span id ="hideme">
        <li><a href="aaaaa.html" class="hoverme"><i class="fa fa-arrow-right"></i><i class="fa fa-check"></i>&nbsp;aaaaa</a></li>
        <li><a href="bbbbb.html" class="hoverme"><i class="fa fa-arrow-right"></i><i class="fa fa-check"></i>&nbsp;bbbbb</a></li></span>
      </ul>
    </li>
</ul>
nindevelops
  • 15
  • 5