Выпадающее меню как в Вордпрессе, для Блогспот, Blogger


Пост (в основном) для пользователей:
Blogger, Блоггер (Blogspot, Блогспот)

Наступаем Вордпрессу на пятки!
Только что получилась адаптировать для Блогспот, Блоггер замечательное выпадающее меню (свеженькое, еще теплое из HTLM online редактора)!

Я уже рекомендовал убрать NavBar - панель навигации, узкую полоску сверху, но в результате этого остается свободное место, которое с пользой можно использовать (например вставить выпадающее меню)! Посмотреть можно на тестовом блоге: http://blogodel-test.blogspot.de/
источник: http://sozdaiblog.ru/dizayn-bloga/deny-126-kak-sdelaty-ultnoe-gorizontalyno-vpadayushtee-menyu.html


Код установки в: Дизайн - Добавить гаджет - HTML/JavaScript
<style>
.bubblewrap li{
display:inline-block;
zoom:1; /*Trigger haslayout in IE7 and less*/
*display:inline; /*For IE7 and less*/
position:relative;
width: 65px;
height:60px;
}

.bubblewrap li img{
position:absolute;
width: 55px; /*default width of each image.*/
height: 60px; /*default height of each image.*/
left:0;
top:0;
border:0;
}

.bubblewrap .tooltip{ /*CSS for image tooltip (alt attribute of image)*/
position:absolute;
font:bold 12px Arial;
padding:2px;
width:100px;
text-align:center;
background:white;
}
#orbs li{
width: 65px; /*width of image container. Should be wider than contained images (before bubbling) */
height:60px; /*height of image container. Should be taller than contained images (before bubbling) */
}

#orbs li img{
width: 55px; /*width of each image before bubbling*/
height: 60px; /*height of each image*/
}

#squares li{
width: 45px; /*width of image container. Must be wider than contained images (before bubbling) */
height:40px; /*height of image container. Must be taller than contained images (before bubbling) */
}

#squares li img{
width: 31px; /*width of each image before bubbling*/
height: 31px; /*height of each image*/
}
/* уголок не влезай + overflow: hidden; в body*/
.{
margin: 0px;
padding: 0px;

-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}

.forkit {
position: absolute;
right: 0;
top: 0;

width: 200px;
height: 150px;

font-family: 'Lato', sans-serif;
text-decoration: none;
}
.forkit .tag {
display: block;
height: 30px;
width: 200px;

color: #fff;
background: #aa0000;
text-align: center;
font-size: 16px;
font-weight: bold;
line-height: 30px;
box-shadow: 0px 0px 10px rgba( 0, 0, 0, 0.4 );

-webkit-transform-origin: 15px 0px;
  -moz-transform-origin: 15px 0px;
   -ms-transform-origin: 15px 0px;
    -o-transform-origin: 15px 0px;
       transform-origin: 15px 0px;
}
.forkit .tag:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 196px;
height: 26px;
margin: 1px;
border: 1px solid rgba( 255, 255, 255, 0.4 );
}
.forkit .string {
display: block;
height: 1px;
width: 0px;
position: absolute;

background: rgba( 255, 255, 255, 0.7 );
box-shadow: 0px 0px 10px rgba( 0, 0, 0, 0.4 );

-webkit-transform-origin: 0px 0px;
  -moz-transform-origin: 0px 0px;
   -ms-transform-origin: 0px 0px;
    -o-transform-origin: 0px 0px;
       transform-origin: 0px 0px;
}


.forkit-curtain {
position: absolute;
width: 100%;
height: 100%;
top: -100%;
}

/* ----////// Подписка на обновление/////------- */ 
#optin {
    background: #4F4942;
    border: 2px solid #fff;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #eee;   
    font-size: 16px;
    text-align: center;
    padding:5px 10px;
    width: 500px; 
}
    #optin p { margin: 0px; 
font-weight: bold;
margin-bottom: 10px
}
    #optin input {
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        box-shadow: 0 2px 2px #111;
        -moz-box-shadow: 0 2px 2px #111;
        -webkit-box-shadow: 0 2px 2px #111
    }
        #optin input[type="text"] {
            border: 1px solid #111;
            font-size: 15px;
            padding: 8px 10px;
margin-bottom: 10px;
            width: 90%
        }
         
        #optin input[type="submit"] {
            background: #960e17;
            border: 1px solid #111;
            color: #fff;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            padding: 3px 5px;
            text-shadow: -1px -1px #3a060a;
            text-transform: uppercase

        }
            #optin input[type="submit"]:hover { color: #CCCCCC }

/* ----//////меню/////------- */ 
ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 10px;
    list-style: none;
    z-index:999999;
    width:721px;
}
ul#navigation li {
    width: 103px;
    display:inline;
    float:left;    
}
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;
    -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;
    text-decoration:none;
    text-align:center;
    padding-top:80px;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);  
}
ul#navigation li a:hover{
     background-color:#ffffff;
}
ul#navigation li a span{
    font-family: Helvetica;
    letter-spacing:1px;
    font-size: 15px;
font-weight:bold;
    color:#000;
    text-shadow: 0 -1px 1px #fff;      
}
ul#navigation .home a{
    background-image: url("http://sozdaiblog.ru/img/home.png");
}
ul#navigation .about a      {
    background-image: url("http://sozdaiblog.ru/img/wordpress.png");
}
ul#navigation .search a      {
    background-image: url("http://sozdaiblog.ru/img/rss2.png");
}
ul#navigation .podcasts a      {
    background-image: url("http://sozdaiblog.ru/img/twitter1.png");
}
ul#navigation .rssfeed a   {
    background-image: url("http://sozdaiblog.ru/img/youtube.png");
}
ul#navigation .photos a     {
    background-image: url("http://sozdaiblog.ru/img/google_plus.png");
}
ul#navigation .contact a    {
    background-image: url("http://sozdaiblog.ru/img/wikipedia.png");
}</style><script type="text/javascript" src="http://sozdaiblog.ru/demo.js/jQuery.js"></script>
<script type="text/javascript" src="http://sozdaiblog.ru/demo.js/1.js"></script>

<div class="header"></div>
<ul id="navigation">
<li class="home"><a href="Ссылка на страницу"><span>Главная</span></a></li>
<li class="about"><a href="Ссылка на страницу"><span>WordPress</span></a></li>
<li class="search"><a href="Ссылка на страницу"><span>RSS</span></a></li>
<li class="photos"><a href="Ссылка на страницу"><span>Google+</span></a></li>
<li class="rssfeed"><a href="Ссылка на страницу"><span>You Tube</span></a></li>
<li class="podcasts"><a href="Ссылка на страницу"><span>Twitter</span></a></li>
<li class="contact"><a href="Ссылка на страницу"><span>Wikipedia</span></a></li>
</ul>


Все что маркировано красным, можете менять по вашему усмотрению. Если есть вопросы, пожалуйста в комментарии. С удовольствием отвечу!

34 коммент.:

Николай
MagentaWAVE
Justus
Justus
MagentaWAVE
Ольга Ватутина
Justus
Ольга Ватутина
илья фомин
Лидия Васильевна
Dimka
valeriy1106
valeriy1106
Katerina Golysheva
Justus
rammfer aizekh
Justus
Анна Черничная
Justus
Анна Черничная
Tanjah Kram
Justus
Анна Черничная
Alisa Dainius
Justus
Макс
Макс
Justus
Макс
Justus
Виталий шепида
Tata
Justus
Пал Саныч

Отправить комментарий

Дорогие Друзья! К сожалению, временно, по причине здоровья, моя активность по этому блогу ВРЕМЕННО ПРИОСТАНОВЛЕНА! Предположительно до января 2018 г.

Доска почета

Плюсани блог!