Hi guys, I want to design a sidebar like the one on the right of this picture: https://dribbble.com/shots/1731885-iPad-App-Sidebar-Design However, Google search points me to the technique like this one: http://alistapart.com/article/fauxcolumns But I don't want to use background image, but just background color and box shadow or something like that. How do you suggest? Thanks, Edited: Please ignore legendary browsers Edited 2: No flexbox, it isn't gonna work on responsive layout.
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
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
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):
@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
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!
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
Hi there ketting00, there is always going to be a problem with "sidebars" of this kind, especially this one which has a great height. 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
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:
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, 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.