Выпадающее меню для Блогспот
Вставляется очень просто в гаджет. Пример здесь<style>http://uwblogger.blogspot.com/ Взято отсюда
.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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRFdv7JnGboGcnQv_1fWNyyuw4HsH9F1bf5I0Sd5wjhCOPbTfvsNcwYLmNYBJQyOhR7oaZG2DOUkH0ig9tlIZGsyBmdPQnGVLW2MEK9O3N_TlhuTbeMJuqntFgbYfuloAim2Yx2EcaqiUB/s320/home.png");
}
ul#navigation .search a {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJaYCMT1of1a71upvTZgH_c202uIeArlkN-BUwhyphenhyphenGPh_Rs2wfLJSTzewr4psQTs3U1mXk1zbwuyNdvy2fnHZ3Lo8Og7mVGFzhyphenhyphenopKlxg1tO7zWwzOuRn4M416HOZkKpCNsSaduP-K-CU86/s320/rss2.png");
}
ul#navigation .podcasts a {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUtsBXdbUZ4d-kc1rU_WBMuI99fvaiMn3xcxwlex64VGvOOQVVXcsEPryF1AQ4yJQNGB5de3nmfyfSYK8Q_CR6dltXUMXOTUuaZEEHbDE3aG26HuaY5PUGjJqJjqToBzVwQy_oVm7px89s/s320/twitter1.png");
}
ul#navigation .rssfeed a {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMf4cN50ci4pKTW8bBrkoobZFRBM7SUrC_IytkVslcpIwm26Dt6TGgJR2IDM3Nu4Tho11kZwpR3sucScqsxkwCls6BDzCwiPm6gVYttqy5W-jLYyLLZtfiect5_rQ9E_r5SLvUxHrHMBCO/s320/youtube.png");
}
ul#navigation .photos a {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbkQL92Z2ZZQ5ao5CZb2md6o92e8lFX_jL9L9I9C-Va9WByEXV1Eoq4xfFpbfpdX8eNLLaFP88VCzBet2S6_yese556RqSR0RXlprcg45dd5jSdCtfeZZh38c0aU8LlZi50iHozeHMKDdt/s320/google_plus.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="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>
</ul>
Читать далее продолжение поста Выпадающее меню для blogger
