. მრგვალი ლამაზი მენიუ საიტისათვის - მენიუ საიტისთვის - სკრიპტების არქივი - შეტყობინებების დაფა - საარქივო საიტი
CodePen - CSS Swinging Panel Menu
შაბათი, 28.06.2025, 13:57
მთავარირეგისტრაციაშესვლა მოგესალმები სტუმარი | RSS

საიტის ინფო


საიტის საათი
00:00:00

სექციის კატეგორიები
კალენდრები [28] საათები საიტისათვის [38]
მორბენალი სტრიქონი [27] საახალწლო სკრიპტები [25]
მენიუ საიტისთვის [22] ეფექტები კურსორზე [7]
მუსიკალური სკრიპტები [11] გვერდის დაბლოკვა [3]
კალკულატორი საიტისათვის [8] მომხმარებლები საიტზე [1]
ამინდის ინფორმერი [2] რამდენჯერ ხართ საიტზე [1]
ფაილის გადმოწერის ტაიმერი [1] სტატისტიკა საიტისათვის [2]
საიტის ნუმეროლოგია [3] ტაიმერი და უკან თვლა ციფრების [3]
ამომავალი ფანჯრები საიტისათვის [4] ზევით ასვლის სკრიპტები [5]
საიტის რობოტი გთავაზობთ [1] რეიტინგი საიტისათვის [6]
გამოკითხვა საიტისათვის [1] პრელოადერები საიტისათვის [2]
გადამისამართების ეფექტი საიტზე [1] კომპიუტერიდან სურათის ან სხვა მასალის ამოღება [1]
სლაიდშოუ საიტისათვის [1] ტექსტის კოპირების ფორმა [11]

მინი-ჩეთი

ჩვენი გამოკითხვა
მოგეწონათ საიტი?
სულ პასუხი: 8

სტატისტიკა

ონლაინშია სულ: 1
სტუმრებიდან: 1
მომხმარებლებიდან: 0
სტუმრები
[ მთლიანი სია ]
მომხმარებლები
სტუმრები


მრგვალი ლამაზი მენიუ საიტისათვის
12.01.2019, 07:55

აუცილებელია კოდი 1 ის რედაქტირება საიტის მისამართებია საჭირო და საიტის გვერდების დასახელებები

დაყენების ინსტრუქცია: ქვემოთ მოცემული სკრიპტი ჩავსვათ ინფორმერში სადაც გვსურს მენიუს გამოჩენა: მენიუ ტესტირებულია და 100%-ით მუშაა

Code
 <div id="menuContainer">
 <ul id="menu">
 <li id="home" class="first"><a href="საიტის მიამართი"><b>Home</b></a></li>
 <li id="single"><a href="საიტის მიამართი"><b>Single Level</b></a></li>
 <li id="dropdown"><a href="საიტის მისამართი"><b>Dropdown</b></a></li>
 <li id="dropline"><a href="საიტის მისამართი"><b>Dropline</b></a></li>
 <li id="flyout"><a href="საიტის მისამართი"><b>Flyout</b></a></li>
 <li id="support"><a href="საიტის მისამართი"><b>Support</b></a></li>
 <li id="contact" class="last"><a href="საიტის მისამართი"><b>Contact</b></a></li>
 </ul>
 </div>

ნაბიჯი-2 სკრიპტი ჩავსვათ CSS-შიგთავსში
#menuContainer {float:left; left:250px; width:176px; height:176px; position:relative;}

#menu {padding:0; margin:0; width:176px; height:176px; list-style:none; background:url(http://wallaby.ucoz.ru/menu_templates/menu1/grid.png);}
* html #menu {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://wallaby.ucoz.ru/menu_templates/menu1/single_twentythree/grid.png', sizingMethod='scale');
}

#menu li a {display:block; width:42px; height:42px; background:url(http://wallaby.ucoz.ru/menu_templates/menu1/trans.gif); position:absolute; left:0; top:0; color:#000; font-family:arial, sans-serif; font-size:11px; text-decoration:none;}
#menu li a b {display:block; width:80px; height:80px; position:absolute; left:-9999px; text-align:center;}

#menu li#home a {left:67px; top:0;}
#menu li#single a {left:120px; top:28px;}
#menu li#dropdown a {left:134px; top:86px;}
#menu li#dropline a {left:96px; top:131px;}
#menu li#flyout a {left:38px; top:131px;}
#menu li#support a {left:0; top:85px;}
#menu li#contact a {left:13px; top:28px;}

#menu li a:hover {white-space:nowrap;}

#menu li#home a:hover b {height:50px; left:-19px; top:50px; background:url(http://wallaby.ucoz.ru/menu_templates/menu1/chome.png); padding-top:30px;}
#menu li#single a:hover b {height:50px; left:-72px; top:22px; background:url(http://wallaby.ucoz.ru/menu_templates/menu1/csingle.png); padding-top:30px;}
#menu li#dropdown a:hover b {height:50px; left:-86px; top:-36px; background:url(http://wallaby.ucoz.ru/menu_templates/menu1/cdropdown.png); padding-top:30px;}
#menu li#dropline a:hover b {height:50px; left:-48px; top:-81px; background:url(http://wallaby.ucoz.ru/menu_templates/menu1/cdropline.png); padding-top:30px;}
#menu li#flyout a:hover b {height:50px; left:10px; top:-81px; background:url(http://wallaby.ucoz.ru/menu_templates/menu1/cflyout.png); padding-top:30px;}
#menu li#support a:hover b {height:50px; left:48px; top:-35px; background:url(http://wallaby.ucoz.ru/menu_templates/menu1/csupport.png); padding-top:30px;}
#menu li#contact a:hover b {height:50px; left:35px; top:22px; background:url(http://wallaby.ucoz.ru/menu_templates/menu1/ccontact.png); padding-top:30px;}

* html #menu li#home a:hover b {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://wallaby.ucoz.ru/menu_templates/menu1/single_twentythree/chome.png', sizingMethod='scale');}
* html #menu li#single a:hover b {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://wallaby.ucoz.ru/menu_templates/menu1/single_twentythree/csingle.png', sizingMethod='scale');}
* html #menu li#dropdown a:hover b {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://wallaby.ucoz.ru/menu_templates/menu1/single_twentythree/cdropdown.png', sizingMethod='scale');}
* html #menu li#dropline a:hover b {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://wallaby.ucoz.ru/menu_templates/menu1/single_twentythree/cdropline.png', sizingMethod='scale');}
* html #menu li#flyout a:hover b {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://wallaby.ucoz.ru/menu_templates/menu1/single_twentythree/cflyout.png', sizingMethod='scale');}
* html #menu li#support a:hover b {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://wallaby.ucoz.ru/menu_templates/menu1/single_twentythree/csupport.png', sizingMethod='scale');}
* html #menu li#contact a:hover b {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://wallaby.ucoz.ru/menu_templates/menu1/single_twentythree/ccontact.png', sizingMethod='scale');}
დაამატა: gela |
ნანახია: 305 | რეიტინგი: 0.0/0
სულ კომენტარები: 0
სახელი *:
Email *:
კოდი *:
შესვლის ფორმა

ძებნა

კალენდარი
ორსაოთხუპაშაკვ

შემოსვლების სტატისტიკა


კალკულატორი
Калькулятор




ამინდი


Copyright MyCorp © 2025 Make a free website with uCoz