Выезжающее слева меню – Как сделать прокрутку левого выезжающего меню независимо от прокрутки страницы и наоборот на моб. устройствах?

Около месяца назад был урок о том как создать выдвигающееся меню, но меню, которое мы создадим в этом уроке будет отличаться от прошлого. Данное меню скорее появляется, чем выдвигается, но всё же. Эффект красивый: затемняется основная часть сайта и активной становится меню. В демо присутствует 5 вариантов этого меню, так что можете выбрать то, которое вам больше всего понравилось.

Прошлый урок о том как создать выдвигающееся меню на CSS3 — Создание выдвигающегося меню

Пример можно увидеть здесь:

Посмотреть примерСкачать

Мы рассмотрим более подробно как создать меню из Демо 2, когда меню появляется слева вверху.

HTML часть

Меню состоит из элемента <nav>, в котором будут находиться все элементы списка и элемент отвечающий за появление меню:

1
2
3
4
5
6
7
8
9
10

<nav>
    <a href="#"><span>Меню</span></a>
    <ul>
        <li><a href="#">Увеличить</a></li>
        <li><a href="#">Обновить</a></li>
        <li><a href="#">Заблокировать</a></li>
        <li><a href="#">Звук</a></li>
        <li><a href="#">Избранное</a></li>
    </ul>
</nav>

CSS часть

Осталось всему этому придать красивый вид.

1
2
3
4
5

*,
*:after,
*::before {
    box-sizing: border-box;
}

Мы используем данное свойство для того, чтобы вычитать из ширины и высоты блока значения padding и border. Затем зададим стиль цвет фона и внутренний отступ для блока с классом container:

1
2
3
4
5
6
7

body  {
    background: #04a466;
}
 
.container {
    padding: 80px;
}

Свойство padding необходимо для того, чтобы при появлении меню, было достаточно места для отображения основного содержимого сайта. Меню у нас зафиксировано, поэтому не имеет значения где оно находится на странице. Также мы задаем задержку по времени при появлении и закрытии.

1
2
3
4
5
6
7
8
9
10
11
12

.bt-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    border-width: 0px;
    border-style: solid;
    border-color: #333;
    background-color: rgba(0,0,0,0);
    transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
}

При появлении меню задаем ему прозрачный фон, устанавливая альфа-канал в 0.3.

1
2
3
4
5
6

.bt-menu.bt-menu-open {
    height: 100%;
    border-width: 30px 30px 30px 90px;
    background-color: rgba(0,0,0,0.3);
    transition: border-width 0.3s, background-color 0.3s;
}

Пропишем свойства включателю нашего меню:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.bt-menu-trigger {
    position: fixed;
    top: 15px;
    left: 20px;
    display: block;
    width: 50px;
    height: 50px;
    cursor: pointer;
}
 
.bt-menu-trigger span {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 100%;
    height: 4px;
    margin-top: -2px;
    background-color: #fff;
    font-size: 0px;
    user-select: none;
    transition: background-color 0.3s;
}

Когда меню появляется то три полоски переключателя превращаются в крестик, которые позволяет закрыть меню:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

.bt-menu-open .bt-menu-trigger span {
    background-color: transparent;
}
 
.bt-menu-trigger span:before,
.bt-menu-trigger span:after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    content: '';
    transition: transform 0.3s;
}
 
.bt-menu-trigger span:before {
    transform: translateY(-250%);
}
 
.bt-menu-trigger span:after {
    transform: translateY(250%);
}
 
.bt-menu-open .bt-menu-trigger span:before {
    transform: translateY(0) rotate(45deg);
}
 
.bt-menu-open .bt-menu-trigger span:after {
    transform: translateY(0) rotate(-45deg);
}

Элементы меню находятся в неупорядоченном списке, который также имеет фиксированное положение и находится слева вверху:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

.bt-menu ul {
    position: fixed;
    top: 75px;
    left: 0;
    margin: 0;
    padding: 0;
    width: 90px;
    list-style: none;
    backface-visibility: hidden;
}
 
.bt-menu ul li,
.bt-menu ul li a {
    display: block;
    width: 100%;
    text-align: center;
}
 
.bt-menu ul li {
    padding: 16px 0;
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s, opacity 0.2s, visibility 0s 0.3s;
}
 
.bt-menu ul li:first-child {
    transform: translate3d(-100%,200%,0);
}
 
.bt-menu ul li:nth-child(2) {
    transform: translate3d(-100%,100%,0);
}
 
.bt-menu ul li:nth-child(3) {
    transform: translate3d(-100%,0,0);
}
 
.bt-menu ul li:nth-child(4) {
    transform: translate3d(-100%,-100%,0);
}
 
.bt-menu ul li:nth-child(5) {
    transform: translate3d(-100%,-200%,0);
}

Когда меню появилось все элементы становятся видны, но изначально они должны быть скрыты, что мы и сделали в самом начале урока(прописав в классе bt-menu скрыть всё меню):

1
2
3
4
5
6

.bt-menu .bt-menu-open ul li {
    visibility: visible;
    opacity: 1;
    transition: transform 0.3s, opacity 0.3s;
    transform: translate3d(0,0,0);
}

Вывод

Красивые варианты меню, которые вы можете использовать. Данное меню освобождает место на странице, т.к. может быть вызвано только при необходимости.

Успехов!

Источник: tympanus.net

Улучшенное выезжающее меню с использованием CSS и jQuery

В этом уроке мы разовьем тему, начатую ранее и улучшим меню, которое создавали в прошлом уроке. Предыдущая версия была очень милой, но нам не хотелось бы, чтобы пользователю пришлось наводить указатель мыши на все пункты меню, чтобы узнать, какие они. Так что мы подпишем пункты меню и заставим их высовываться, так что пользователю всегда будет видно, какие пункты существуют. Горизонтальное расположение делает все надписи легко читаемыми, и когда пользователь наводит указатель мыши на подпись, выезжает весь пункт меню с уменьшенным изображением.

Демонстрация работы – Скачать исходный код

Хотя этот урок относится к предыдущему, мы начнем с основ, чтобы все было понятно и тем читателям, которые заинтересованы только в новом меню.

Уменьшенные изображения, которые мы будем использовать, взяты из наборов уменьшенных изображений цветных наклеек 1, 2, 3 и 4, созданных DryIcons. Их не разрешено распространять под свободной лицензией, так что мы не можем включить их в исходный код для этого урока.

Итак, давайте приступим к работе.

Структура html

Единственное, что нам нужно для этого меню, — это простой ненумерованный список с ссылками внутри элементов списка:

<ul>

<li><a href=""><span>Home</span></a></li>

<li><a href=""><span>About</span></a></li>

<li><a href=""><span>Search</span></a></li>

<li><a href=""><span>Photos</span></a></li>

<li><a href=""><span>Rss Feed</span></a></li>

<li><a href=""><span>Podcasts</span></a></li>

<li><a href=""><span>Contact</span></a></li>
</ul>

Теги span будут содержать название пунктов нашего меню.

Мы присваиваем списку идентификатор, потому что мы хотим сослаться на него позднее в JavaScript. С помощью jQuery мы заставим ссылочные элементы выезжать, когда мы наводим указатель мыши на элементы списка.

CSS

Сначала мы определим свойства CSS для этого списка:

ul#navigation {

position: fixed;

margin: 0px;

padding: 0px;

top: 0px;

right: 10px;

list-style: none;

z-index:999999;

width:721px;
}

Мы располагаем список в верхнем правом углу страницы.

Меню должно быть всегда доступно для пользователя, даже если он прокручивает страницу до самого низа. Так что положение должно быть зафиксированным. Внешние и внутренние отступы установлены в 0, так как у ненумерованного списка есть для них значения по умолчанию. Меню также должно быть выше всех других элементов на странице. Поэтому мы устанавливаем значение z-index очень высоким. Здесь задана ширина, так как мы хотим, чтобы элементы списка всплывали. Если мы не зададим этому списку ширину, они начнут двигаться, перекрывая друг друга, если мы будем изменять размер страницы. Чтобы избежать, например, сдвига вниз всплывающих элементов, когда Вы меняете размер окна, всегда помещайте их в контейнер с заданной шириной. 721px – это сумма длин всех элементов списка.

Теперь давайте рассмотрим свойства элементов списка:

ul#navigation li {

width: 103px;

display:inline;

float:left;
}

Если Вы хотите, чтобы список был расположен горизонтально, установите отображение элементов как строчное. Это заставит их появляться один за другим, а не один под другим.

Для ссылок в этих элементах списка мы определим следующие свойства CSS:

ul#navigation li a {

display: block;

float: left;

margin-top: -2px;

width: 100px;

height: 25px;

background-color: #E7F2F9;

background-repeat: no-repeat;

background-position: 50% 10px;

border: 1px solid #BDDCEF;

text-decoration: none;

text-align: center;

padding-top: 80px;
}

Это были общие свойства всех ссылочных элементов в списке. Мы уже определили общие свойства фоновых изображений, которые мы поместим в разные классы. Нам нужно задать свойства текста и внутренних отступов для тегов span внутри ссылочных элементов. Внутренний отступ оттолкнет элементы с тегом span к нижнему краю.

Давайте добавим элементам слегка скругленные углы, которые, к сожалению, не будут работать в браузере Internet Explorer, и сделаем их полупрозрачными:

ul#navigation li a {

display: block;

float:left;

margin-top: -2px;

width: 100px;

height: 25px;

background-color:#E7F2F9;

background-repeat:no-repeat;

background-position:50% 10px;

border:1px solid #BDDCEF;

text-decoration:none;

text-align:center;

padding-top:80px;

-moz-border-radius:0px 0px 10px 10px;

-webkit-border-bottom-right-radius: 10px;

-webkit-border-bottom-left-radius: 10px;

-khtml-border-bottom-right-radius: 10px;

-khtml-border-bottom-left-radius: 10px;

opacity: 0.7;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

Последнее свойство фильтра заставит это все работать также в браузере Internet Explorer.

Это были общие свойства всех ссылочных элементов в списке. Сейчас мы определим фоновые изображения для ссылок в определенных элементах списка:

ul#navigation .home a{

background-image: url(../images/home.png);

}

ul#navigation .about a      {

background-image: url(../images/id_card.png);

}

ul#navigation .search a      {

background-image: url(../images/search.png);

}

ul#navigation .podcasts a      {

background-image: url(../images/ipod.png);

}

ul#navigation .rssfeed a   {

background-image: url(../images/rss.png);

}

ul#navigation .photos a     {

background-image: url(../images/camera.png);

}

ul#navigation .contact a    {

background-image: url(../images/mail.png);
}

Когда мы наводим указатель мыши на элементы, мы хотим изменить цвет их фона, чтобы они  больше выделялись:

ul#navigation li a:hover{

background-color:#CAE3F2;
}

Теперь нам нужно добавить определение стилей к тегам span:

ul#navigation li a span{

letter-spacing:2px;

font-size:11px;

color:#60ACD8;

text-shadow: 0 -1px 1px #fff;
}

Свойство тени текста придаст буквам эффект гравировки, но оно не будет работать в браузере Internet Explorer.

Это все, что касается CSS. Теперь давайте рассмотрим код JavaScript, который оживит меню.

JavaScript

С помощью jQuery мы заставим элементы сначала исчезать один за другим, до тех пор пока видимым не останется только текст. Когда мы наводим указатель мыши на один из элементов, весь элемент выедет сверху. Для всего этого мы напишем следующий код:

$(function() {

var d=300;

$('#navigation a').each(function(){

$(this).stop().animate({

'marginTop':'-80px'

},d+=150);

});

$('#navigation > li').hover(

function () {

$('a',$(this)).stop().animate({

'marginTop':'-2px'

},200);

},

function () {

$('a',$(this)).stop().animate({

'marginTop':'-80px'

},200);

}

);
});

Для создания эффекта исчезания элементов одного за другим мы определим, что для каждого ссылочного элемента верхний отступ должен быть -80 пикселей, это заставит их двигаться вверх за пределы экрана. Этот эффект для первого элемента должен продолжаться 300 + 150 миллисекунд, а следующие элементы должны исчезать с дополнительной задержкой 150 миллисекунд.

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

И это все! Надеемся, Вам понравился этот урок!

Демонстрация работы – Скачать исходный код

Автор урока Mary Lou

Перевод — Дежурка

Смотрите также:

Как прижать меню навигации к правой стороне сайта? — Хабр Q&A

<body>
	<div>
		<div>
			<div>
				<img src="images/1/logo.png" alt="logo" title="logo">	
			</div>
			<ul>
				<li><a href="#">HOME</a></li>
				<li><a href="#">ABOUT</a></li>
				<li><a href="#">WORK</a></li>
				<li><a href="#">BLOG</a></li>
				<li><a href="">CONTACT</a></li>
			</ul>
		</div>
	</div>	
</body>

body {
	background: #efefef; margin: 0; padding: 0;
	font: 16px/24px Arial, Tahoma, sans-serif;
}
.header {
	background: #87509c;/*Цвет хедера*/
}

.logo {
	padding-top: 150px; /*Отступ сверху*/
	padding-left: 300px;/*Отступ справа*/
}

.nav {
	list-style: none; /*откл. маркеров*/
}
.nav li{
   float: left; /* Выстраивание элементов списка в один ряд. */
   margin-right: 0px; /* создание отступов для того, чтобы не сливались пункты меню. */
   font-family: Arial, Helvetica, sans-serif; /* Указание типа шрифта. */
   font-size: 16px; /* Размер текста в ссылках. */  
}

.nav li a {
	display: block; /* Изменение отображения на блочное для того чтобы иметь возможность задать внутренние отступы. */
	padding: 10px 15px;  /* Внутри блочные отступы. */
	background: #87509c; /* Цвет блоков меню. */
	color: #efefef; /* Цвет текста в блоках меню. */
	text-decoration: none; /* Устранение подчёркивания ссылок. */
	position: relative; /* Это необходимо при использовании Internet Explorer 6 для того, чтобы ссылка по всей своей площади была «кликабельной». */
}

.nav li a:hover {
   background: #643a79; /* Цвет блока при наведении курсора. */
   color: #efefef;  /* Цвет текста при наведении курсора. */
}

Добавляем панель бокового меню в свое iOS-приложение / Habr

Как я могу добавить панель бокового меню в свое iOS-приложение? Это один из самых часто задаваемых вопросов которые мы получаем от своих читателей. Сегодня мы покажем как создать боковое меню вроде того, которое вы можете наблюдать, например, в приложении от Facebook.

Для тех кто не знаком с понятием бокового меню в мобильных приложениях, Кен Ярмост (Ken Yarmost) дал хорошее объяснение этому элементу интерфейса и определил его как:

Боковое меню представляет собой панель, которая «выезжает» снизу, слева или справа от области основного контента приложения, содержащая вертикальную, независимую от основного контента приложения прокрутку, и служит основным инструментом навигации в приложении.

Использование бокового меню, позволяет реализовать навигацию не отнимая драгоценного места у основного контента на экране мобильного устройства, потому что в неактивном состоянии такое меню скрывается за слоем основного контента приложения. Меню может быть вызвано путем нажатия кнопки меню на навигационной панели. После того как меню стало активным, пользователь может закрыть его, используя ту же кнопку меню на панели навигации или просто свайпом влево по области активного контента приложения.

При огромном количестве решений на GitHub, мы не станем строить свое боковое меню с нуля. Вместо этого мы воспользуемся замечательной библиотекой SWRevealViewController. Разработанная Джоном Ллучем (John Lluch), это бесплатная библиотека предоставляющая быстрый и простой способ реализации бокового меню.

Что ж, давайте попробуем разработать пример приложения вместе.

• Меню вызывается нажатием кнопки «меню» в левом верхнем углу навигационной панели;
• Также меню может быть вызвано свайпом вправо по активной области контента;
• Пользователь может закрыть активное боковое меню, нажатием кнопки «меню» в левом верхнем углу навигационной панели;
• Также меню может быть закрыто свайпом влево по активной области контента.

Однако, чтобы сэкономить время, вы можете скачать шаблон проекта XCode, который уже включает в себя:

• Готовый storyboard со всеми необходимыми нам контроллерами;
• Готовыми классами контроллеров вида, включая MapViewController и PhotoViewController;
• MapViewController реализующий отображение карт;
• PhotoViewController реализующий отображение фотографий и изображений;
• Все необходимые приложению иконки и изображения (спасибо бесплатным иконкам от Pixeden)

После распаковки архива, вам необходимо найти файлы «SWRevealViewController.h» и «SWRevealViewController.m». Щелкните правой кнопкой мыши по папке SidebarDemo в окне навигатора проекта и создайте новую группу файлов, выбрав пункт «New Group» в раскрывшемся контекстном меню. Назовите группу «SWRevealViewController». Импортируйте оба файла в проект XCode, поместив их в группу «SWRevealViewController».

В нашем шаблоне проекта для XCode уже созданы контроллеры видов для верхнего и нижнего слоев. Все что вам необходимо сделать — определить переходы (segues) между SWRevealViewController и контроллерами видов контента и подложки меню.

Для начала, выберите стартовый View Controller и измените его класс на «SWRevealViewController».

Затем, нажав и удерживая клавишу control на клавиатуре, щелкните по контроллеру вида SWRevealViewController и протащите курсор мыши до Menu View Controller. После того как вы отпустите клавишу, вы увидите контекстное меню для выбора сигвея (segue selection). В данном случае нам необходимо выбрать «reveal view controller set segue». Это определит пользовательский сигвей (segue) «SWRevealViewControllerSetSegue». Этот пользовательский переход (segue) сообщает SWRevealViewController о том что данный View Controller является исходным контроллером вида.

Примечание: Если вы используете старую версию SWRevealViewController, пожалуйста, обратите внимание, что использование SWRevealViewControllerSegue устарело и необходимо использовать SWRevealViewControllerSetSegue.

Повторите ту же самую процедуру для подключения к SWRevialViewController основного контроллера вида (основной вид содержащий новости).

Выберите сигвей между SWRevealViewController и Navigation Controller. Присвойте идентификатор «sw_front» для этого перехода в инспекторе атрибутов (attributes inspector). Это предопределенный идентификатор означающий переход к фронт-контроллеру представления (новости).

Для сигвея между SWRevealViewController и контроллера представления бокового меню, установите идентификатор «sw_rear». Этот идентификатор сообщает SWRevealViewController о том что этот контроллер представляет собой «подложку» (т.е. боковым меню).

Если вы скомпилируете и запустите приложение, то увидите приложение отображающего новости. И это все. Вы не увидите бокового меню, нажав на кнопку меню в левой части панели навигации. А все потому что мы еще не реализовали метод действия на нажатие этой кнопки.

Откройте «MainViewController.m», который является классом контроллера «News Frontpage». Добавьте следующую инструкцию импорта:

#import "SWRevealViewController.h"

Затем добавьте следующий код в метод viewDidLoad:

SWRevealViewController *revealViewController = self.revealViewController;
    if ( revealViewController )
    {
        [self.sidebarButton setTarget: self.revealViewController];
        [self.sidebarButton setAction: @selector( revealToggle: )];
        [self.view addGestureRecognizer:self.revealViewController.panGestureRecognizer];
    }

SWRevealViewController предоставляет метод revealToggle: для управления показом бокового меню. Как вы знаете, Cocoa использует механизм назначение-действие (target-action) для коммуникаций между контроллом и другими объектами. В качестве объекта-назначения для кнопки вызова меню мы установили View Controller панели навигации, а в качестве действия метод revealToggle:. Теперь, когда пользователь коснется кнопки показа бокового меню, будет вызван метод revealToggle:, который отобразит боковое меню. Наконец, мы добавили распознавание жеста. Теперь пользователь может вызвать меню не только нажатием кнопки, но и с помощью свайпа по области отображения основного контента приложения.

Попробуйте скомпилировать и выполнить приложение на симуляторе iPhone. Нажмите по кнопке «меню» и приложение должно показать вам выезжающее боковое меню. Нажмите на кнопку еще раз чтобы закрыть его. Так же вы можете открыть меню при помощи свайпа вправо.

Перед тем как продолжить, добавьте те же фрагменты кода в метод viewDidLoad: в файлах PhotoViewController.m и MapViewController.m. Приложение должно отображать боковую панель меню когда пользователь нажимает кнопку вызова меню и в этих двух конроллерах вида.

Однако меню сейчас не содержит ни одного элемента. Мы добавим несколько пунктов меню и продемонстрируем вам реализацию перехода от одного пункта к другому. Для простоты примера, мы будем проектировать наше меню прямо в storyboard.

Первая ячейка таблицы содержит заголовок «APPCODA». Вы можете заменить этот заголовок на любой другой, по вашему усмотрению. Единственное что вы должны соблюдать, это идентификаторы ячеек, которые мы будем использовать в нашем коде впоследствии.

Хорошо, давайте добавим несколько пунктов меню. Для начала выберите прототип ячейки и в инспекторе атрибутов увеличьте количество прототипов до 8. В итоге вы должны получить экран аналогичный экрану ниже:

Измените надпись второй ячейки с«APPCODA» на «News». Если хотите, вы можете изменить цвет надписи на темно серый и изменить шрифт на «Avenir Next» в инспекторе атрибутов «Attributes inspector». Затем, переместите на ячейку image view из библиотеки объектов. Установите размер 38x38 и установите изображение «news.png» для этого объекта.

Затем, присвойте ячейке идентификатор «news» в инспекторе атрибутов. В итоге у вас должна получиться ячейка на подобии той что вы видите на изображении ниже:

Повторите те же самые процедуры для того чтобы получить следующие пункты меню:

• Comments (изображение comments.png и идентификатор ячейки comments)
• Map (изображение map.png и идентификатор ячейки map)
• Calendar (изображение calendar.png и идентификатор ячейки calendar)
• Wishlist (изображение wishlist.png и идентификатор ячейки wishlist)
• Bookmark (изображение bookmark.png и идентификатор ячейки bookmark)
• Tag (изображение tag.png и идентификатор ячейки tag)

После завершения работы над пользовательским интерфейсом, давайте реализуем код для отображения ячеек таблицы навигации. Откройте файл “SidebarViewController.m” и добавьте в него следующую инструкцию импорта:

#import "SWRevealViewController.h"

Затем, объявите переменную menuItems для хранения идентификаторов пунктов меню.

@implementation SidebarViewController {
    NSArray *menuItems;
}

Приведенный выше код очень прост. Мы инициализировали массив элементами-значениями идентификаторов ячеек пунктов меню. Затем откорректируйте метод numberOfSectionsInTableView: чтобы он возвращал 1 и метод numberOfRowsInSection: — он должен возвращать корректное количество строк в таблице:

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    // Return the number of sections.
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    // Return the number of rows in the section.
    return menuItems.count;
}

Наконец, измените метод cellForRowAtIndexPath: следующим образом:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    NSString *CellIdentifier = [menuItems objectAtIndex:indexPath.row];
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
    
    return cell;
}

Этот код просто получает идентификатор ячейки таблицы из массива menuItems для дальнейшего ее отображения. Теперь снова скомпилируйте и запустите приложение. Нажмите на кнопку отображения меню и на этот раз вы увидете панель навигационного меню, содержащего элементы.

Чтобы не усложнять демонстрационный пример, мы подключим к пунктам меню всего три контроллера вида. Думаю это очень хорошо продемонстрирует вам принцип работы. Вот что мы собираемся сделать:

• Подключим ячейку с пунктом «News» к главному контроллеру вида, используя сигвей «reveal view controller push controller»
• Подключим ячейку с пунктом «Map» к контроллеру вида карты, используя сигвей «reveal view controller push controller»
• Все остальные ячейки пунктов меню будут связаны с контроллером вида просмотра фотографий, используя тот же вид сигвея. Однако для каждого пункта меню будет показана своя фотография.

Итак, давайте вернемся к storyboard. Для начала выберите ячейку с идентификатором «map» (карта). Нажмите и удерживайте клавишу control на клавиатуре и щелкните по ячейкe «map». Протащите курсор мыши до контроллера вида отображения карты и выберите сигвей «reveal view controller push controller» в секции Selection Segue.

Повторите эту процедуру для ячейки «News», но соедините ее с главным контроллером вида.

Для каждого из пунктов меню comments, calendar, wishlist, bookmark и tag, подключите их один за одним к навигационному контроллеру контроллера вида отображения фотографий и каждому из созданных переходов присвойте идентификатор «showPhoto». Мы будем использовать этот идентификатор чтобы отличить эти сигвеи от двух предидущих.

После завершения конфигурирования сигвеев в storyboard, откройте «SidebarViewController.m». Для начала добавьте инструкцию импорта:

#import "PhotoViewController.h"

Затем добавьте метод prepareForSegue: для управления переходом:

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    
    // Set the title of navigation bar by using the menu items
    NSIndexPath *indexPath = [self.tableView indexPathForSelectedRow];
    UINavigationController *destViewController = (UINavigationController*)segue.destinationViewController;
    destViewController.title = [[menuItems objectAtIndex:indexPath.row] capitalizedString];
    
    // Set the photo if it navigates to the PhotoView
    if ([segue.identifier isEqualToString:@"showPhoto"]) {
        UINavigationController *navController = segue.destinationViewController;
        PhotoViewController *photoController = [navController childViewControllers].firstObject;
        NSString *photoFilename = [NSString stringWithFormat:@"%@_photo", [menuItems objectAtIndex:indexPath.row</a>;
        photoController.photoFilename = photoFilename;
    }
}

В приведенном выше коде, мы сначала получаем идентификатор текущей ячейки и устанавливаем его в качестве заголовка для навигационной панели. Для сигвеев с идентификатором «showPhoto», контроллер вида отображения фотографий будет отображать только одну фотографию. В этом коде мы задаем имя файла изображения, которое мы будем отображать. Например, когда пользователь выберет пункт «Comments», мы покажем «comments_photo.jpg».