1

I want to have a 4 columns layout Panel Bar with the following conditions:

  • #c1, #c2 = with specific width
  • #c3 autofill with remaining width
  • #c4 auto width (e.g. increase / decrease width if more list added) and will correspond to #c3

I'm looking for a solution that could:

  • have #c4 floated to the right instead of position absolute
  • not having a specific margin right on #c3 and it will correspond spaces dynamically disregards how many list added to #c4
  • have a variable width on .smenu rather than having a specific width to get the list item flow horizontally.
  • work responsively cross platform and devices (minimum browser support IE8)
  • display smenu list horizontally without using a specific width for the container

Additional Issue:

  • When i hover to the a tag with class name .show-sub the .smenu shows / display but when i move my mouse over trying to hover over on one of the sub menu list it goes hidden. What was the way to work around to keep it open when i hover?

Different Attempt:

I've also tried with display:table-cell but couldn't get it working correctly. Click here for demo

HTML

<div id="sticky-bar" class="cf">
    <div id="c1" class="left">col 1</div>
    <div id="c2" class="left">col 2</div>
    <div id="c3">
        <span class="incredibly-long-txt">So many text so many text so many text so many text so many text so many text so many text so many text so many text so many text so many text so many text so many text so many text so many text so many tex</span>
    </div>
    <div id="c4">
        <ul class="mmenu">
            <li> 
                <a href="#" class="show-sub">m1</a>
                <ul class="smenu">
                    <li> 
                        <a href="#">a1</a>
                    </li><li> 
                        <a href="#">a2</a>
                    </li><li> 
                        <a href="#">a3</a>
                    </li><li> 
                        <a href="#">a4</a>
                    </li>
                </ul>
            </li>
            <li> 
                <a href="#" class="show-sub">m2</a>
                <ul class="smenu">
                    <li> 
                        <a href="#">b1</a>
                    </li><li> 
                        <a href="#">b2</a>
                    </li><li> 
                        <a href="#">b3</a>
                    </li><li> 
                        <a href="#">b4</a>
                    </li>
                </ul>
            </li>
            <li> 
                <a href="#" class="show-sub">m3</a>
                <ul class="smenu">
                    <li> 
                        <a href="#">c1</a>
                    </li><li> 
                        <a href="#">c2</a>
                    </li><li> 
                        <a href="#">c3</a>
                    </li><li> 
                        <a href="#">c4</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

CSS

*, *:before, *:after {
    box-sizing: border-box;
}
ul, li {
    margin: 0;
    padding:0;
    list-style:none;
}
a {
    color: #fff;
}
.left {
    float: left;
}
.right {
    float: right;
}
.cf:before, .cf:after {
    content:'';
    display: table;
}
.cf:after {
    clear:both;
}
.cf {
    *zoom: 1;
}
#sticky-bar {
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    display: block;
    width: 100%;
    height: 30px;
    background: #582A72;
    position: relative;
}
#c1 {
    width: 100px;
    height: 100%;
    background: #9775AA;
    padding: 6px;
}
#c2 {
    width: 150px;
    height: 100%;
    background: #764B8E;
    padding: 6px;
}
#c3 {
    height: 100%;
    background: #3D1255;
    padding: 6px;
    margin: 0 90px 0 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#c4 {
    background: #260339;
    position: absolute;
    right:0;
    top:0;
}
.mmenu {
    display:block;    
}
.mmenu li {
    float:left;
    width: 30px;
    height: 30px;
    text-align: center;
    border-left: 1px solid #fff;
    background: #887CAF;
}
.mmenu li a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 6px 0;
    position: relative;
}
.smenu {
    display: none; 
    background: #403075;
    position: absolute;
    top: 100%;
    right: 0;
    width: 120px;
}
.smenu li {
    background: #882D61;
}
.show-sub:hover  + .smenu {
    display: block;
}
wei
  • 162
  • 1
  • 12
  • 1
    do you mean something like this? http://jsfiddle.net/haxxxton/enPaM/4/ will explain in a proper answer if this is the case – haxxxton Jul 14 '14 at 04:53
  • @haxxton - Thank you for your feedback! really appreciate that. That's the result that i want except the content is it possible to have the #c3-inner appear before the your #c4? – wei Jul 14 '14 at 07:28
  • 1
    unfortunately, the nature of `float` means it will need to be before the content if it plans to be both of variable sized content and flush with the top. I can only think of SEO being the reason for DOM order being a particular issue. Can you explain why youd need the reorder? – haxxxton Jul 14 '14 at 07:40
  • @haxxxton - Fair enough. The reason why i want to reorder because i want to stack in order when it comes to mobile view. So that the mmenu stack after the content. Would you mind to explain how the logic works please? thank you – wei Jul 14 '14 at 07:55

1 Answers1

0

Have you considered placing #c1 and #c2 inside #c3. It would allow you to set their specific width, float them left or right, thus giving the illusion that #c3 is filling the empty space. I prefer to use tables in the case I need empty space filled. It's my experience that it requires drastically more markup to achieve liquid width with divs than tables.

Spencer Hill
  • 1,043
  • 2
  • 15
  • 38