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

Я в социальных сетях

Присоединяйся ко мне!

/*-------Стиль всего блока меню -----------*/ .navmenu { display:block; position:relative; border-radius: 10px; -moz-border-radius: 10px; -webkid-border-radius: 10px; height: 48px; width: 100%; } /*----------- Стили внешних кнопок меню ------------*/ .navtab a.linktab:after { content: url(http://s019.radikal.ru/i629/1205/44/e3cf4375e4df.png); } .navtab { float: left; position:relative; margin: 5px; } .navtab:hover { margin: 4px; } .navtab a.linktab { display:block; position:relative; text-decoration: none; font: normal bold 120% tahoma; color: #EEEEEE; text-shadow: 1px 1px 1px #000; padding: 5px 5px 15px 10px; } .navtab:hover a.linktab { z-index: 9999; color:#161616; text-shadow: none; background: #EEEEEE; border: 1px solid #000; border-bottom: none; border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -webkid-border-radius: 5px 5px 0 0; } /*Стиль внешних кнопок меню (без выпадающих блоков) */ .navtab a.nodrop { display:block; position:relative; z-index: 9999; text-decoration: none; font: normal bold 120% tahoma; color: #EEEEEE; text-shadow: 1px 1px 1px #000; padding: 5px; } .navtab:hover a.nodrop { background: #EEEEEE; color:#161616; text-shadow: none; border: 1px solid #000; border-radius: 5px; -moz-border-radius: 5px; -webkid-border-radius: 5px; } /*---------- Стиль выпадающих блоков ------------*/ .drop_columns2, .drop_columns4, .drop_columns3, .drop_columns1, .drop_columnleft { display:none; padding: 10px; text-align: left; } .navtab:hover .drop_columns2, .navtab:hover .drop_columns4, .navtab:hover .drop_columns3, .navtab:hover .drop_columns1, .navtab:hover .drop_columnleft { display:block; position: absolute; z-index: 9998; top: 38px; } /* Размеры, положение выпадающих блоков и рамка */ .drop_columns1 { width: 170px; left: 0px; } .drop_columns2 { width: 320px; left: 0px; } .drop_columns3 { width: 500px; left: 0px; } .drop_columns4 { width: 650px; left: 0px; } .drop_columnleft { width: 300px; right: 0px; } .drop_columns1, .drop_columns3, .drop_columns2, .drop_columns4, .drop_columnleft { border-radius: 5px; -moz-border-radius: 5px; -webkid-border-radius: 5px; } /*--------- Стили контента выпадающих блоков ------------*/ .navtab p, .navtab div, .navtab span.h_2, .navtab span.h_3 { font-size: 14px; font-family: Arial, Helvetica, Tahoma, sans-serif; text-align:left; margin-bottom:10px; } .navtab span.h_2, .navtab span.h_3 { display: block; border-bottom:2px solid #888888; margin-top:7px; } .navtab span.h_2 { font-size: 24px; font-weight: 400; margin-bottom:12px; padding-bottom:7px; } .navtab span.h_3 { font-size: 16px; font-weight: 600; margin-bottom:10px; padding-bottom:5px; } .navtab .dark_box { border-radius: 5px; -moz-border-radius: 5px; -webkid-border-radius: 5px; color: #fff; padding: 5px; margin: 5px; } .navtab p.light_box { border-radius: 5px; -moz-border-radius: 5px; -webkid-border-radius: 5px; color: #000; padding: 5px; margin: 5px; } .navtab div a { text-decoration: none; padding: 0; } /*------ Стиль изображений в блоках меню (размер, рамка, тень выравнивание) -------*/ .navtab div img { width:70px; hight: 70px; border: 3px solid #FFFAFA; -moz-box-shadow:0px 0px 5px #000000; -webkit-box-shadow:0px 0px 5px #000000; box-shadow:0px 0px 5px #000000; margin: 5px; } .navtab .img_button { width:32px; hight: 32px; border: none; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; margin: 5px; } /* Расположение картинки справа (обтекание слева) */ .navtab .img_right { float: right; } /* Расположение картинки слева (обтекание справа) */ .navtab .img_left { float: left; } /* --------- Стили для блоков колонок внутри выпадающего блока ---------- */ .navtab .col_1 a, .navtab .col_2 a, .navtab .col_3 a, .col_4 a { display:block; padding: 0px; margin: 5px 0 5px 0; } .navtab .col_1 p a, .navtab .col_2 p a, .navtab .col_3 p a, .navtab .col_4 p a { display: inline; padding: 0px; margin: 5px 0 5px 0; } .navtab .col_1, .navtab .col_2, .navtab .col_3, .navtab .col_4, .navtab .col_full { float: left; position: relative; margin: 0px; margin-right: 10px; display: block; } .navtab .col_1 {width:150px;} .navtab .col_2 {width:300px;} .navtab .col_3 {width:400px;} .navtab .col_4 {width:500px;} .navtab .col_full {width:100%;} /* Стили цвета для меню, блоков и ссылок */ .navmenu { background: #d24900; background: -moz-linear-gradient(top, #ff6717, #c14300); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff6717), to(#c14300)); background: -o-linear-gradient(top, #ff6717, #c14300); border: 1px solid #CD6600; } .navtab:hover .drop_columns2, .navtab:hover .drop_columns4, .navtab:hover .drop_columns3, .navtab:hover .drop_columns1, .navtab:hover .drop_columnleft { background: #EEEEEE; background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); background: -o-linear-gradient(top, #EEEEEE, #BBBBBB); border: 1px solid #000; } .navtab .dark_box { background: #363636; border: 1px solid #000; } .navtab p.light_box { background: #FFFFF0; border: 1px solid #fff; } .navtab div a { color: #FF4500; } .navtab div a:hover { color: #FF8C69; } .navtab div a:visited { color: #F4A460; } .navtab .btnlink a { background: #E8E8E8; font: normal bold 100%; border: 1px solid #fff; border-radius: 5px; -moz-border-radius: 5px; -webkid-border-radius: 5px; padding: 5px; margin: 5px 3px 7px 0; } .navtab .btnlink a:hover { background: #F8F8FF; border: 1px solid #FFF5EE; } </style> /* Пишите закрывающий тег */ /* Тут, ниже закрывающего тега <div class="navmenu">  <div class="navtab"><a class="linktab" href="#">Меню 1 </a>  <div class="drop_columns2"><span class="h_2">Основной заголовок</span>  <p class="light_box"><img class="img_right" src="http://s019.radikal.ru/i602/1205/65/587dac5af9a6.jpg">Какой-то текст на светлом фоне, для тестирования выпадающего мега меню, сделанного исключительно на слоях - "DIV" <a href="#" title="Я говорю - ссылка">строчная ссылка куда-то...</a></p> </div>  </div>  <div class="navtab"><a class="linktab" href="#">Меню 2 </a>  <div class="drop_columns4"><span class="h_2">Основной заголовок</span>  <div class="col_2">  <p class="dark_box">Какой-то текст на темном фоне, для тестирования выпадающего мега меню, сделанного исключительно на слоях - "DIV" <a href="#">строчная ссылка</a></p></div>  <div class="col_2">  <p><iframe src="http://www.youtube.com/embed/rA4s3wN_vK8" allowfullscreen="" frameborder="0" height="192" width="320"></iframe><a href="#">строчная ссылка</a></p></div> <div class="col_full"><span class="h_2">Основной заголовок</span> <p>Тут можно описать направление подразделов или краткое описание</p> <div class="col_1"><span class="h_3">Подзаголовок</span> <p>Здесь также можно написать омисание разла.</p> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a></div> <div class="col_1"><span class="h_3">Подзаголовок</span> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a></div> <div class="col_1"><span class="h_3">Подзаголовок</span> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a></div> <div class="col_1"><span class="h_3">Подзаголовок</span> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a></div> </div> </div> </div> <div class="navtab"><a class="linktab" href="#">Меню 3 </a> <div class="drop_columns3">  <div class="col_full"><span class="h_2">Основной заголовок</span> <p>Описание раздела или какая-нибудь информация или что-то другое...</p> <div class="col_1"><span class="h_3">Подзаголовок</span> <div class="btnlink"> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a></div> </div> <div class="col_1"><span class="h_3">Подзаголовок</span> <div class="btnlink"> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a></div> </div> <div class="col_1"><span class="h_3">Подзаголовок</span> <div class="btnlink"> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a></div> </div> </div> </div> </div> <div class="navtab"><a class="linktab" href="#">Меню 4 </a> <div class="drop_columns1"> <div class="col_1"><span class="h_3">Подзаголовок</span> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a></div> </div> </div> <div class="navtab"><a class="nodrop" href="#">Кнопка</a> </div> <div class="navtab"><a class="linktab" href="#">Меню 5 </a> <div class="drop_columnleft"> <div class="col_full"><span class="h_2">Основной заголовок</span> Обычный текст, можно также набирать и не заключая в дополнительные теги, а просто размещать в нужном месте. Также здесь можно разместить ссылки в виде картинок на ваши социальные аккаунты.</div> <div class="col_full"><span class="h_3">Я в социальных сетях</span> <p class="light_box">Присоединяйся ко мне!</p> <a href="#" title="Я ВКонтакте"><img class="img_button" src="http://s019.radikal.ru/i609/1205/54/bcf56b4439ee.png"></a> <a href="#" title="Я на Google+"><img class="img_button" src="http://s019.radikal.ru/i632/1205/b0/410d43fe8b1f.png"></a> <a href="#" title="Я на twitter"><img class="img_button" src="http://s019.radikal.ru/i609/1205/d2/4645bf4a8285.png"></a> <a href="#" title="Я в Facebook"><img class="img_button" src="http://s019.radikal.ru/i625/1205/6e/bf38e34de1b1.png"></a> </div> </div> </div> </div>

Категория: Меню | Добавил: ngeges (22.05.2015)

Просмотров: 357 | Комментарии: 1 | Рейтинг: 0.0/0

Всего комментариев: 1
Порядок вывода комментариев: 0 Спам 1 Santus-Kvantus • 16:06, 08.04.2018 https://vash-tovar.blogspot.ru/