• Страница 1 из 1
  • 1
Модератор форума: SmokeRom, Vlad98  
Красивое раздвижное меню
Дата: Вторник, 19.07.2011, 21:49 | Сообщение # 1
Сообщений:175
Клан:
Награды:49
138

Шаг I:
Заливаем папки в корень сайта -> Файлы
Шаг II:
Встав. код в Страницы сайта после </head>:
Code
<script type="text/javascript" src="/js/ddaccordion.js"></script>   
<script type="text/javascript" src="/js/sdmenu.js"></script>

Шаг III:
СSS:
Code
.glossymenu{   
   margin: 5px 0;   
   padding: 0;   
   width: 185px; /*width of menu*/   
   border: 1px solid #5d5d5d;   
   border-bottom-width: 0;   
   }   

   .glossymenu a.menuitem{   
   background: url() #c5c5c5;   
   font: normal 10px "Visitor_Rus", "Visitor_Rus", Visitor_Rus, Visitor_Rus, Visitor_Rus;   
   color: #5d5d5d;   
   display: block;   
   position: relative; /*To help in the anchoring of the ".statusicon" icon image*/   
   width: auto;   
   padding: 4px 0;   
   padding-left: 10px;   
   text-decoration: none;   
   border-top: 0px solid #5d5d5d;   
   border-bottom: 1px solid #5d5d5d;   
   }   

   .glossymenu a.menuitem:visited, .glossymenu .menuitem:active{   
   color: #5d5d5d;   
   }   

   .glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/   
   position: absolute;   
   top: 5px;   
   right: 5px;   
   border: none;   
   }   

   .glossymenu a.menuitem:hover{   
   background-image: url() #c5c5c5;   
   }   

   .glossymenu div.submenu{ /*DIV that contains each sub menu*/   
   background-image: url() #c5c5c5;   
   }   

   .glossymenu div.submenu ul{ /*UL of each sub menu*/   
   list-style-type: none;   
   margin: 0;   
   padding: 0;   
   }   

   .glossymenu div.submenu ul li{   
   border-bottom: 1px solid #5d5d5d;   
   }   

   .glossymenu div.submenu ul li a{   
   display: block;   
   font: normal 10px "Visitor_Rus", "Visitor_Rus", Visitor_Rus, Visitor_Rus, Visitor_Rus;   
   color: #5d5d5d;   
   text-decoration: none;   
   padding: 2px 0;   
   padding-left: 10px;   
   }   

   .glossymenu div.submenu ul li a:hover{   
   background-image: url() #c5c5c5;   
   colorz: #999999;   
   }   

   .glossymenu{margin: 5px 0; padding: 0; width: 180px; /*width of menu*/ border: 1px solid #5d5d5d; border-bottom-width: 0; }   

   .glossymenu a.menuitem{background:url(/images/m3.png) #c5c5c5 ;font: normal 10px "Arial", "Arial", Arial, Arial, Arial;   
   color: #5d5d5d;   
   display: block;   
   position: relative; /*To help in the anchoring of the ".statusicon" icon image*/   
   width: auto;   
   padding: 4px 0;   
   padding-left: 10px;   
   text-decoration: none;   
   border-top: 0px solid #5d5d5d;   
   border-bottom: 1px solid #5d5d5d;   
   }   

   .glossymenu a.menuitem:visited, .glossymenu .menuitem:active{   
   color: #5d5d5d;   
   }   

   .glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/   
   position: absolute;   
   top: 5px;   
   right: 5px;   
   border: none;   
   }   

   .glossymenu a.menuitem:hover{   
   background: url(/images/m2.png) #c5c5c5;   
   text-shadow:0px 1px 0px #FFFFFF;   
   }   

   .glossymenu div.submenu{ /*DIV that contains each sub menu*/   
   background:#d5d5d5;   
   }   

   .glossymenu div.submenu ul{ /*UL of each sub menu*/   
   list-style-type: none;   
   margin: 0;   
   padding: 0;   
   }   

   .glossymenu div.submenu ul li{   
   border-bottom: 1px solid #5d5d5d;   
   }   

   .glossymenu div.submenu ul li a{   
   display: block;   
   font: normal 10px "Arial", "Arial", Arial, Arial, Arial;   
   background:url(/images/m1.png)#c5c5c5;   
   text-decoration: none;   
   padding: 2px 0;   
   padding-left: 15px;   
   }   

   .glossymenu div.submenu ul li a:hover{   
   background:url(/images/m1.png);background-position:0px -20px;   
   text-shadow:0px 1px 0px #ffffff;   
   }

Шаг IV:
В блок:
Code
<div class="glossymenu">   
   <a class="menuitem submenuheader">css-pro.ru</a>   
   <div class="submenu">   
   <ul>   
   <li><A href="/">css-pro.ru</A></li>   
   <li><A href="/">css-pro.ru</A></li>   
   <li><A href="/">css-pro.ru</A></li>   
   <li><A href="/">css-pro.ru</A></li>   
   <li><A href="/">css-pro.ru</A></li>   
   </ul>   
   </div>   
   <a class="menuitem submenuheader">Ваше чета</a>   
   <div class="submenu">   
   <ul>   
   <li><A href="/">css-pro.ru</A></li>   
   <li><A href="/">css-pro.ru</A></li>   
   <li><A href="/">css-pro.ru</A></li>   
   <li><A href="/">css-pro.ru</A></li>   
   <li><A href="/">css-pro.ru</A></li>   
   </ul>   
   </div>   
   <a class="menuitem submenuheader">Ваше чета</a>   
   <div class="submenu">   
   <ul>   
   <li><A href="/">css-pro.ru</A></li>   
   <li><A href="/">css-pro.ru</A></li>   
   <li><A href="/">css-pro.ru</A></li>   
   <li><A href="/">css-pro.ru</A></li>   
   <li><A href="/">css-pro.ru</A></li>   
   </ul>   
   </div>   
   <a class="menuitem submenuheader">Ваше чета</a>   
   <div class="submenu">   
   <ul>   
   <li><A href="/">css-pro.ru</A></li>   
   <li><A href="/">css-pro.ru</A></li>   
   <li><A href="/">css-pro.ru</A></li>   
   <li><A href="/">css-pro.ru</A></li>   
   <li><A href="/">css-pro.ru</A></li>   
   </ul>   
   </div>   
   <a class="menuitem submenuheader">Ваше чета</a>   
   <div class="submenu">   
   <ul>   
   <li><A href="/">css-pro.ru</A></li>   
   <li><A href="/">css-pro.ru</A></li>   
   <li><A href="/">css-pro.ru</A></li>   
   <li><A href="/">css-pro.ru</A></li>   
   <li><A href="/">css-pro.ru</A></li>   
   </ul>   
   </div>

Все...


Дата: Понедельник, 25.07.2011, 13:01 | Сообщение # 2
Сообщений:27
Клан:НA[R]D™
Награды:1
9
Норм меню. Сайдет

Мои Услуги: Создание сайта, Помощь по сайту, Создание графики, Раскрутка сайт, Помощь по серверам Css, Cs 1.6, Создаю спреи с вашим ником. (Все услуги являются платными.) Чтоб заказать УСЛУГУ вам надо добавиться ко мне в скайп: yur4ik_11 И
Дата: Понедельник, 12.08.2013, 21:01 | Сообщение # 3
Сообщений:1
Награды:0
0
архив перезалей )) сыль битая )))
  • Страница 1 из 1
  • 1
Поиск: