fentg.com

ФОРУМЪТ на ФЕНОВЕТЕ на НТГ
Дата и час: Нед Апр 11, 2021 6:37 am

Часовете са според зоната UTC + 2 часа [ DST ]


Правила на форума


Натиснете за да видите правилата



Напиши нова тема Отговори на тема  [ 15 мнения ]  Отиди на страница Предишна  1, 2
Автор Съобщение
 Заглавие: Re: Как сами да си направим web меню...
МнениеПубликувано на: Сря Май 04, 2011 10:09 pm 
Offline
Администратор
Аватар

Регистриран на: Нед Ное 02, 2008 5:30 pm
Мнения: 3550
Еми ОК, Пламене, тук става въпрос за писане "на чисто" от нулата на както ти би искал - документиран скрипт.

Не става въпрос за ползване на библиотеки от типа на jquery или подобни... а по-скоро за създаване на собствена групичка ф-ции, нещо като малка библиотечка, в случая специално за менюто, за да е кратичко... Иначе Dreamweaver и Fireworks генерират автоматично код за меню, но той е няколко страници...

Ето примерна мънинка библиотечка:
Код:
   var timeout         = 250;
   var closetimer      = 0;
   var ddmenu          = 0;
   var pcmenu          = 0;

   function mopen(id)
   {   
      mcancelclosetime();
      mclose();
      ddmenu = document.getElementById(id);
      ddmenu.style.visibility = 'visible';
   }

   function mclose()
   {
      if(ddmenu) ddmenu.style.visibility = 'hidden';
   }

   function mclosetime()
   {
      closetimer = window.setTimeout(mclose, timeout);
   }

   function mcancelclosetime()
   {
      if(closetimer)
      {
         window.clearTimeout(closetimer);
         closetimer = null;
      }
   }
   document.onclick = mclose;


Ето къде е ползвана... Вярно - за съвсем обикновено меню, за което си трябва и CSS...

Но малко по-сложен скрипт, без да е много дълъг, за посочената задача, за да се получават наследени менюта...

Ако си добър на JS - атака!

_________________
Изображение


Върнете се в началото
 Профил  
 
 Заглавие: Re: Как сами да си направим web меню...
МнениеПубликувано на: Чет Май 05, 2011 11:30 pm 
Offline

Регистриран на: Вто Май 03, 2011 10:56 pm
Мнения: 5
Значи нещата сега ги уча ,за това се включвам. Интересно ми е да се включвам в такива идеи :) В момента фокусирам изцяло на библиотеката Jquery и възможностите които предлага тя , които не са малко но не отговарят на условиятя (Всичко от 0) § (създаване на собствена библиотека) мога да дам просто решение с това което знам до сега . Смятам че Jquery като цяло само улеснява нещата , а не ги утежнява , както каза с 10000 реда код .Схващам идеята ти и смятам че е много добре да може човек да си прави библиотеките сам , според нуждите . По принцип редактори като Dreamweaver не използвам и пиша от <хтмл> до </хтмл>


Върнете се в началото
 Профил  
 
 Заглавие: Re: Как сами да си направим web меню...
МнениеПубликувано на: Пет Май 06, 2011 12:22 am 
Offline

Регистриран на: Вто Май 03, 2011 10:56 pm
Мнения: 5
Ето моето решение .... :)
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
   <meta http-equiv="content-type" content="text/html; charset=windows-1251" />
   <meta name="author" content="forgi" />
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>



 
   <title>proba Menu</title>
     <style type="text/css">
@font-face{
    font-family: 'font';
    src: url('font.ttf');
    }    /* tezi redove dobavqt srift po nash izbor , bez da e nujno potrebitelq da go ima i go zarejdat v bowsera */
   
  .kazan{
    height:40px;
    width:670px;
    margin:0 auto;
    -webkit-border-radius: 5px; /* zaoblq uglite */
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: #fff; }/* tova e konteinera koito darji cqloto menu*/
   
  ul.kazan{
       float:left;
       height: 37px;
       width:100%; 
       background: #000;
       margin:0;
       padding:0;
       }
       
  ul.kazan li
     {
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;  /* zaoblq uglite */
      color: #fff;
      float:left;
      width:165px;
      height:27px;
      background: #ccc; 
      list-style:none ;
      padding-left:0px; 
      padding-top:10px;
      position:relative;   /* poziciq relative e vajna v sluchaq zashtoto ni pozvolqva da opredelqme poziciqta na padashtite UL posle*/
      border:1px solid #000;
      }
     
       ul.kazan  li:hover
  {
      background: #3f3e3e;   
  }/* Smqna na fona pri hover na <li>*/

   ul.kazan li a
   {
       font: 16px ;
       font-family:'font';
       color:#fff;
       margin-left: 40px;
       text-decoration: none;
    }
    ul.kazan li a:hover
   {
    color: #ccc;
   } /* Smqna na cveta na teksta na linka*/
 


 
   ul.kazan  li ul.sub
    {
        width: 165px;   
        display:none;   
        position: absolute;
        top: 38px; left: -2px;    
        border-right: 1px solid #d9d9d9;
     }/*tova e 1-viq sub  opredelqme absoliutna poziviq na padashtiq konteiner ,  kato predi tova zadaljitelno sme slojili Position: relative ; na sadurjashtiq konteiner koito se qvqva <.kazan ul li>*/
     
       
        ul.kazan  li ul.sub li
        {   
            position: relative;    /* poziciq relative e vajna v sluchaq zashtoto ni pozvolqva da opredelqme poziciqta na padashtite UL posle*/
           padding: 0;
         } 
         
   ul.kazan li ul.sub  li a
   {
    font: 16px ;
    font-family:'font';
    color:#fff;
     margin-left: 40px;   
    width:165px; height:37px;
    }
   
  ul.kazan li ul.sub  li a:hover
   {
     color:#ccc;
   }/*Promenq cveta na teksta na Linkovete pri hover v padashtoto menu*/
   
  ul.kazan li ul.sub li ul.sub
  {
   position: absolute;
   top: -1px;
   left: 127px;
   } /*tuk opredelqme poziciqta na vtoroto pod menu*/
</style>

</head>
<body>

  <div class="kazan">
       <ul class="kazan">
          <li>
             <a href="#">Начало</a>
                <ul class="sub">
                   <li><a href="#">1</a></li>
                   <li><a href="#">2</a></li>
                      <li>
                       <a href="#">3</a>
                        <ul class="sub">
                           <li><a href="#">1.1</a></li>
                           <li><a href="#">1.2</a></li>
                           <li>
                               <a href="#">1.3</a>
                                  <ul class="sub">
                                     <li><a href="#">2.0</a></li>
                                     <li><a href="#">2.1</a></li>
                                     <li><a href="#">2.2</a></li>
                                     <li><a href="#">2.3</a></li>
                                   </ul>


                          </li>
                           <li><a href="#">1.4</a></li>
                         </ul>
                      </li>
                    <li><a href="#">4</a></li>
                 </ul>

          </li>
          <li><a href="#">Продукти</a></li>
          <li><a href="#">Контакти</a></li>
          <li><a href="#">За нас</a></li>
       </ul>
</div>


 

 
   <script>
 
   $(document).ready(function ()
   {   
      $('.kazan li:has(ul) > a').addClass('more'); //Tursi vsqko LI, v koeto ima UL i LI e roditelski element na A. Ako sa izpylneni usloviqta, dobavq na A class "more". Taka ako v LI imame UL, shte stava qsno, che imame submenu i shte podtikvame user-a da click-a.
      $('a.more').append('<span class="arrow"> ></span>'); //S tozi red dobavqme strelkichki na vsqko A, koeto ima class "more".
      $('.kazan li').hover(function () {
         $(this).find('ul:first').stop(true, true).animate({opacity: 'toggle', height: 'toggle'}, 200).addClass('active_list');
      }, function () {
         $(this).children('ul.active_list').stop(true, true).animate({opacity: 'toggle', height: 'toggle'}, 200).removeClass('active_list');
      });    // Gornite nqkolko reda predstavlqvat effecta na slide up & down. Vajno e da go zadadem za vsqko pyrvo UL. V red 6-ti tyrsim pyrvoto UL, koeto se namira w .MAIN LI i mu puskame animaciq, koqto go slide-va nadolu i mu dobavq class "active_list". V red 8 (koito predstavlqva hover out), tyrsim UL, koeto veche ima class "active_list" i kazvame ako mishoka ne e vyrhu nego da se izpylni animaciqta i da se premahne class-a "active_list". Po tozi nachin ako mrydnem mishkata vstrani menu-to shte se zatvori.
   });

   </script>
</div>
</body>
</html>



Простичко и чисто без да слагам някакав дизайн :) Положил сам коментари за по важните неща надявам се да е четливо и разбираемо ...
ДЕМО : http://forgi.hit.bg/proba10.html


Върнете се в началото
 Профил  
 
 Заглавие: Re: Как сами да си направим web меню...
МнениеПубликувано на: Пет Май 06, 2011 9:38 am 
Offline
Администратор
Аватар

Регистриран на: Нед Ное 02, 2008 5:30 pm
Мнения: 3550
Макар и с jquery, отговаря на условието. Кога ще се видим да почерпя. Днес цял ден съм разхождащ се, айляк, с камера и книги подръка ще си търся място из града... Утре съм почти същият (все пак днес е Георгьовден и може да си "ангаже" ;-)...

_________________
Изображение


Върнете се в началото
 Профил  
 
 Заглавие: Re: Как сами да си направим web меню...
МнениеПубликувано на: Пет Май 06, 2011 1:30 pm 
Offline

Регистриран на: Вто Май 03, 2011 10:56 pm
Мнения: 5
emilang написа:
Макар и с jquery, отговаря на условието. Кога ще се видим да почерпя. Днес цял ден съм разхождащ се, айляк, с камера и книги подръка ще си търся място из града... Утре съм почти същият (все пак днес е Георгьовден и може да си "ангаже" ;-)...


За съжаление всеки ден сам на работа , с изключение на 2та почивни дни в месеца :) А вечерта пиша код Щото не си харесвам работата :):)
Надявам се да пуснеш още такива задачки и проблемчета защото е полезно човек да си поблъска главата :)


Върнете се в началото
 Профил  
 
Покажи мненията от миналия:  Сортирай по  
Напиши нова тема Отговори на тема  [ 15 мнения ]  Отиди на страница Предишна  1, 2

Часовете са според зоната UTC + 2 часа [ DST ]


Кой е на линия

Потребители разглеждащи този форум: 0 регистрирани и 2 госта


Вие не можете да пускате нови теми
Вие не можете да отговаряте на теми
Вие не можете да променяте собственото си мнение
Вие не можете да изтривате собствените си мнения
Вие не можете да прикачвате файл

Иди на:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Превод: Ioan Filipov