1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to design a full height sidebar like this without using background image

Discussion in 'HTML & Website Design' started by ketting00, Apr 15, 2016.

0
  1. #1
    Last edited: Apr 15, 2016
    ketting00, Apr 15, 2016 IP
  2. denis bayly

    denis bayly Well-Known Member

    Messages:
    104
    Likes Received:
    28
    Best Answers:
    6
    Trophy Points:
    105
    #2
    Hi there ketting00,

    could this possibly help...

    

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
* {
    box-sizing:border-box;
 }
html,body {
    height:100%;
    margin:0 0.5em;
 }
body {
    background-image:linear-gradient(to bottom,#b8a4a6 0,#814e39 50%,#373042 100%);
    background-attachment:fixed;
    font:1em/1.612em arial,helvetica,sans-serif;
 }
#sidebar {
    display:table;
    width:21.75em;
    height:100%;
    min-height:100%;
    color:#fff;
 }
#links {
    display:table-cell;
    width:16em;
    border:0.0625em solid #000;
    background-color:#2f2f2f;
    box-shadow:0 0 1em #000;
 }
#spacer {
    display:table-cell;
    width:2.75em;
 }
#icons {
    display:table-cell;
    width:3em;
    border:0.0625em solid #000;
    background-color:#2f2f2f;
    box-shadow:0 0 1em #000;
 }
@media screen and (max-width:24em) {
#sidebar {
    width:18.25em;
  }
#links {
    width:14em;
  }
#spacer {
    width:1.25em;
  }
#icons {
    width:3em;
  }
 }
</style>

</head>
<body> 

<div id="sidebar">
 <div id="links"></div>
 <div id="spacer"></div>
 <div id="icons"></div>
</div>

</body>
</html>
    Code (markup):

    coothead
     
    denis bayly, Apr 15, 2016 IP
  3. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #3
    Hi ketting00.
    If body content can fill up only half of screen height, even the fauxcolumn can't make it as fullheight, right? So I think this sidebar has to be positioned as a fixed (with 100% height). The downside - sidebar blocking users from viewing full content when popped up - is unavoidable. But perhaps a few rules should be used to control the widths of both...

    What do you have so far?

    Hendra
     
    hdewantara, Apr 15, 2016 IP
  4. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #4
    Hi @denis bayly,
    Thanks for the idea. I've tried and try to modify it.

    I feel like giving up. Anything I try isn't looking good.

    Here's how I modified of @denis bayly 
    
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<style media="screen">
html,body {
    height:100%;
    margin:0;
 }
body {
    background-image:linear-gradient(to bottom,#b8a4a6 0,#814e39 50%,#373042 100%);
    background-attachment:fixed;
    font:1em/1.612em arial,helvetica,sans-serif;
 }
#sidebar {
    display:table;
    width:3em;
    height:100%;
    min-height:100%;
    color:#fff;
    position: fixed;
    top: 3em;
    right: 0;
}
#list {
    display:table-cell;
    width:3em;
    border:0.0625em solid #000;
    background-color:#2f2f2f;
    box-shadow:0 0 1em #000;
}
@media screen and (max-width:24em) {
    #list {
        position: static;
        padding: 0.6em;
        text-align: center;
    }
    #list li {
        display: inline-block;
        margin: 0 0.3em;
    }
}
</style>

</head>
<body> 

<div id="sidebar">
 <ul id="list">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
 </ul>
</div>

</body>
</html>
    Code (markup):
     
    Last edited: Apr 15, 2016
    ketting00, Apr 15, 2016 IP
  5. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #5
    Well, it isn't going to work. It's a table.
     
    ketting00, Apr 15, 2016 IP
  6. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #6
    @ketting00
    Why don't you want to use an image? For this usage (apparent equal height columns), it is a very lightweight and robust solution.

    It is a method that works with elastic layouts, too. For example, if your columns are 70 and 30% of the container's width, make an image , say, 2000px wide with one color for the left-hand column and another for the right. apportion the colors 70/30. Assuming the left column is the wide one, position the bg image at 70%. The 70% point on the image will be placed at the 70% point of the container, thus allowing the varying column widths.

    cheers,

    gary
     
    kk5st, Apr 15, 2016 IP
  7. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #7
    Thanks gary,

    If you say so. I'll give it a try.
    I just don't like the idea of using image.

    HTML and CSS isn't my forte.
    This damn part is very hard for me.
    Sigh!
     
    ketting00, Apr 15, 2016 IP
  8. denis bayly

    denis bayly Well-Known Member

    Messages:
    104
    Likes Received:
    28
    Best Answers:
    6
    Trophy Points:
    105
    #8
    Hi there ketting00,


    try this amended code...

    

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
html,body {
    height:100%;
    margin:0;
    background-color:#fff9f9;
    font:1em/1.612em arial,helvetica,sans-serif;
    color:#666;
 }
body {
    height:100%;
 }
#cb {
    display:none;
 }
#cb:checked~#sidebar {
    width:16em;
 }
#cb:checked~#sidebar label::after{
    content:'-';
 }
#cb:checked~#sidebar span {
    max-width:100%;
    color:#fff;
 }
#cb:checked~#sidebar ul li {
    width:16em;
 }
#cb:checked~#sidebar a {
   color:#fff;
 }
#cb:checked~#content {
   margin-right:18em;
 }
#sidebar {
    float:right;
    width:3em;
    min-height:100%;
    border:0.0625em solid #000;
    margin-right:0.0625em;
    background-color:#2f2f2f;
    box-shadow:0 0 1em #000;
    color:#fff;
    transition:1s ease-in-out;
 }
#sidebar label {
    display:block;
    line-height:2.5em;
    padding:0 1em;
    overflow:hidden;
    cursor:pointer;
 }
#sidebar label span {
    float:left;
    max-width:0;
    white-space:nowrap;
    color:#000;
    overflow:hidden;
    transition:1s ease-in-out;
 }
#sidebar label::after {
    content:'+';
    float:right;
    font-weight:bold;
 }  
#sidebar ul {
    padding:0;
    margin:0;
    list-style:none;
    transition:1s ease-in-out;
 }   
#sidebar ul li {
    width:3em;
    border:0.0625em solid #000;
    background-image:linear-gradient(to bottom,#535353,#2b2b2b);
    white-space:nowrap;
    overflow:hidden;
    transition:1s ease-in-out;
 }
#sidebar ul li:hover {
   background-image:linear-gradient(to bottom,#2f2f2f,#2f2f2f);
 }
#sidebar ul li a {
    display:block;
    line-height:4em;
    color:transparent;
    text-indent:0.7em;
    text-decoration:none;
    transition:1s ease-in-out;
 }
#sidebar ul li span {
    display:inline-block;
    margin-right:1em;
    color:#fff;
 }
#content { 
    padding:2em;
    margin:0 5em 0 2em;
    transition:1s ease-in-out;
 }
h1 {
    text-align:center;
 }
@media screen and (max-width:31em) {
body{
    display:block;
 }
#sidebar {
    height:auto;
    margin-bottom:1em;
  }
#cb:checked~#content {
    clear:both;
    height:auto;
    margin:auto;
  }
 }
</style>

</head>
<body> 

<input id="cb" type="checkbox">

<div id="sidebar">
 <label for="cb"><span>Main Menu</span></label>
  <ul>
   <li><a href="#"><span>*</span>Dashboard</a></li>
   <li><a href="#"><span>#</span>Questionnaires</a></li>
   <li><a href="#"><span>~</span>Attendance Register</a></li>
   <li><a href="#"><span>@</span>Create New Form</a></li>
   <li><a href="#"><span>*</span>Import & Sign</a></li>
   <li><a href="#"><span>#</span>Reports</a></li>
   <li><a href="#"><span>~</span>My  Documents</a></li>
   <li><a href="#"><span>@</span>Settings</a></li>
   <li><a href="#"><span>*</span>Notepad</a></li>
 </ul>
</div>

<div id="content">
<h1>Lorem Ipsum Dolar</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, 
posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. 
Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, 
sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet 
nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo 
odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex. 
Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur 
purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem.
</p>
</div>

</body>
</html>
    Code (markup):

    coothead
     
    denis bayly, Apr 15, 2016 IP
    ketting00 likes this.
  9. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #9
    Thanks coothead,

    Wow! What's nice try. I thought I was given up.
     
    Last edited: Apr 16, 2016
    ketting00, Apr 16, 2016 IP
  10. denis bayly

    denis bayly Well-Known Member

    Messages:
    104
    Likes Received:
    28
    Best Answers:
    6
    Trophy Points:
    105
    #10
    Hi there ketting00,

    there is always going to be a problem with "sidebars" of
    this kind, especially this one which has a great height. :eek:

    Normally these things are coded with "position:fixed" so
    that it is always visible on page scroll. It is not viable in
    this case though, as it would quickly become inaccessible
    on smaller devices. The alternative was to let it scroll with
    the content and to push the content to the left rather than
    move over it when expanded.
    ​
    coothead
     
    denis bayly, Apr 16, 2016 IP
  11. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #11
    Mine is a bit traditional compared to Coothead's examples. I also am not sure this would work on iPads... but let's see if it might give you some little more ideas. As follows:
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>emulating ipad app sidebar</title>
        <style>
            body{
                margin: 0;
            }
          
            /* sidebar */
          
            .sb{
                position: fixed;
                height: 100%;
                top: 0;
                right: -2em; /* = .sb-iconic width */
                transition: right 0.5s;
            }
            .sb:after{
                content: '';
                display: block;
                clear: left;
            }
            .sb:hover{
                right: 0;
            }
          
            /* transparent left area of sidebar to detect hovering */
          
            .sb-peek{
                width: 2em;
                height: inherit;
                float: left;
                background-color: black;
                opacity: 0.1;
            }
          
            /* the menu */
          
            .sb-iconic{
                float: left;
                width: 2em;
                height: inherit;
                margin: 0;
                padding-left:0;
                list-style: none;
                background-color: black;
            }
            .sb-iconic a{
                font-size: 1em;
                color: white;
            }
          
            /* content */
          
            .content{
                margin-right: 0;
                padding: 1em;
                transition: margin-right 0.5s;
            }
          
            .sb:hover+.content{
                margin-right: 2em; /* = .sb-iconic width */
            }

            /* a little help from media queries */
          
            @media screen and (min-height:480px) and (max-height:639px){
                .sb{
                    right: -3em;
                }
                .sb-iconic{
                    width: 3em;
                }
                .sb-iconic a{
                    font-size: 2em;
                }
                .sb:hover+.content{
                    margin-right: 3em;
                }
            }
            @media screen and (min-height:640px){
                .sb{
                    right: -4em;
                }
                .sb-iconic{
                    width: 4em;
                }
                .sb-iconic a{
                    font-size: 3em;
                }
                .sb:hover+.content{
                    margin-right: 4em;
                }
            }
        </style>
    </head>
    <body>
        <div class="sb">
            <div class="sb-peek"></div>
            <ul class="sb-iconic">
                <li><a href="#" title="Dashboard">⌂</a></li>
                <li><a href="#" title="Questionnaires">✎</a></li>
                <li><a href="#" title="Register">☃</a></li>
                <li><a href="#" title="Forms">☑</a></li>
                <li><a href="#" title="Import & Sign">◉</a></li>
                <li><a href="#" title="Reports">◔</a></li>
                <li><a href="#" title="My Documents">☁</a></li>
                <li><a href="#" title="Setting">✧</a></li>
                <li><a href="#" title="Notepad">▤</a></li>
            </ul>
        </div>
      
        <div class="content">
            <h1>emulating ipad app sidebar</h1>
          
            <p>Aliquam sagittis eros et sapien molestie congue. Proin in sollicitudin purus, eu faucibus neque. Curabitur facilisis mi ipsum,
            vel finibus orci cursus sit amet. Donec id pulvinar nulla. Sed in suscipit massa. Nunc sollicitudin dignissim est id laoreet.
            Nam maximus turpis sit amet dui euismod dapibus. Nullam vel quam nec quam interdum lacinia gravida a mauris. Donec non sodales augue.
            Sed vel egestas felis, tempor lacinia nisi. Curabitur vel velit sed lorem tincidunt accumsan non vitae libero.</p>
          
            <p>Vestibulum finibus eu dolor ut rutrum. Curabitur elementum metus a lacinia lacinia. Donec scelerisque urna sed leo ultrices ultrices.
            Donec quis scelerisque justo. Vivamus consequat eget sem eget rutrum. Proin arcu felis, accumsan at dui eu, commodo posuere turpis.
            Nunc facilisis cursus feugiat.</p>

            <p>Fusce ut enim nec odio pharetra semper. Phasellus pharetra lacinia ipsum, quis maximus augue. Fusce consequat,
            metus et tristique volutpat, erat urna tristique libero, ac sagittis enim erat a orci. Duis efficitur mi sed vehicula vulputate.
            Ut nec quam neque. Sed maximus gravida sagittis. Suspendisse sed mollis diam. In sodales volutpat orci, eget ornare nibh accumsan eget.
            Nam id dolor quam.</p>
        </div>
    </body>
</html>
    HTML:
     
    hdewantara, Apr 16, 2016 IP
  12. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #12
    Who expects a menu to be on the right-hand side? Not only that, cell phone users will be hating it. Your thumb will be constantly catching the menu/tabs thus making it an accessibility nightmare. Just thought I'd mention that.
     
    qwikad.com, Apr 16, 2016 IP
  13. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #13
    @qwikad.com,

    In real world the menu on the right go down to the bottom of the page on portrait layout (cell phone).
    I put that around images and videos and it's looking nice and modern design.

    In wider screen, it's not full height as I want though. If I go full height, it is going to be ugly.

    I appreciate any helps I got here. They give me ideas and inspiration, somethings I've never known before.

    Who says PSD jockey isn't web designer. I never believe them unless I see it for myself.
     
    ketting00, Apr 16, 2016 IP