понедельник, 13 декабря 2010 г.

Простое горизонтальное меню для Blogger


Вставляется как виджет вот этот код:


<style type="text/css">
.menu{
 border:none;
 border:0px;
 margin:0px;
 padding:0px;
 font-family:verdana,geneva,arial,helvetica,sans-serif;
 font-size:14px;
 font-weight:bold;
 color:8e8e8e;
 }
.menu ul{
 background:url(http://www.cssmenumaker.com/menus/062/images/menu-bg.gif) top left repeat-x;
 height:43px;
 list-style:none;
 margin:0;
 padding:0;
 }
 .menu li{
  float:left;
  padding:0px 8px 0px 8px;
  }
 .menu li a{
  color:#666666;
  display:block;
  font-weight:bold;
  line-height:43px;
  padding:0px 25px;
  text-align:center;
  text-decoration:none;
  }
  .menu li a:hover{
   color:#000000;
   text-decoration:none;
   }
 .menu li ul{
  background:#e0e0e0;
  border-left:2px solid #f68618;
  border-right:2px solid #f68618;
  border-bottom:2px solid #f68618;
  display:none;
  height:auto;
  filter:alpha(opacity=95);
  opacity:0.95;
  position:absolute;
  width:225px;
  z-index:200;
  /*top:1em;
  /*left:0;*/
  }
 .menu li:hover ul{
  display:block;
  }
 .menu li li {
  display:block;
  float:none;
  padding:0px;
  width:225px;
  }
 .menu li ul a{
  display:block;
  font-size:12px;
  font-style:normal;
  padding:0px 10px 0px 15px;
  text-align:left;
  }
  .menu li ul a:hover{
   background:#949494;
   color:#000000;
   opacity:1.0;
   filter:alpha(opacity=100);
   }
 .menu p{
  clear:left;
  } 
 .menu #current{
  background:url(http://www.cssmenumaker.com/menus/062/images/current-bg.gif) top left repeat-x;
  color:#ffffff;
  }
  
</style>
<div class="menu"> 
  <ul> 
   <li><a href="http://nuzhdiki.blogspot.com" >Home</a></li> 
   <li><a href="#" id="current">Blog Menu</a> 
    <ul> 
     <li><a href="http://nuzhdiki.blogspot.com/search/label/blogger">Blogger</a></li> 
     <li><a href="http://nuzhdiki.blogspot.com/search/label/CSS">CSS</a></li> 
     <li><a href="http://nuzhdiki.blogspot.com/search/label/hack">Hack</a></li> 
     <li><a href="http://nuzhdiki.blogspot.com/search/label/HTML">HTML</a></li>
     <li><a href="http://nuzhdiki.blogspot.com/search/label/menu">Menu</a></li>
     <li><a href="http://nuzhdiki.blogspot.com/search/label/widget">Widget</a></li>
     <li><a href="http://nuzhdiki.blogspot.com/search/label/photoshop">Photoshop</a></li> 
      </ul> 
    </li> 
   <li><a href="http://blogger.com/home">Login</a> 
                <ul> 
                <li><a href="http://blogger.com/logout.g">LogOut</a></li> 
                
                </ul> 
          </li> 
    
  </ul> 
 </div>


Ссылки только на свои замените!

7 комментариев:

  1. куда вставить сам код? :( я совсем чайник.

    ОтветитьУдалить
  2. Над или под заголовком виджетом. В панели блоггера вкладка "Дизайн".

    ОтветитьУдалить
  3. Код вставляйте в гаджет. Для этого выбираем сверху настройки, заходим в дизайн и добавляем гаджет Html/JavaScript в него и вставляем код!

    ОтветитьУдалить
  4. Все бы хорошо, но как изменить размер шрифта и сделать под меню????

    ОтветитьУдалить
  5. подскажите.
    все установил, но:
    выпадающее меню открывается не полностью - ограничитель начало страницы. Как сделать что бы выпадало сверху страницы

    ОтветитьУдалить
  6. Этот комментарий был удален автором.

    ОтветитьУдалить