Main Page Main Page Feedback Main Page Ads Page
Geodles.Com-Georgian Dle Support
CSS მენიუ, ჰორიზონტალური მენიუ სიესესის გამოყენებით

იშვიათია საიტებზე ჰორიზონტალური მენიუს გამოყენება, რომლებიც ჩამოიშლებიან კურსორის მიტანისას,მაგრამ ისინი ძალიან ლამაზები და ფუნქციონალურები არიან. მინდა აგიხსნათ და გასწავლოთ როგორ შევქმნათ ჰორიზონტალური ჩამოსაშლელი მენიუ მხოლოდ css კოდის გამოყენებით .თითქმის ყველა ვინს მზგავს რამეს ქმნის იყენებს javascript, ჩამოშლის ეფექტის მისაღებად.მე კი გასწავლით როგორ გავაკეთოთ ეს ძალიან მარტივად მხოლოდ CSS ის გამოყენებით. განვიხილოთ ორი ვარიანტი ჰორიზონტალური CSS მენიუსთვის.

ვარიანტი 1 - ჩამოსაშლელი ჰორიზონტალური მენიუ.

უფრო გასაგები რომ იყოს ნახეთ ქვემოთ მოცემული სურათი, ალბად ყველას შეგვხედრია ასეთი მენიუ და ვიცნობთ მის სტრუქტურასაც.


CSS მენიუ, ჰორიზონტალური მენიუ სიესესის გამოყენებით



უფრო გასაგები რომ იყოს,მენიუს სტრუქტურა ვნახოთ HTML-ზე . ამით გავიგეთ თუ რითია მიღწეული მენიუს ჰორიზონტალური განლაგება.

css მენიუს სტრუქტურა:


CSS მენიუ, ჰორიზონტალური მენიუ სიესესის გამოყენებით




შვილობილი ელემენტების დამალვას და ჩვენებას მენიუ ანხორციელებს CSS: ul > li:hover ul. შაშვალებით ანუ საკმაოდ იოლად. ამ გადამრთველის მეშვეობით შესაძლებელია განვსაზღვროთ ყველა შვილობილი(ქვე) მენიუს მოქმედება. ჩვეულებრივი ჰორიზონტალური მენიუს შესაქმნელად, იმავე display:block -ს ჩვენ უმატებთ სხვა სტილებს, ისეთებს როგორიცაა ფონის ფერი და ასე შემდეგ. ერთადერთი განსხვავება ჩვეულებრივ მენიუსა და ჩამოსაშლელ მენიუს შორის არის ის , რომ ჩვენ ვსვავთ სტილს ჩასმული UL - სთვის. უნდა ჩავსვათ დამოკიდებული LI ელემენტი, რომელიც მიმართულია (UL > LI: hover).

მოდით გადავხედოთ CSS კოდს:


#header { height:120px; position:relative;
background: transparent url(header_bkg.png) repeat-x scroll top center;}
#nav { margin:0px; padding:0px; position:absolute; top: 70px; display:block;}
#nav > li { list-style-type:none; float:left; display:block; margin:0px 10px;
position:relative; padding:10px; width:100px;}
#nav > li:hover ul { display:block; }
#nav > li:hover { background-color:#808080; -moz-border-radius:10px; -webkit-border-radius:10px; }
#nav li ul { margin:0px; padding:0px; display:none;}
#nav li ul li { list-style-type:none; margin:10px 0 0 0;}
#nav li ul li a { display:block; padding:5px 10px; color:#A2E200; text-decoration:none;}
#nav li ul li:hover a { background-color:#606060; -moz-border-radius:5px; -webkit-border-radius:5px;}
#nav li span { cursor:pointer; margin:0px 10px; font-weight:bold; }



აი ამგვარად შეგვიძლია შევქმნათ მენიუ მხოლოდ css ის გამოყენებით. დღემდე ვერ ვხვდები რაში სჭირდებათ javascript ის დამატება და ამით დამზიმება საიტის.


ვარიანტი 2 - ჰორიზონტალური მენიუ + გაფართოება IE6 თვის


უნდა ვიცოდეთ რომ პირველი ვარიანტი არ არის გათვლილი IE6-სთვის, ანუ იქ არ იმუსავებს. გამოსავალი კი მენიუს ტავსებადობაა IE6-თან, ამისთვის კი დაგვჭირდება ჯს კოდის ერთი ფრაგმენტი.
გადავიდეთ საქმეზე და შევქმნათ ეს მენიუ, ქვევით მოყვანილია სურათი მენიუსი რომელსაც ჩვენ შევქმნით:


CSS მენიუ, ჰორიზონტალური მენიუ სიესესის გამოყენებით



კონსტრუქცია ზუსტად იგივეა რაც პირველ ვარიანტში ამიტომ გადავიდეთ ახსნის გარეშე პირდაპირ კოდზე:


<ul id="menu">
        <li><a href="#">პუნქტი №1</a></li>
        <li>
                <a href="#">პუნქტი №2</a>
                <ul>
                        <li><a href="#">ქვეპუნქტი №1</a></li>
                        <li><a href="#">ქვეპუნქტი №2</a></li>
                        <li><a href="#">ქვეპუნქტი №3</a></li>
                </ul>
        </li>
        <li>
                <a href="#">პუნქტი№3</a>
                <ul>
                        <li><a href="#">ქვეპუნქტი №1</a></li>
                        <li><a href="#">ქვეპუნქტი№2</a></li>
                        <li><a href="#">ქვეპუნქტი №3</a></li>
                        <li><a href="#">ქვეპუნქტი №4</a></li>
                        <li><a href="#">ქვეპუნქტი №5</a></li>
                </ul>
        </li>
        <li>
                <a href="#">პუნქტი №4</a>
                <ul>
                        <li><a href="#">ქვეპუნქტი №1</a></li>
                </ul>
        </li>
        <li>
                <a href="#">პუნქტი №5</a>
                <ul>
                        <li><a href="#">ქვეპუნქტი №1</a></li>
                        <li><a href="#">ქვეპუნქტი №2</a></li>
                        <li><a href="#">ქვეპუნქტი №3</a></li>
                        <li><a href="#">ქვეპუნქტი №4</a></li>
                        <li><a href="#">ქვეპუნქტი №5</a></li>
                </ul>
        </li>
</ul>



CSS:

#menu {
        padding: 0;
        margin: 0;
        font-size: 100%;
        font-family: Georgia;
        }
#menu li {
        list-style: none;
        float: left;
        height: 33px;
        padding: 0;
        margin: 0;
        width: 150px;
        text-align: center;
        background: #171717;
        position: relative;
        padding-top: 12px;
        }
#menu li ul {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 150px;
        display: none;
        position: absolute;
        left: 0;
        top: 45px;
        }
#menu li ul li {
        float: none;
        height: 33px;
        margin: 0;
        width: 150px;
        text-align: center;
        background: #7F7F7F;
        }
#menu li a {
        display: block;
        width: 150px;
        height: 33px;
        color: #fff;
        text-decoration: none;
        }
#menu li:hover ul, #menu li.jshover ul {
        display: block;
        }
#menu li:hover, #menu li.jshover {
        background: #424242;
        }


JS – გადაწყვეტილება IE6-ში სწორედ ასახვისთვის


<script>
        jsHover = function() {
        var hEls = document.getElementById("menu").getElementsByTagName("li");
        for (var i=0, len=hEls.length; i<len; i++) {
        hEls[i].onmouseover=function() { this.className+=" jshover"; }
        hEls[i].onmouseout=function() { this.className=this.className.replace(" jshover", ""); }
        }
        }
        if (window.attachEvent && navigator.userAgent.indexOf("Opera")==-1) window.attachEvent("onload", jsHover);
</script>



სულ ეს იყო იმედია ამიერიდან ყველა შეძლებთ საკუთარი სურვილისამებრ შექმნათ მენიუ. თუ ვინმეს გაქვთ კიდე ვარიანტები იგივეს გასაკეთებლად მოგვაწოდეთ თქვენც

+10
ავტორი: admin ნანახია: 4271 | კომენტარი: 11 | Tutorials | 12-10-2011, 15:07
11By: gio555 Moderators
 
სტილ.ცსსში უნდა ჩასვა ან შენი დიზაინის ცსსში შეიძლება სხვა სახელით იყოს.
სკაიპში და პმში არავის ვეხმარებით და ტყუილად ნუ მწერთ,ყველა მსგავსი შინაარსის პმ დარჩება უპასუხოდ. კითხვები ფორუმზე.
 
 
  16 დეკემბერი 2011 12:09    
 
10By: abasha მოსწავლე
 
ვაა ვერ გავაკეთე ცსს სად ჩავსვა კარგად ვერ ამიხსნი?
 
 
  16 დეკემბერი 2011 02:13    
 
9By: mecniera მოსწავლე
 
admin,
ვერტიკალურისაც დაამატე რა
 
 
  13 ოქტომბერი 2011 21:01    
 
8By: mecniera მოსწავლე
 
admin,
ეს სტატია საიდან გადმოთარგმნე? თუ შენი შექმნილია.
 
 
  12 ოქტომბერი 2011 23:51    
 
7By: admin Master
 
Mr.Black And White,
მეორე ვარიანტი კი
carantin.ru |search info|rsszona |funny images|

I ♥ GEODLES.COM
სკაიპი:geodles.com
 
 
  12 ოქტომბერი 2011 19:17    
 
6By: osuji მოსწავლე
 
მარტალი ხარ ჯს არაფერში არაა საჭირო :) პირადად მეც ამას ვიყენებ დინამიკდრაივიდან ვისწავლე :)
 
 
  12 ოქტომბერი 2011 18:57    
 
5By: Mr.Black And White Elite Members
 
კაი რაღაცაა

და ყველა ბრაუზერზე თავსებადია???
 
 
  12 ოქტომბერი 2011 17:50    
 
4By: wilo Elite Members
 
admin,
უფს გამომრჩა smile-35
 
 
  12 ოქტომბერი 2011 15:55    
 
3By: admin Master
 
wilo,
სიახლეს დაპლიუსება არ უნდა თუ მარტო +1 ის სმაილი ეყოფა?
carantin.ru |search info|rsszona |funny images|

I ♥ GEODLES.COM
სკაიპი:geodles.com
 
 
  12 ოქტომბერი 2011 15:41    
 
2By: wilo Elite Members
 
admin,
აუ მაგარია საღოლ 14
ეს მაინტერესებდა რახანია!
 
 
  12 ოქტომბერი 2011 15:39    
 
ინფორმაცია
ჯგუფ სტუმარი-ის წევრებს არ აქვთ კომენტარის დატოვების უფლება.






რა სისტემაზე მუშაობთ

დამწყები ვარ
უქოზზე
დლეზე
ჯუმლაზე
ვორდპრესზე
რამოდენიმეზე ერთდროულად



topnews

© 2009-2012 Powered By Geodles.Com