Как создать такую боковую панель во всю высоту без использования фонового изображения

alex_u

Привет, ребята, Я хочу создать боковую панель, подобную той, что справа на этом рисунке: https://dribbble.com/shots/1731885-iPad-App-Sidebar-Design

Однако поиск в Google указывает мне на такую технику: http://alistapart.com/article/fauxcolumns

Но я не хочу использовать фоновое изображение, а просто цвет фона и тень поля или что-то в этом роде. Как вы предлагаете? Спасибо, Отредактировано: игнорируйте легендарные браузеры. Отредактировано 2: нет флексбокса, он не будет работать с адаптивным макетом.

darina4ess

Привет, ketting00, может ли это помочь...

 


<!DOCTYPE html>


<html lang="en">


<head>


<meta charset="utf-8">


<meta name="viewport" content="ширина = ширина устройства, высота = высота устройства, начальный масштаб = 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>

Код (разметка): болван

i-filez

Мой вариант немного традиционен по сравнению с примерами Кутхеда. Я также не уверен, что это сработает на iPad... но давайте посмотрим, может ли это дать вам еще немного идей. Следующее:

 <!DOCTYPE html>


<html>


<head>


<meta charset="utf-8">


<meta name="viewport" content="ширина = ширина устройства, начальный масштаб = 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="Панель приборов">⌂</a></li>


<li><a href="#" title="Анкеты">✎</a></li>


<li><a href="#" title="Регистр">☃</a></li>


<li><a href="#" title="Формы">☑</a></li>


<li><a href="#" title="Импорт и подписание">◉</a></li>


<li><a href="#" title="Отчеты">◔</a></li>


<li><a href="#" title="Мои документы">☁</a></li>


<li><a href="#" title="Параметр">✧</a></li>


<li><a href="#" title="Блокнот">▤</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:

Пpeдcлaвa

Привет, ketting00, попробуйте этот измененный код...

 


<!DOCTYPE html>


<html lang="en">


<head>


<meta charset="utf-8">


<meta name="viewport" content="ширина = ширина устройства, высота = высота устройства, начальный масштаб = 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>

Код (разметка): болван

k-alex75

Привет, ketting00, всегда будет проблема с "боковые панели" из этот вид, особенно тот, который имеет большую высоту. Обычно эти вещи кодируются с помощью "позиция: фиксированная" так что он всегда виден при прокрутке страницы. Это нежизнеспособно в в этом случае, поскольку он быстро станет недоступным на небольших устройствах. Альтернативой было позволить ему прокручиваться с помощью содержимое и сдвинуть содержимое влево, а не переместите его, когда оно развернуто. болван

stemale

@ketting00 Почему вы не хотите использовать изображение? Для такого использования (столбцы с очевидной одинаковой высотой) это очень легкое и надежное решение. Этот метод работает и с эластичными макетами.

Например, если ваши столбцы составляют 70 и 30% ширины контейнера, создайте изображение, скажем, шириной 2000 пикселей с одним цветом для левого столбца и другим для правого.

распределите цвета 70/30. Предполагая, что левый столбец широкий, расположите фоновое изображение на уровне 70%. Точка 70% изображения будет размещена в точке 70% контейнера, что позволит изменять ширину столбцов. ваше здоровье, Гэри

tvoronina

Спасибо, Гэри, Если ты так говоришь. Я попробую. Мне просто не нравится идея использования image. HTML и CSS не моя сильная сторона. Эта чертова часть очень сложна для меня. Вздох!

DeepAdvert

Привет, ketting00.

Если содержимое основного текста может занимать только половину высоты экрана, даже искусственный столбец не сможет сделать его полной высоты, верно? Поэтому я думаю, что эта боковая панель должна быть фиксированной (с высотой 100%). Обратной стороной является то, что боковая панель, которая блокирует просмотр всего содержимого при открытии, неизбежна.

Но, возможно, следует использовать несколько правил для контроля ширины обоих... Что у вас есть на данный момент? Хендра

sht0p0r

@qwikad.com,

В реальном мире меню справа опускается до нижней части страницы в книжной ориентации (сотовый телефон).

Я помещаю это в изображения и видео, и это выглядит красиво и имеет современный дизайн.

Однако на более широком экране он не в полную высоту, как мне хотелось бы. Если я выйду в полный рост, это будет некрасиво.

Я ценю любую помощь, которую я получил здесь.

Они дают мне идеи и вдохновение, чего я никогда раньше не знал. Кто сказал, что жокей PSD не веб-дизайнер.

Я никогда не поверю им, пока не увижу это сам.

karltg

Кто ожидает, что меню будет справа? Мало того, пользователи мобильных телефонов будут ненавидеть это. Ваш большой палец будет постоянно цепляться за меню/вкладки, что усложнит доступ к ним. Просто подумал, что стоит упомянуть об этом.

Похожие темы	Дата
Как новичку создать дизайн сайта?	19.10.2024, 18:10
Альтернатива дизайну страницы со 100% высотой области просмотра в альбомном режиме для мобильных устройств.	19.10.2024, 18:10
Лучший выбор для контекстной рекламы (не программиста)?	19.10.2024, 18:10
Ведение блога — это легко или нет?	19.10.2024, 18:10
Циклическое переключение изображений разного размера при прокрутке	19.10.2024, 18:10
Дизайн сайта	19.10.2024, 18:10
как перейти от офисных документов к документам, основанным на современных веб-технологиях	19.10.2024, 18:10
Пожалуйста, поговори со мной, как будто мне 5 лет.	19.10.2024, 18:10
Какая CMS лучше всего подходит для галерей/подгалерей участников	19.10.2024, 18:10
Расположение всплывающего окна	19.10.2024, 18:10

Как создать такую боковую панель во всю высоту без использования фонового изображения

alex_u

darina4ess

i-filez

Пpeдcлaвa

k-alex75

stemale

tvoronina

DeepAdvert

sht0p0r

karltg

I AM

Интересно