Шаблоны для новичков. Урок 12. Верхнее меню и иконки

Дальнейшие действия по созданию шаблона должны опираться на дизайн сайта. В нашем макете лишь черновые элементы, без конкретного оформления. Я решил, что немного упрощу себе задачу и дизайн буду «придумывать» на ходу: в учебных целях будет проще понять для чего я прописываю различные css-свойста пошагово. Я буду использовать самый минимум оформления: так и проще его модифицировать под свою задачу, да и разобраться в коде не составит труда.

Итак, у нас есть компоненты-заглушки и готовая модульная сетка сайта. Согласно чеклисту самое время задать основные стили оформления текстов и фона браузера (п.10). Но мы этот шаг пропустим потому что мы создаем шаблон по технологии Default и у нас уже определены все стандартные стили (defaul/css/style-all.css).

Сейчас же мы выставим лишь основные стили.

Фон браузера. Фон страниц

Пусть фон браузера будет светло-серым (#DDD). Фон контента и сайбара - белый. Между контентом и сайдбаром сделаем прозрачную границу, то есть визуально выделим колонки текста и сайдбара.

Открываем var_style.less и здаём цвет браузера:

body {
	background: #DDD;
}

Фон контента (белый - white) у нас уже задан в div.main. Но этот блок распространяется как на контент, так и на сайдбар. Следовательно, цвета нужно задавать для div.content и div.sidebar отдельно без задания цвета div.main.

Но мы помним, что блоки контента и сайдбара расположены впритык друг к другу, поэтому визуальный отступ можно будет задать только через их wrap-блоки.

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

CSS-код станет даже проще.

// СТРУКТУРА САЙТА
 
body {
	background: #DDD;
}
 
@all_width: 960px;
@sidebar_width: 270px;
 
div.main {
	width: @all_width; 
	margin: 0 auto; 
}
 
div.content {
	width: @all_width - @sidebar_width; 
	margin: 0 @sidebar_width 0 0; 
	float: left;
 	
	div.content-wrap {
		margin: 20px 10px 10px 0px;
		padding: 10px 15px;
		background: white;
	}
}
 
div.sidebar {
	width: @sidebar_width; 
	float: right; 
	margin: 20px 0 0 -@sidebar_width;
	
	div.sidebar1-wrap {
		background: white;
		padding: 10px 15px;
	}
}

То есть для wrap-блоков я задал внешний отступ в margin и внутренний в padding. Причем отступ между колонками задан только в div.content-wrap, то есть мы сохранили общую ширину сайдбара в 270px.

Компоненты шапки

Работа с компонентами заключается в решении следующих задач:

• Создание HTML-структуры.
• Функциональное наполнения (программирование + опции).
• Стилевое оформление (дизайн компонента).

Рассмотрим все три компонента шапки в общих чертах.

Первый - состоит из двух блоков. Мы уже знаем, это это два float-блока. В первом меню, во втором иконки. В default-шаблоне уже есть похожие компоненты: menu.php и logo-links.php. Очевидно, что в своей работе мы воспользуемся этими наработками.

Второй компонент - просто логотип/шапка сайта. С ним всё достаточно просто, более того, уже есть похожие компоненты image-select.php и image-rand.php.

Третий компонент, как и первый состоит из двух float-блоков: главное меню и форма поиска. Компонента с формой поиcка нет, но есть аналог плагин виджета. Форма там достаточно простая, поэтому мы ей также можем воспользоваться.

Обращу внимание на тот факт, что на сайте два меню, поэтому нам нужно будет предусмотреть другую опцию задания пунктов меню в админке.

Первый компонент шапки - header-menu-top.php

HTML-структура частично уже создана - это основной и wrap-блоки. Делаем еще два float-блока. Первый - меню, второй - иконки.

<?php if (!defined('BASEPATH')) exit('No direct script access allowed');?>
 
	<div class="header-menu-top">
		<div class="wrap">
			<div class="r1 left">
				меню 			
			</div>
			
			<div class="r2 right">
				иконки 
			</div>
			
			<div class="clearfix"></div>
		</div>
	</div>

Плавающие блоки я сделал с помощью классов-хелперов left и right, а для прекращения обтекания - clearfix.

Теперь желательно задать для div.r1 и div.r2 фиксированную ширину. Пусть это будет 690px и 270px.

// верхнее меню и иконки
div.header-menu-top {
	div.wrap {
		div.r1 {
			width: 690px;
		}
 		
		div.r2 {
			width: 270px;
		}
	}
}

Теперь разбермся с каждым блоком. Для меню логично было бы использовать существующий компонент menu.php. Но с ним, есть один нюанс: он использует свои опции (главное меню), а нам нужно выводить другие пункты. Поэтому мы воспользуемся возможностями MaxSite CMS.

...
<div class="r1 left">
	<ul class="menu">
		<?php
			$menu = mso_get_option('menu2', 'templates', '/ | Главная');
			if ($menu) echo mso_menu_build($menu, 'selected', false);
		?>
	</ul> 			
</div>
...

Меню выводится в списке UL. Пункты меню получаем из опции menu2. Формирование пунктов доверим MaxSite CMS - функции mso_menu_build().

Красной линией я подчеркнул выведенное меню.

Для этого меню мы придумали опцию menu2. Опции для компонентов хранятся в одноименных ini-файлах в каталоге options. То есть делаем файл components/options/header-menu-top.ini

[Меню-2 верхнее]
options_type = templates
options_key = menu2
type = textarea
description = "Задайте верхнее меню. Правила теже, что и у стандартного меню."
default = "/ | Главная_NR_about | О сайте"
section = "Верхнее меню"
section_description = "Компонент header-menu-top"

После сохранения в Настройках шаблона можно указать пункты верхнего меню

За дизайн меню мы пока не беремся, решим этот вопрос сразу для всего компонента. Пока же зададим второй блок - иконки.

Иконки

С ним достаточно просто - просто скопируем часть кода из default-компонента logo-links.php в наш.

...
<div class="r2 right">
<?php
	echo '<a class="header-social rss" href="' . getinfo('rss_url') . '"><img src="' . getinfo('stylesheet_url') . 'images/social/rss.png" width="16" height="16" alt="RSS" title="RSS"></a>';
 
	if ($u = mso_get_option('default_twitter_url', 'templates', ''))
		echo '<a class="header-social twitter" rel="nofollow" href="' . $u .'"><img src="' . getinfo('stylesheet_url') . 'images/social/twitter.png" width="16" height="16" alt="Twitter" title="Twitter"></a>';
 
	if ($u = mso_get_option('default_facebook_url', 'templates', ''))
		echo '<a class="header-social facebook" rel="nofollow" href="' . $u .'"><img src="' . getinfo('stylesheet_url') . 'images/social/facebook.png" width="16" height="16" alt="Facebook" title="Facebook"></a>';
		
	if ($u = mso_get_option('default_skype_url', 'templates', ''))
		echo '<a class="header-social skype" rel="nofollow" href="' . $u .'"><img src="' . getinfo('stylesheet_url') . 'images/social/skype.png" width="16" height="16" alt="Skype" title="Skype"></a>';
		
	if ($u = mso_get_option('default_vkontakte_url', 'templates', ''))
		echo '<a class="header-social vkontakte" rel="nofollow" href="' . $u .'"><img src="' . getinfo('stylesheet_url') . 'images/social/vkontakte.png" width="16" height="16" alt="В контакте" title="В контакте"></a>';
 
	if ($u = mso_get_option('default_jabber_url', 'templates', ''))
		echo '<a class="header-social jabber" rel="nofollow" href="' . $u .'"><img src="' . getinfo('stylesheet_url') . 'images/social/jabber.png" width="16" height="16" alt="Jabber" title="Jabber"></a>';
 
	if ($u = mso_get_option('default_gplus_url', 'templates', ''))
		echo '<a class="header-social gplus" rel="nofollow" href="' . $u .'"><img src="' . getinfo('stylesheet_url') . 'images/social/gplus.png" width="16" height="16" alt="Google plus" title="Google plus"></a>';	
?>	
</div>
...

Каждая иконка строится по единому принципу: получается опция (адрес соцсети), если адрес определен, то формируется ссылка с изображением-иконкой.

Теперь важный момент: опции для социальных иконок уже определены в options-template.ini, поэтому еще раз их переопределять в компоненте не нужно!

Дизайн первого компонента шапки

Зададим фон компонента темно-серым.

// верхнее меню и иконки
div.header-menu-top {
	background: #404040;
...

Теперь поменяем стили меню. Прежде всего я хочу сделать его меньше по высоте, а для выделения пунктов использовать не фон, а цвет текста. Обратите внимание, что в var_style.less уже есть некоторые стили для меню (секция МЕНЮ ВЫПАДАЮЩЕЕ). В файле /default/css/less/include/mso-menu-vertical.less при желании можно посмотреть предопределенные стили меню. Например здесь задается стандартная высота 35px. Наша задача переопределить эти стили.

Полный блок less-стилей см. чуть ниже.

Иконки

С ними немного проще. Нам нужно разместить их по высоте строки и сделать выключку вправо. Также задать отступы, чтобы они не сливались. Для центирования по вертикали используем небольшую css-хитрость: укажем line-height равным высоте меню. Браузер автоматом отцентрирует картинки.

Результирующий less-код

На текущий момент стили компонента.

// верхнее меню и иконки
div.header-menu-top {
	
	background: #404040; // фон компонента
 
	div.wrap {
		div.r1 {
			width: 690px; // ширина первого блока
			
			ul.menu {
				@select_color: yellow; // цвет при наведении и выбранного пункта
				
				li {
					height: 25px; // высота меню
					line-height: 25px;
					
					a {
						font-weight: normal; // шрифт
						font-size: 9pt;
						padding: 0 10px 0 0; // отступ между пунктами
						
						// при наведении
						&:hover {
							background: none; 
							color: @select_color;
						}
					}
					
					// выделенный пункт
					&.selected a {
						background: none;
						color: @select_color;
					}
				}
			}
		}
		
		// иконки
		div.r2 {
			width: 270px; // ширина блока
			text-align: right; // выравнивание 
			line-height: 25px; // высота та же, что и у меню
			
			img {
				margin-left: 2px; //отступ между иконками
			}
		}
	}
}

Для цвета текста меню я ввел переменную @select_color.

Шаблон для загрузки

Для экспериментов вы можете загрузить текущий файл шаблона ⁸²⁵.

««« Урок 13 | Урок 11 »»»