მენიუ

როგორ შევქმნათ მენიუ გამომავალი ფანჯრებით უბრალოდ HTML-ისა და CSS- ის დახმარებით

ამ სტატიაში საუბარი გვექნება, როგორ შევქმნათ მენიუ და მენიუდან გამომავალი ჩამონათვალის ფანჯარა სკრიპტების გამოყენების გარეშე, მხოლოდ HTML-ისა და CSS- ის გამოყენებით. ვმუშაობთ ნებისმიერ ბრაუზერში , სულ რაღაც ხუთ წუთში.

ხშირად საიტის აწყობის დროს, საიტის დიზაინი ითხოვს ისეთი ტიპის მთავარი მენიუს დაყენებას, რომელსაც ასევე ექნება სხვა ქვე მენიუები და ისინი გამოჩნდებიან მაშინ, როდესაც მაუსის კურსორის გადაადგილება მოხდება, ამ მენიუსათვის გამოყოფილ ადგილზე. როგორ უნდა გადავწყვიტოთ ეს საკითხი? რა თქმა უნდა JavaScript-ის დახმარებით, და ეს რა თქმა უნდა სწორი გზა იქნება, მაგრამ ასეთი მენიუს გაკეთების, არსებობს გაცილებით იოლ გზა და უარი ვთქვათ როგორც ფრეიმვორკებზე, ასევე  JS-ზე. 

გთავაზობთ მენიუს დემო ვერსია -ს

ახლა კი დავიწყოთ ამგვარი მენიუს გაკეთება.

როგორ გავაკეთოთ მენიუ

პირველ რიგში უნდა შევადგინოთ რაიმე ჩამონათვალი, თანდართული ლინკებით, რომელიც კურსორის დადების დროს გამოჩნდება. ამის ვარიანტები უამრავია. ჩვენ კი განვიხილავთ ერთერთ მათგანს.

ვქმნით მენიუს

პირველად ვქმნით ძირითადი პუნქტების ჩამონათვალს  და ამ პუნქტებს შიგნით, სათითაოდ ვამატებთ თითო-თითო ჩამონათვალს, შიდა ჩამონათვალები გამოჩნდება მხოლოდ მაშინ როდესაც კურსორს მივიტანთ შესაბამის, ძირითად პუნქტზე.

< ul  class = "dropdown" > 
 < li  class = "dropdown-top" > 
 < a  class = "dropdown-top"  href = "/" > ბრიტანეთი </ a > 
 < ul  class = "dropdown-inside" > 
 < li > < a  href = "/" > ლონდონი </ a > </ li > 
 < li > < a  href = "/" > ბირმინგემი </ a > </ li > 
 < li > < a  href = "/" > ლიდსი </ a > </ li > 
 < li > < a  href = "/" > შეფფილდი </ a > </ li > 
 < li > < a  href = "/" > მანჩესტერი </ a > </ li > 
 </ ul > 
 </ li >

 < li  class = "dropdown-top" > 
 < a  class = "dropdown-top"  href = "/" > აშშ </ a > 
 < ul  class = "dropdown-inside" > 
 < li > < a  href = "/" > ნიუ-იორკი </ a > </ li > 
 < li > < a  href = "/" > ლოს-ანჯელესი </ a > </ li > 
 < li > < a  href = "/" > ჩიკაგო </ a > </ li > 
 < li > < a  href = "/" > ხიუსტონი </ a > </ li > 
 < li > < a  href = "/" > ფილადელფია </ a > </ li > 
 < li > < a  href = "/" > ფინიკსი </ a > </ li > 
 < li > < a  href = "/" > სან-ანტონიო </ a > </ li > 
 </ ul > 
 </ li >

 < li  class = "dropdown-top" > 
 < a  class = "dropdown-top"  href = "/" > საფრანგეთი </ a > 
 < ul  class = "dropdown-inside" > 
 < li > < a  href = "/" > პარიზი </ a > </ li > 
 < li > < a  href = "/" > მარსელი </ a > </ li > 
 < li > < a  href = "/" > ლიონი </ a > </ li > 
 < li > < a  href = "/" > ტულუზა </ a > </ li > 
 < li > < a  href = "/" > ნიცა </ a > </ li > 
 < li > < a  href = "/" > ნანტი </ a > </ li > 
 < li > < a  href = "/" > სტრასბურგი </ a > </ li > 
 </ ul > 
 </ li >

 < li  class = "dropdown-top" > 
 < a  class = "dropdown-top"  href = "/" > ესპანეთი </ a > 
 < ul  class = "dropdown-inside" > 
 < li > < a  href = "/" > მადრიდი </ a > </ li > 
 < li > < a  href = "/" > ბარსელონა </ a > </ li > 
 < li > < a  href = "/" > ვალენსია </ a > </ li > 
 < li > < a  href = "/" > სევილია </ a > </ li > 
 </ ul > 
 </ li >

 < li  class = "dropdown-top" > 
 < a  class = "dropdown-top"  href = "/" > იტალია </ a > 
 < ul  class = "dropdown-inside" > 
 < li > < a  href = "/" > რომი </ a > </ li > 
 < li > < a  href = "/" > მილანი </ a > </ li > 
 < li > < a  href = "/" > ნეაპოლი </ a > </ li > 
 < li > < a  href = "/" > ტურინი </ a > </ li > 
 < li > < a  href = "/" > პალერმო </ a > </ li > 
 </ ul > 
 </ li > 
</ ul >

სანამ კურსორი არ დგას მენიუს პუნქტზე, ჩადებული ჩამონათვალები არ ჩანს ეკრანზე და განთავსებულია ეკრანის მიღმა, 10 ათასი პიქსელი ამისათვის სრულიად საკმარისია. დაახლოებით ხუთი წლის შემდეგ ამ პიქსელების გაზრდა 20 ათასამდე იქნება შესაძლებელი. კურსორის ძირითად პუნქტზე დადების შემთხვევაში, ეკრანის გარკვეულ ადგილზე ჩამოიშლება, ამ პუნქტის შესაბამისი, შიდა ჩამონათვალი.

CSS

იმისათვის რომ, ყველაფერმა იმუშაოს, ჩვენ დაგვჭირდება ე.წ."სტილები", აი ისინიც:

ul .dropdown  li  { position : relative ; }
  ul .dropdown ,
      ul .dropdown-inside  {
      list-style-type : none ;
      padding :  0 ;
      }
  ul .dropdown-inside  {
      position : absolute ;
      left : - 9999 px ;
      }
  ul .dropdown  li .dropdown-top  {
      display : inline ;
      float : left ;
      margin :  0  1 px 0  0 ;
      }
  ul .dropdown  li .dropdown-top  a  {
      padding :  3 px 10 px 4 px ;
      display : block ;
      }
  ul .dropdown  a .dropdown-top  { background :  #efefef ; }
  ul .dropdown  a .dropdown-top :hover  { padding :  2 px 10 px 5 px ; }
  ul .dropdown  li .dropdown-top :hover  .dropdown-inside  {
      display : block ;
      left :  0 ;
      }
  ul .dropdown  .dropdown-inside  { background :  #fff ; }
  ul .dropdown  .dropdown-inside  a :hover  { background :  #efefef ; }

როგორს ხედავთ გადაწყვეტილება საკმაოდ მარტივია და სრულიად კროსბრაუზერული.გთავაზობთ ამ მენიუს მზა კოდს რომელიც უბრალოდ უნდა დააკოპიროთ და ჩასვათ თქვენი საიტის ვებ-გვერდის HTML-კოდში

<body>
<div class="wrapper">
<ul class="dropdown">
<li class="dropdown-top">
   <a class="dropdown-top" href="https://www./">ბრიტანეთი</a>
   <ul class="dropdown-inside">
<li><a href="https://www./">ლონდონი</a></li>
<li><a href="https://www./">ბერმინგემი</a></li>
<li><a href="https://www./">ლიდსი</a></li>
<li><a href="https://www./">მანჩესტერი</a></li>
</ul>
</li>
<li class="dropdown-top">
   <a class="dropdown-top" href="https://www./">აშშ</a>
   <ul class="dropdown-inside">
<li><a href="https://www./">ნიუ-იორკი</a></li>
<li><a href="https://www./">ლოს-ანჯელესი</a></li>
<li><a href="https://www./">ჩიკაგო</a></li>
<li><a href="https://www./">ჰიუსტონი</a></li>
<li><a href="https://www./">ფილადელფია</a></li>
<li><a href="https://www./">ფინიკსი</a></li>
<li><a href="https://www./">სან-ანტონიო</a></li>
</ul>
</li>
<li class="dropdown-top">
   <a class="dropdown-top" href="https://www./">საფრანგეთი</a>
   <ul class="dropdown-inside">
<li><a href="https://www./">პარიზი</a></li>
<li><a href="https://www./">მარსელი</a></li>
<li><a href="https://www./">ლიონი</a></li>
<li><a href="https://www./">ტულუზა</a></li>
<li><a href="https://www./">ნიცა</a></li>
<li><a href="https://www./">ნანტი</a></li>
<li><a href="https://www./">სტრასბულგი</a></li>
</ul>
</li>
<li class="dropdown-top">
   <a class="dropdown-top" href="https://www./">ესპანეთი</a>
   <ul class="dropdown-inside">
<li><a href="https://www./">მადრიდი</a></li>
<li><a href="https://www./">ბარსელონა</a></li>
<li><a href="https://www./">ვალენსია</a></li>
<li><a href="https://www./">სევილია</a></li>
</ul>
</li>
<li class="dropdown-top">
   <a class="dropdown-top" href="https://www./">იტალია</a>
   <ul class="dropdown-inside">
<li><a href="https://www./">რომი</a></li>
<li><a href="https://www./">მილანი</a></li>
<li><a href="https://www./">ნეაპოლი</a></li>
<li><a href="https://www./">ტურინი</a></li>
<li><a href="https://www./">პალერმო</a></li>
</ul>
</li>
</ul>
</div>
</body>

<style>

ul.dropdown li { position: relative; }
 ul.dropdown,
 ul.dropdown-inside {
 list-style-type: none;
 padding: 10;
 }
 ul.dropdown-inside {
 position: absolute;
 left: -9999px;
 }
 ul.dropdown li.dropdown-top {
 display: inline;
 float: left;
 margin: 0 3px 0 0;
 }
 ul.dropdown li.dropdown-top a {
 padding: 5px 10px 4px;
 }
 ul.dropdown a.dropdown-top { background: #efefef; }
 ul.dropdown a.dropdown-top:hover { padding: 2px 10px 15px; }
 ul.dropdown li.dropdown-top:hover .dropdown-inside {
  left: 0; top: 10;
 }
 ul.dropdown .dropdown-inside { background: #f2f2f2; }
 ul.dropdown .dropdown-inside a:hover { background: #efefef; }


</style>

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

გისურვებთ წარმატებებს!