Приветствую Вас, друзья!
Windows 8 — не являться просто очередным обновлением программной оболочки. Кампания имеет большие планы и надежды на эту операционную систему в отношении сотрудничества с разработчиками смартфонов, планшетов и КПК.
Вообщем любителям новизны и удобства посвящается!
Так Windows 8 это новая эра нашего развития: простота, удобство в использовании, сенсорный ввод, в интернете стали популярны шаблоны для сайтов разных платформ в стиле Windows 8 Metro.
Но если вы не хотите устанавливать новый шаблон по таким причинам:
- вы купили свой предыдущий шаблон
- или просто сделали его верстку, тем самым вложили некоторую суму денег
- вам дорог ваш шаблон, вы вложили в него свой труд и любовь, и не хотите с ним расставаться
Не переживайте, зарубежные умельцы(буржуи) нашли способ выхода из такой передряги!
А именно, установка на сайт отдельных виджетов, меню в красивом стиле Metro. Вообще-то я эту тему спалил для сайтов Blogger, но решился попробовать на своем сайте (кстати, он на платформе wordpress)и все, на удивления, вышло на ура!
Тут я и решился поведать вам как сделать меню в wordpress в стиле Windows 8 Metro. Я пробовал установить данное меню в подвале своего сайта (footer.php), вот что получилось, просто (повторю слова того блоггера) прелесть:
У меня просто нет слов!
Как сделать меню в wordpress:
Кто желает установить такое меню на свой блог, просто следуйте моей инструкции. Для начала нам нужно установить в наш шаблон стиль CSS для меню.
Заходим в панель администратора — внешний вид—редактор—таблица стилей (style.css) и добавляем в самый низ код CSS:
|
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
|
*===MBL METRO UI Menu==*/
body {
font—family:sans—serif;
}
a {
text—decoration:none;
}
.mblmetromenu {
width:960px;
margin:auto;
}
@media screen and (max—width:960px) {
.mblmetromenu {
width:100%;
}
}
/* MblMetroMenu */
.MblMetroMenu {
position:relative;
}
.om—nav {
position:absolute;
width:100%;
z—index:999;
display:none;
}
.om—ctrlbar {
width:100%;
height:48px;
}
.om—ctrlitems {
margin:auto;
padding:0px;
height:48px;
display:inline—block;
text—align:center;
}
.om—ctrlitem {
height:48px;
width:48px;
display:none;
cursor:pointer;
float:left;
opacity:0.5;
—ms—filter: «progid: DXImageTransform.Microsoft.Alpha(Opacity=50)» !important;
filter: alpha(opacity=50) !important; /* For IE8 and earlier */ }
.om—ctrlitem:hover {
opacity:0.8;
—ms—filter: «progid: DXImageTransform.Microsoft.Alpha(Opacity=80)» !important;
filter: alpha(opacity=80) !important; /* For IE8 and earlier */ }
.om—activectrlitem {
opacity:1 !important;
—ms—filter: «progid: DXImageTransform.Microsoft.Alpha(Opacity=100)» !important;
filter: alpha(opacity=100) !important; /* For IE8 and earlier */ }
.om—controlitems {
width:960px;
margin:auto;
}
.om—controlitem {
height:48px;
cursor:pointer;
}
.om—closenav {
float:left;
}
.om—movenext {
float:right;
}
.om—itemholder {
margin:auto;
padding:20px 0px;
}
@media screen and (max—width:960px) {
.om—closenav {
position:absolute;
z—index:9999;
left:0;
top:0;
}
.om—movenext {
position:absolute;
z—index:9999;
right:0;
top:0;
}
.om—controlitems {
width:100%;
}
.om—itemholder {
width:100%;
}
}
.om—centerblock {
display:inline—block;
}
.om—item {
display:none;
}
.om—showitem {
margin:5px;
float:left;
display:none;
}
/* END MblMetroMenu */
/* TILE BUTTONS */
/* Standar Buttons */
.tile—bt {
text—align:center;
cursor:pointer;
width:90px;
height:90px;
}
.tile—bt a {
display:block;
padding—top:12px;
text—decoration: !important;
}
.tile—bt img {
margin:0 auto 0 auto;
padding—bottom:5px;
height:48px;
width:48px;
position:relative;
display:block;
}
.tile—bt span {
font—size:12px;
padding—bottom:10px;
display:block;
}
.tile—bt:active {
opacity:0.5;
}
/* End Standard Buttons */
/* Large Buttons */
.tile—bt—large {
width:190px;
height:90px;
line—height:90px;
text—align:center;
cursor:pointer;
}
.tile—bt—large a {
display:block;
text—decoration: !important;
}
.tile—bt—large img {
vertical—align: middle;
margin:auto;
padding:0px;
position:relative;
width:48px;
height:48px;
}
.tile—bt—large span {
vertical—align: middle;
display:inline;
}
.tile—bt—large:active {
opacity:0.5;
}
/* End Large Buttons */
/* Extralarge Buttons */
.tile—bt—extralarge {
text—align:center;
cursor:pointer;
width:190px;
height:190px;
}
.tile—bt—extralarge a {
display:block;
padding—top:52px;
text—decoration: !important;
}
.tile—bt—extralarge img {
margin:0 auto 0 auto;
padding—bottom:22px;
height:80px;
width:80px;
position:relative;
display:block;
}
.tile—bt—extralarge span {
font—size:14px;
padding—bottom:20px;
display:block;
}
.tile—bt—extralarge:active {
opacity:0.5;
}
/* End Extralarge Buttons */
/* END TILE BUTTONS */
/* SHADOW LIST */
.shadow—white, .shadow—black, .shadow—blue, .shadow—green, .shadow—red {
/*display:inline-block;*/
}
.shadow—white:hover {
box—shadow:0px 0px 6px 3px #fff;
—webkit—box—shadow:0px 0px 6px 3px #fff;
—moz—box—shadow:0px 0px 6px 3px #fff;
—o—box—shadow:0px 0px 6px 3px #fff;
—ms—box—shadow:0px 0px 6px 3px #fff;
}
.shadow—blue:hover {
box—shadow:0px 0px 6px 3px #38D1F7;
—webkit—box—shadow:0px 0px 6px 3px #38D1F7;
—moz—box—shadow:0px 0px 6px 3px #38D1F7;
—o—box—shadow:0px 0px 6px 3px #38D1F7;
—ms—box—shadow:0px 0px 6px 3px #38D1F7;
}
.shadow—green:hover {
box—shadow:0px 0px 6px 3px #AACA37;
—webkit—box—shadow:0px 0px 6px 3px #AACA37;
—moz—box—shadow:0px 0px 6px 3px #AACA37;
—o—box—shadow:0px 0px 6px 3px #AACA37;
—ms—box—shadow:0px 0px 6px 3px #AACA37;
}
.shadow—red:hover {
box—shadow:0px 0px 6px 3px #E81750;
—webkit—box—shadow:0px 0px 6px 3px #E81750;
—moz—box—shadow:0px 0px 6px 3px #E81750;
—o—box—shadow:0px 0px 6px 3px #E81750;
—ms—box—shadow:0px 0px 6px 3px #E81750;
}
.shadow—black:hover {
box—shadow:0px 0px 6px 3px #444;
—webkit—box—shadow:0px 0px 6px 3px #444;
—moz—box—shadow:0px 0px 6px 3px #444;
—o—box—shadow:0px 0px 6px 3px #444;
—ms—box—shadow:0px 0px 6px 3px #444;
}
/* END SHADOW LIST */
/* BACKGROUND LIST */
/* Solid Colors */
.solid—blue { background:#00BBE2; }
.solid—blue—2 { background:#2C84EE; }
.solid—darkblue { background:#044E94; }
.solid—violetred { background:#781766; }
.solid—red { background:#E51400;}
.solid—red—2 { background:#E81750; }
.solid—pink { background:#FF539B; }
.solid—purple { background:#D02090; }
.solid—orange { background:#FB8F02; }
.solid—orange—2 { background:#FF6600; }
.solid—orange—3 { background:#DD5F37; }
.solid—coral { background:#CD5B45; }
.solid—green { background:#67B239; }
.solid—green—2 {background:#96BF01; }
.solid—darkgreen { background:#016C38; }
.solid—olive { background:#999900}
.solid—grass { background:#CDCD00; }
.solid—darkred { background:#5F0000; }
.solid—gold { background:#FEE9AE; }
.solid—yellow { background:#F7D100; }
.solid—black { background:#000; }
.solid—smoke { background:#F5F5F5; }
/* End Solid Colors */
/* MISC */
.clearspace { clear: both; }
.floatleft { float:left; }
.floatright { float:right; }
.none { display: none !important; width:0px !important; }
.light—text {
color:#fff;
}
.dark—text {
color:#1e1e1e;
}
.gradient {
background: —moz—linear—gradient(—45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%); /* FF3.6+ */
background: —webkit—gradient(linear, left top, right bottom, color—stop(0%,rgba(255,255,255,0)), color—stop(100%,rgba(255,255,255,0.3))); /* Chrome,Safari4+ */
background: —webkit—linear—gradient(—45deg, rgba(255,255,255,0) 00%,rgba(255,255,255,0.3) 100%); /* Chrome10+,Safari5.1+ */
background: —o—linear—gradient(—45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* Opera 11.10+ */
background: —ms—linear—gradient(—45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* IE10+ */
background: linear—gradient(—45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* W3C */
}
.margin—5 { margin:5px; }
|
В коде, если вы хотите, можно изменять оформление: тени, градиент, цвета и т.д .
Теперь нам нужно установить само меню (код HTML) в шаблон.
Установить можете куда душа пожелает! Например, можете поставить данный код чуть ниже заголовка блога.
А вот и сам код:
|
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
<!— mblmetromenu —>
<div class=«mblmetromenu»>
<div data—navid=«om-nav» class=«tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft MblMetroMenu»>
<a href=«#» class=«gradient»>
<img src=«/wp-content/uploads/2013/11/home.png» alt=«» />
<span class=«light-text»>Главная</span>
</a>
</div>
<div data—navid=«om-nav» class=«tile-bt-large solid-coral shadow-red margin-5 floatleft MblMetroMenu»>
<a href=«#» class=«gradient»>
<img src=«/wp-content/uploads/2013/11/messanger.png» alt=«» />
<span class=«light-text»>О блоге</span>
</a>
</div>
<div data—navid=«om-nav2» class=«tile-bt solid-purple shadow-blue margin-5 floatleft MblMetroMenu»>
<a href=«#» class=«gradient»>
<img src=«/wp-content/uploads/2013/11/rss.png» alt=«» />
<span class=«light-text»>Rss Feeds</span>
</a>
</div>
<div data—navid=«om-nav» class=«tile-bt-large solid-red shadow-red margin-5 floatleft MblMetroMenu»>
<a href=«#» class=«gradient»>
<img src=«/wp-content/uploads/2013/11/search.png» alt=«» />
<span class=«light-text»>Поиск</span>
</a>
</div>
<div data—navid=«om-nav2» class=«tile-bt solid-darkred shadow-red margin-5 floatleft MblMetroMenu»>
<a href=«#» class=«gradient»>
<img src=«/wp-content/uploads/2013/11/mail.png» alt=«» />
<span class=«light-text»>Контакт</span>
</a>
</div>
<div data—navid=«om-nav2» class=«tile-bt solid-black shadow-black margin-5 floatleft MblMetroMenu»>
<a href=«#» class=«gradient»>
<img src=«/wp-content/uploads/2013/11/help.png» alt=«» />
<span class=«light-text»>Помощь</span>
</a>
</div>
<div data—navid=«om-nav2» class=«tile-bt solid-orange shadow-black margin-5 floatleft MblMetroMenu»>
<a href=«#» class=«gradient»>
<img src=«/wp-content/uploads/2013/11/youtbe.png» alt=«» />
<span class=«light-text»>YouTube</span>
</a>
</div>
<div data—navid=«om-nav2» class=«tile-bt solid-darkblue shadow-blue margin-5 floatleft MblMetroMenu»>
<a href=«#» class=«gradient»>
<img src=«/wp-content/uploads/2013/11/face.png» alt=«» />
<span class=«light-text»>Facebook</span>
</a>
</div>
<div data—navid=«om-nav» class=«tile-bt-large solid-blue shadow-blue margin-5 floatleft MblMetroMenu»>
<a href=«#» class=«gradient»>
<img src=«/wp-content/uploads/2013/11/photo.png» alt=«» />
<span class=«light-text»>Фото</span>
</a>
</div>
<div data—navid=«om-nav2» class=«tile-bt solid-olive shadow-green margin-5 floatleft MblMetroMenu»>
<a href=«#» class=«gradient»>
<img src=«/wp-content/uploads/2013/11/music.png» alt=«» />
<span class=«light-text»>Музыка</span>
</a>
</div>
<div data—navid=«om-nav» class=«tile-bt-large solid-blue-2 shadow-blue margin-5 floatleft MblMetroMenu»>
<a href=«https://infonion.ru/» class=«gradient»>
<img src=«/wp-content/uploads/2013/11/MBL.png» alt=«» />
<span class=«light-text»>Интересно о полезном</span>
</a>
</div>
<!— End MblMetroMenu —>
</div>
<!— END mblmetromenu —>
|
Меняйте название меню, подставляйте свои ссылки вместо решеток, удаляйте лишние блоки, добавляйте новые- все в ваших руках!
Новость 1:
Нашел запись, оказывается это меню можно использовать на любой платформе, которая поддерживает Html или CSS: WordPress, Joomla и т.д.
Также советую почитать вам, вот эту статейку:
Устанавливаем виджет комментариев вконтакте для сайта на WordPress
Обращайтесь, всегда буду рад помочь!
На этом сегодня все!
Всем пока. До новых встреч!
С уважением, Владислав Лемишко.
Тема до конца не раскрыта. И если честно, то так не делают. Ссылки на картинки, которые лежат на другом сайте, а он не работает. Прежде чем публиковать такие уроки, нужно проверить все самому. Тупо скопированный код с другого сайта может попросту не работать.
Во-первых, здравствуйте! А во-вторых, вы вообще читали пост? В нем ясно написано, что я опробовал данный код и все работает на ура! Может вы дополните тему, прямо в комментариях? С любопытством почитаю, да и пользователям пойдет на пользу!
Кстати, хочу сказать Вам спасибо! Про замену ссылок я как-то забыл! Но, насчет того, что ссылки на картинки не работают Вы не правы!
По началу я тоже так думал, но они 100% рабочие! Вы переходите по ссылке и видите белый экран, а где же картинка спросите вы? Для того чтобы увидеть картинку, вам достаточно в левом верхнем углу зажать левую кнопку мыши и немного сдвинуть мышь в бок или вниз, и Вы сможете увидеть данную картинку.
Они немного прозрачны и на белом фоне их не видно! Можете попробовать теперь уже с моими ссылками, все картинки хранятся на моем блоге!
Ну все равно, зачем, допустим, мне, делать меню, картинки которого будут лежать на другом сервере. Так не делают, это не есть хорошо. И с уведомлениями об ответе в комментариях разберитесь, они не приходят на почту. Если бы не написали на моем блоге, то я бы не узнал, что тут есть ответ.
Сохраните картинки и загрузите на свой сервер, в чем проблема? Нужна подробная информация, обращайтесь! Даже могу сделать специальный архив с картинками! А уведомления работают!
хм прикольненько:)
Рад снова видеть Вас на моем блоге!
И еще, я увидел здесь фразу:
Этот блог ведут несколько человек?
Я и еще раз я!
Так и пишите — мой сайт.
Мне на почту ничего не приходит.
Я уже поменял!
А вы галочку не убирали случайно?
Нет. Самый верный способ проверить, это спросить остальных, приходят ли им уведомления.
Смысл от такого меню? Дизайн должен гармонировать во всей теме оформления
Это на любителя: кому-то нравится, кому-то нет! Все можно настроить под свой дизайн, думаю тогда будет неплохо смотреться!
Здравствуйте, Влад! Вот тут столько споров сразу…
Но понятно же должно быть, что может кто то захочет креатива и поменяет всё под стиль Windows 8 Metro. И тем более, Вы пишете, что поможете разобраться кому это надо будет. Для меня пока это сложновато — менять кардинально что то в коде, но у меня всё обучение впереди, то есть хочу сказать, что учусь всему каждый день.
Очень миленькая стрелочка прокрутки вверх, ну с бабочкой летящей.
Здравствуйте, Лара! Спасибо Вам за понимание, хоть кто-то все понял правильно! Я не заставляю — я предлагаю! А за стрелочку отдельное спасибо!
У Вас хороший блог! Мне нравится! Буду приходить за техническими советами!
Вы предоставили мне стимул работать больше, спасибо! Всегда рад Вас видеть на моем блоге!
От этого наверное нагрузка на бд идёт сильная.
Я так не думаю, код делали специалисты, возможно они учли этот момент!
Я от том, что лишние коды в любом случае дают дополнительную нагрузку.
Подписка норм работает.
Что да, то да! Но лучше скрипт, чем какой-то плагин! Хотя блогу без скриптов и плагинов никак!
Блин игра пугает, когда захожу в статью, в первую очередь начинаю искать рекламный блог Гугла, а потом и забываю зачем зашел!)
А зачем рекламный блог Гугла? Ты хотел сказать «блок»…?
Можете помочь установить на сайт такое меню? У меня не получается…
Да, могу посмотреть и по возможности помочь! =)
Напишите почту, я вам туда логин и пароль от сайта скину.
Спасибо.
Постоянно всем пишу почту в комментариях… А почему бы просто не зайти в раздел «Контакты» и посмотреть там? *UNKNOWN*
Еще раз хочется выразить благодарность автору сайта за своевременную помощь в создании и редактировании меню! Очень сильно помог человек. Желаю дальнейшего развития вам и успехов!
Спасибо!
Обращайтесь, если что! Всегда рад помочь! =)