Анализ сайта: Проверка Траста

Многоуровневое горизонтальное выпадающее меню

Сегодня я Вам расскажу, как установить в блог многоуровневое горизонтальное выпадающее меню. У этого меню не возникают проблемы с браузерами Chrome, Firefox, и даже Safari. Но для начала надо немного рассказать про меню. Это будет полезно знать каждому. Меню бывают трех типов: верхнее, горизонтальное, в сайдбаре. Верхнее меню – обязательно должно быть. Обычно, в нем размещают различные страницы блога: главная, карта сайта, контакты и так далее.

многоуровневое выпадающее меню

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

Как установить многоуровневое горизонтальное выпадающее меню в блог?

Для этого надо зайти в Дизайн, потом в раздел Изменить HTML. Там в шаблоне надо найти код ]]> и вставить перед ним код стиля:

001.wrapper1{
002	color: #44433f;
003	font: 14px "Futura Medium", "Myriad Pro", "Gill Sans", Helvetica, Verdana, Arial, sans-serif;
004	margin: 0;
005	padding: 4px 0 0;
006	}
007	.wrapper1 a{
008	color: #E5F2FB;
009	text-decoration: none;
010	}
011	.wrapper1 a:hover {
012	color: #09548B;
013	}
014	.wrapper1 p {
015	margin: 0 0 17px;
016	padding: 0;
017	line-height: 18px;
018	}
019	.wrapper {
020	/*width: 710px;*/
021	margin: 20px auto;
022	}
023	.nav {
024	background: #fff url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsmFxQxnOI/AAAAAAAAAHo/WeNb4h2lTcY/s1600/nav_bg.png) repeat-x;
025	float: left;
026	}
027	.nev-wrapper {
028	clear: both;
029	float: left;
030	}
031	.nav-left {
032	background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsmHgvXrfI/AAAAAAAAAHs/0C36haanf_o/s1600/nav_left.png) no-repeat top left;
033	float: left;
034	width: 11px;
035	height: 41px;
036	}
037	.nav-right {
038	background: url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsmIzag1WI/AAAAAAAAAHw/qNqgaojq4OI/s1600/nav_right.png) no-repeat top right;
039	float: left;
040	width: 11px;
041	height: 41px;
042	}
043	.nav ul {
044	/*width: 648px;*/
045	height: 38px;
046	float: left;
047	margin: 0;
048	padding-top: 3px;
049	list-style: none;
050	font-size: 15px;
051	}
052	.nav li {
053	float: left;
054	padding: 0 7px;
055	background: url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsmP8wgFmI/AAAAAAAAAIA/wdf4DZhsFKg/s1600/split.png) no-repeat right center;
056	position: relative;
057	z-index: 1;
058	}
059	.nav li.last {
060	background:none;
061	}
062	.nav li:hover {
063	z-index:2;
064	}
065	.nav li a {
066	display: block;
067	line-height: 38px;
068	overflow: hidden;
069	float: left;
070	}
071	a .menu-left {
072	background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsl3yDJRkI/AAAAAAAAAHQ/hZkoiBamxso/s1600/menu_left.gif) no-repeat left top;
073	width: 8px;
074	height: 32px;
075	line-height: 35px;
076	display: block;
077	float: left;
078	}
079	a .menu-mid {
080	background: url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsl7c8ppBI/AAAAAAAAAHY/hxR8ObxBYmo/s1600/menu_mid.gif) repeat-x top left;
081	height: 32px;
082	line-height: 35px;
083	display: block;
084	float: left;
085	}
086	a .menu-right {
087	background: url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsmCJ3D5iI/AAAAAAAAAHg/0y7-Wpz4C2o/s1600/menu_right.gif) no-repeat top left;
088	width: 8px;
089	height: 32px;
090	line-height: 35px;
091	display: block;
092	float: left;
093	}
094	.nav li a:hover .menu-left,
095	.nav li.active a .menu-left,
096	.nav li:hover a .menu-left,
097	.nav li a:hover .menu-mid,
098	.nav li.active a .menu-mid,
099	.nav li:hover a .menu-mid,
100	.nav li a:hover .menu-right,
101	.nav li.active a .menu-right,
102	.nav li:hover a .menu-right {
103	background-position: 0 -37px;
104	line-height: 35px;
105	}
106	.nav li a:hover,
107	.nav li.active a,
108	.nav li.hover a,
109	.nav li:hover a {
110	color: #09548B;
111	}
112	.nav li:hover .sub,
113	.nav li.hover .sub {
114	display:block;
115	}
116	.nav li .sub {
117	display: none;
118	position: absolute;
119	top: 27px;
120	left: 6px;
121	background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsmUJr-yhI/AAAAAAAAAIM/OihvjAeTyG8/s1600/submenu_top.png) no-repeat;
122	width: 186px;
123	padding-top: 9px;
124	}
125	.nav li ul {
126	background: url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsmRpDHDsI/AAAAAAAAAIE/ADndeR5TGu8/s1600/submenu_bg.png) repeat-y;
127	width: 162px;
128	height: auto;
129	margin: 0;
130	padding: 0 12px 10px;
131	list-style: none;
132	font-size: 14px;
133	}
134	 
135	.nav li:hover li,
136	.nav li.active li {
137	width: 100%;
138	padding: 1px 0 2px;
139	border-bottom: 1px #C1D9F0 dashed;
140	background: none !important;
141	}
142	.nav li:hover li a,
143	.nav li.active li a {
144	color: #09548B;
145	background: none !important;
146	line-height: normal;
147	width: 156px;
148	padding: 8px 3px 3px;
149	text-indent: 1px;
150	}
151	.nav li:hover li a:hover,
152	.nav li.active li a:hover {
153	color: #fff;
154	background: #165B9F !important;
155	text-decoration: none;
156	line-height: normal;
157	}
158	/*IE*/
159	.nav li li a:hover,
160	.nav li li a:hover {
161	color: #fff;
162	background: #165B9F !important;
163	text-decoration: none;
164	line-height: normal;
165	}
166	/**/
167	.nav .btm-bg {
168	background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsmS3dJfYI/AAAAAAAAAII/h8j3-QE6ElE/s1600/submenu_bottom.png) no-repeat;
169	width: 205px;
170	height: 9px;
171	overflow: hidden;
172	clear: both;
173	}
174	.content {
175	width: 670px;
176	background: transparent url(http://3.bp.blogspot.com/_jM8-wHc3NKY/TQslwVgdWcI/AAAAAAAAAHA/hPtWaiguCKQ/s1600/content_bg.png) repeat-y;
177	float: left;
178	padding: 10px 20px;
179	}
180	.content h1 {
181	color: #333;
182	font-weight: 400;
183	text-transform: uppercase;
184	font-size: 18px;
185	border-bottom: 1px dashed #C1D9F0;
186	}
187	.content h2 {
188	font-weight: 400;
189	text-transform: uppercase;
190	font-size: 14px;
191	padding-left: 10px;
192	margin-bottom: -5px;
193	}
194	.content p {
195	padding: 0 15px;
196	text-align: justify;
197	}
198	.content-bottom {
199	width: 710px;
200	background: transparent url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQslyLtUh4I/AAAAAAAAAHE/KjmSaXhHWuw/s1600/content_bottom.png) no-repeat;
201	height: 13px;
202	float: left;
203	}

Теперь Вы можете дать название своему меню и заменять решетки URL адресами страниц. Теперь Вы знаете, как добавить многоуровневое горизонтальное выпадающее меню в блог.

25
Янв

Вверх