fentg.com

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

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


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


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



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

Регистриран на: Нед Ное 02, 2008 5:30 pm
Мнения: 3550
Днес на курса по дизайн вече навлязохме на сТредна дълбочина в такива неща като: HTML, CSS, JavaScript+DOM...
Решихме да сглобим нещо като нашенско менюнце, да имаме контрол в/у нещата (позиции, цветове...)

Ще си кажете, че Dreamweaver едва ли не с няколко клика ги прави нещата, както и в нета има 100-тици безплатни неща...

Да ама - Dreamweaver-а след няколко клика ми изкара няколко метра 'js' код с хедър от създателите... Никак не ми се искаше да се задълбочавам... Който иска автоматизация - идеално! Но нашата цел беше сами да си направим нещата, хем да понаучим туй-онуй.

Та постъпково: докарахме го до 2 позиции в хоризонталното меню, с падащи менюта, съответно с 6 и 4 позиции.
За момента с единичен клик пускаме съответното и гасим другото падащо меню, а с двоен клик гасим съответното...
Пак казвам за момента... Следващият път ще видим как да стане с качване и напускане и с лекичко изчакване преди загасване... Хрумна ни една идея - да следим курсора на мишката... За целта направихме едно текстово поле, в което се виждат координатите на мишката в полето на браузъра. С негова помощ може да измислим как да пускаме и гасим падащите менюта, ако не ни хрумне нещо по-лесно...

Пробвайте:
Код:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Меню</title>
<script>
   function shl(l) {
      var layer=document.getElementById(l);
      layer.style.visibility="visible";
   }
   function hdl(l) {
      var layer=document.getElementById(l);
      layer.style.visibility="hidden";
   }
   function mm(e) {
      var x = (document.all) ? event.x : e.pageX;
      var y = (document.all) ? event.y : e.pageY;
      document.f.i.value = 'X='+x+'  Y='+y;
   }
   document.onmousemove=mm;
</script>
<style>
a {text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size:11px;}
   .mmain{position:absolute; top:100px; left:200px;}
   .submenu1{visibility:hidden; width:100px; position:absolute; top:15px; left:0px; float:left; z-index:2;} 
   .mm1{position:absolute; top:0px; left:0px; z-index:1;}
   .sm1{float:left; width:100px;}
   .mm1, .sm1, .sm2, .mm2{background:green; color:white; padding-left:5px; padding-right:5px;}
     .mm1:hover, .sm1:hover, .mm2:hover, .sm2:hover{background:red; color:yellow;}
   .submenu2{visibility:hidden; width:100px; position:absolute; top:15px; left:70px; float:left; z-index:2;}
   .mm2{position:absolute; top:0px; left:70px; z-index:1;}
   .sm2{float:left; width:150px;}
</style>
</head>
<body>
   <form name="f">
      <input type="text" name="i">
   </form>
   <div class="mmain">
      <a href="#" onclick="shl('m1'); hdl('m2');" ondblclick="hdl('m1');" class="mm1">ПРОДУКТИ</a>
   <div class ="submenu1" id="m1">
      <a href="#" class="sm1">Сапуни</a>
      <a href="#" class="sm1">Самобръсначки</a>
      <a href="#" class="sm1">Тоалетни несесери</a>
      <a href="#" class="sm1">Шампоани</a>
      <a href="#" class="sm1">Балсами</a>
      <a href="#" class="sm1">Бои за коса</a>
   </div>
      <a href="#" onclick="shl('m2'); hdl('m1');" ondblclick="hdl('m2');" class="mm2">УСЛУГИ</a>
   <div class="submenu2" id="m2">
      <a href="#" class="sm2">Бръснене</a>
      <a href="#" class="sm2">Кола маска</a>
      <a href="#" class="sm2">Подстригване</a>
      <a href="#" class="sm2">Боядисване на коса</a>
   </div>
   </div>
</body>
</html>
Да ви напомня - клик за пускане, двоен клик за скриване...
Ако някой фен допише, така че да постигнем целта за следващият път... Имам вече идеи, но нека ви видя и вас...
И последно - с учебна цел и за повече нагледност - всичко - CSS-ът и JavaScript-ът са тук. Както се вижда - нищо дълго... За ъпгрейда можем и рамчици да сложим...

Айде, Пипо - в теб ми е надеждата!

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


Върнете се в началото
 Профил  
 
 Заглавие: Re: Как сами да си направим web меню...
МнениеПубликувано на: Нед Ное 15, 2009 12:11 am 
Offline
НЕЧОВЕК
Аватар

Регистриран на: Нед Ное 02, 2008 5:04 pm
Мнения: 146
Местоположение: localhost
Така и не разбрах какво е това качване и напускане ?
Ето го моя вариант с onMouseOver и onMouseOut
Код:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Меню</title>
<script>
   function shl(l) {
      var layer=document.getElementById(l);
      layer.style.visibility="visible";
   }
   function hdl(l) {
      var layer=document.getElementById(l);
      layer.style.visibility="hidden";
   }
   function mm(e) {
      var x = (document.all) ? event.x : e.pageX;
      var y = (document.all) ? event.y : e.pageY;
      document.f.i.value = 'X='+x+'  Y='+y;
   }
   document.onmousemove=mm;
</script>
<style>
a {text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size:11px;}
   .mmain{position:absolute; top:100px; left:200px;}
   .submenu1{visibility:hidden; width:100px; position:absolute; top:15px; left:0px; float:left; z-index:2;}
   .mm1{position:absolute; top:0px; left:0px; z-index:1;}
   .sm1{float:left; width:100px;}
   .mm1, .sm1, .sm2, .mm2{background:green; color:white; padding-left:5px; padding-right:5px;}
   .mm1:hover, .sm1:hover, .mm2:hover, .sm2:hover{background:red; color:yellow;}
   .submenu2{visibility:hidden; width:100px; position:absolute; top:15px; left:70px; float:left; z-index:2; margin: -1px 0 0 0;}
   .mm2{position:absolute; top:0px; left:70px; z-index:1;}
   .sm2{float:left; width:150px;}
</style>
</head>
<body>
   <form name="f">
      <input type="text" name="i">
   </form>
   <div class="mmain">
      <a href="#" onMouseOver="shl('m1'); hdl('m2');" onMouseOut="hdl('m1');" class="mm1">ПРОДУКТИ</a>
   <div onMouseOver="shl('m1'); hdl('m2');" onMouseOut="hdl('m1');" class ="submenu1" id="m1">
      <a href="#" class="sm1">Сапуни</a>
      <a href="#" class="sm1">Самобръсначки</a>
      <a href="#" class="sm1">Тоалетни несесери</a>
      <a href="#" class="sm1">Шампоани</a>
      <a href="#" class="sm1">Балсами</a>
      <a href="#" class="sm1">Бои за коса</a>
   </div>
      <a href="#" onMouseOver="shl('m2'); hdl('m1');" onMouseOut="hdl('m2');" class="mm2">УСЛУГИ</a>
   <div class="submenu2" id="m2" onMouseOver="shl('m2'); hdl('m1');" onMouseOut="hdl('m2');">
      <a href="#" class="sm2">Бръснене</a>
      <a href="#" class="sm2">Кола маска</a>
      <a href="#" class="sm2">Подстригване</a>
      <a href="#" class="sm2">Боядисване на коса</a>
   </div>
   </div>
</body>
</html>

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


Върнете се в началото
 Профил  
 
 Заглавие: Re: Как сами да си направим web меню...
МнениеПубликувано на: Нед Ное 15, 2009 8:50 am 
Offline
Администратор
Аватар

Регистриран на: Нед Ное 02, 2008 5:30 pm
Мнения: 3550
Радва ме този вариант, но на лявото меню не мога да се кача на падащото (освен ако не съм много бърз и то не винаги става), защото има пролука и като мина през нея се скрива... Дясното няма такава пролука и съответно такъв проблем...
Моят план е - дори падащото да е отдалечено от викащото го горно пак да става работата и ще пробвам с таймаут (т.е. да не се скрива веднага докато минаваш през неактивни места...)
А пък качване и напускане са си over и out...

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


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

Регистриран на: Нед Ное 02, 2008 5:30 pm
Мнения: 3550
Ето от това положение (тук съм отлепил падащите и пробвал и бордюри ;-):
Код:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Меню</title>
<script>
   function shl(l) {
      var layer=document.getElementById(l);
      layer.style.visibility="visible";
   }
   function hdl(l) {
      var layer=document.getElementById(l);
      layer.style.visibility="hidden";
   }
   function mm(e) {
      var x = (document.all) ? event.x : e.pageX;
      var y = (document.all) ? event.y : e.pageY;
      document.f.i.value = 'X='+x+'  Y='+y;
   }
   document.onmousemove=mm;
</script>
<style>
a {text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size:11px;}
   .mmain{position:absolute; top:100px; left:200px;}
   .submenu1{visibility:hidden; width:100px; position:absolute; top:22px; left:10px; float:left; z-index:2;} 
   .mm1{position:absolute; top:0px; left:0px; z-index:1;}
   .sm1{float:left; width:100px;}
   .mm1, .sm1, .sm2, .mm2
    {background:green; color:white; height:16px; padding-left:5px; padding-right:5px; border:solid 1px black;}
     .mm1:hover, .sm1:hover, .mm2:hover, .sm2:hover{background:red; color:yellow;}
   .submenu2{visibility:hidden; width:100px; position:absolute; top:22px; left:80px; float:left; z-index:2;}
   .mm2{position:absolute; top:0px; left:70px; z-index:1;}
   .sm2{float:left; width:150px;}
</style>
</head>
<body>
   <form name="f">
      <input type="text" name="i">
   </form>
   <div class="mmain">
      <a href="#" onclick="shl('m1'); hdl('m2');" ondblclick="hdl('m1');" class="mm1">ПРОДУКТИ</a>
   <div class ="submenu1" id="m1">
      <a href="#" class="sm1">Сапуни</a>
      <a href="#" class="sm1">Самобръсначки</a>
      <a href="#" class="sm1">Тоалетни несесери</a>
      <a href="#" class="sm1">Шампоани</a>
      <a href="#" class="sm1">Балсами</a>
      <a href="#" class="sm1">Бои за коса</a>
   </div>
      <a href="#" onclick="shl('m2'); hdl('m1');" ondblclick="hdl('m2');" class="mm2">УСЛУГИ</a>
   <div class="submenu2" id="m2">
      <a href="#" class="sm2">Бръснене</a>
      <a href="#" class="sm2">Кола маска</a>
      <a href="#" class="sm2">Подстригване</a>
      <a href="#" class="sm2">Боядисване на коса</a>
   </div>
   </div>
</body>
</html>
без да се местят нещата... Таймаута хем за красота хем за време - да може да "прескочиш" от едното на другото място... Това е задачата... На път съм да стане, но ми се иска Пипо (щото няма кой друг) да помисли и той...

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


Върнете се в началото
 Профил  
 
 Заглавие: Re: Как сами да си направим web меню...
МнениеПубликувано на: Нед Ное 15, 2009 1:06 pm 
Offline
НЕЧОВЕК
Аватар

Регистриран на: Нед Ное 02, 2008 5:04 pm
Мнения: 146
Местоположение: localhost
Това вече трябва да няма проблеми, има и таймаут и се регулира с променлива. Промених изцяло JS-то, може да е с 5-6 реда повече, но е по-практичен откъм гледна точка на това, като се добавят нови менюта (както в случая добавих 3-то). При стария код трябваше на 1-вото меню да отварям m1, а да затварям m2 и m3... а ако са 10 бутона на менюто ? :) Другото което е малко тегаво е, че като се добави ново меню трябва да се барва и CSS-а не е много, но пак си е играчка. И това се получава заради posiotion:absolute. Може да се направи с position:relative; и да се барва само на 1-2 места, като има уникален клас, а не .mm1 , .sm1... .mm5, .sm5 и т.н :)

П.П А сега ще получа ли сертификат за умения по HTML/CSS/JS :D

Код:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Меню</title>
<script>
   var timeout         = 1000; //Таймаут-а в милисекунди ( 1000 = 1 секунда)
   var closetimer      = 0; //зануляване на стойности
   var ddmenuitem      = 0; //зануляване на стойности

   // отваря скрития(избрания) леар
   function mopen(id)
   {   
      // изпълнява функцията
      mcancelclosetime();

      // затваря стария леар
      if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

      // взема новия леар и го показваg
      ddmenuitem = document.getElementById(id);
      ddmenuitem.style.visibility = 'visible';

   }
   // затваря показания вече леар
   function mclose()
   {
      if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
   }

   // същината на таймера и timeout-a
   function mclosetime()
   {
      closetimer = window.setTimeout(mclose, timeout);
   }

   // Тук спира таймера
   function mcancelclosetime()
   {
      if(closetimer)
      {
         window.clearTimeout(closetimer);
         closetimer = null;
      }
   }
   document.onclick = mclose; // При клик се затваря показаното вече меню
</script>
<style>
a {text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size:11px;}
   .mmain{position:absolute; top:100px; left:200px;}
   .submenu1{visibility:hidden; width:100px; position:absolute; top:20px; left:0px; float:left; z-index:2;}
   .mm1{position:absolute; top:0px; left:0px; z-index:1;}
   .sm1{float:left; width:100px;}
   .mm1, .sm1, .sm2, .mm2, .mm3, .sm3{background:green; color:white; padding-left:5px; padding-right:5px;}
   .mm1:hover, .sm1:hover, .mm2:hover, .sm2:hover, .mm3:hover, .sm3:hover{background:red; color:yellow;}
   .submenu2{visibility:hidden; width:100px; position:absolute; top:20px; left:70px; float:left; z-index:2; margin: -1px 0 0 0;}
   .mm2{position:absolute; top:0px; left:70px; z-index:1;}
   .sm2{float:left; width:150px;}
   .submenu3{visibility:hidden; width:100px; position:absolute; top:20px; left:125px; float:left; z-index:2; margin: -1px 0 0 0;}
   .mm3{position:absolute; top:0px; left:125px; z-index:1;}
   .sm3{float:left; width:150px;}
</style>
</head>
<body>
   <div class="mmain">
        <a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()" class="mm1">ПРОДУКТИ</a>
      <div class ="submenu1" id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()" >
        <a href="#" class="sm1">Сапуни</a>
        <a href="#" class="sm1">Самобръсначки</a>
        <a href="#" class="sm1">Тоалетни несесери</a>
        <a href="#" class="sm1">Шампоани</a>
        <a href="#" class="sm1">Балсами</a>
        <a href="#" class="sm1">Бои за коса</a>
      </div>
        <a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()" class="mm2">УСЛУГИ</a>
      <div class="submenu2" id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
        <a href="#" class="sm2">Бръснене</a>
        <a href="#" class="sm2">Кола маска</a>
        <a href="#" class="sm2">Подстригване</a>
        <a href="#" class="sm2">Боядисване на коса</a>
      </div>
        <a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()" class="mm3">КОНТАКТИ</a>
      <div class="submenu3" id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
        <a href="#" class="sm3">Телефон</a>
        <a href="#" class="sm3">Емейл</a>
        <a href="#" class="sm3">GSM</a>
        <a href="#" class="sm3">Fax</a>
      </div>
   </div>
</body>
</html>

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


Върнете се в началото
 Профил  
 
 Заглавие: Re: Как сами да си направим web меню...
МнениеПубликувано на: Нед Ное 15, 2009 1:51 pm 
Offline
Администратор
Аватар

Регистриран на: Нед Ное 02, 2008 5:30 pm
Мнения: 3550
Директно си получил сертификата!

От миналата година няколко пъти си надскочил себе си...

Ако сега дадеш един пример, как да се олекоти и CSS-а - да си проличи чрез добавяне на още едно меню...

Защото за JS-то постигна върха, и с добавяне на екстрата за затваряне чрез клик и с обединяване на нещата във mopen() и с изнасянето на глобалните променливи за тяхното следене...

Освен оптимизацията на CSS-а обясни и тези margin -1px 0 0 0 за какво служат... Може ли чрез някакъв бордер да се разхубави менюто - да се разделят вертикалните позиции с нежни линийки...

Добавъчното меню след оптимизацията на CSS-а може да бъде и подменю - например на Кола маска -> надясно избери някакъв знак за надясно и от нея да се вика на съответното място леърче с някакви под-варианти - измисли 3 примерни (ако не се сещаш - примерно Вариант 1, 2, 3 ;-)
Така ще се илюстрира къде само се пипа в CSS-а за да може да се добавят нови леъри от всякъде...

Моят междинен вариант, продължавайки реда на мисленето, който си надскочил:
Код:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Меню</title>
<script>
   function shl(l) {
      var layer=document.getElementById(l);
      layer.style.visibility="visible";
   }
   function hdl(l) {
      var layer=document.getElementById(l);
      layer.style.visibility="hidden";
   }
   function mm(e) {
      var x=(document.all) ? event.x : e.pageX;
      var y=(document.all) ? event.y : e.pageY;
      document.f.i.value='X='+x+'  Y='+y;
   }
   document.onmousemove=mm;
   var sto1, sto2;
   function hto(l) {
      if(l==1)sto1=setTimeout("hdl('m1')",1000);
      if(l==2)sto2=setTimeout("hdl('m2')",1000);
   }
   function cto(l) {
      if(l==1)clearTimeout(sto1);
      if(l==2)clearTimeout(sto2);
   }
</script>
<style>
a {text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size:11px;}
   .mmain{position:absolute; top:100px; left:200px;}
   .submenu1{visibility:hidden; width:100px; position:absolute; top:19px; left:0px; float:left; z-index:2;} 
   .mm1{position:absolute; top:0px; left:0px; z-index:1;}
   .sm1{float:left; width:100px;}
   .mm1, .sm1, .sm2, .mm2
    {background:green; color:white; height:16px; padding-left:5px; padding-right:5px; border:solid 1px black;}
     .mm1:hover, .sm1:hover, .mm2:hover, .sm2:hover{background:red; color:yellow;}
   .submenu2{visibility:hidden; width:100px; position:absolute; top:19px; left:70px; float:left; z-index:2;}
   .mm2{position:absolute; top:0px; left:70px; z-index:1;}
   .sm2{float:left; width:150px;}
</style>
</head>
<body>
   <form name="f">
      <input type="text" name="i" value="X=0 Y=0">
   </form>
<div class="mmain">
<a href="#" onmouseover="cto(1); shl('m1'); hdl('m2');" onmouseout="hto(1);" class="mm1">ПРОДУКТИ</a>
   <div class="submenu1" id="m1" onmouseover="cto(1);" onmouseout="hto(1);">
      <a href="#" class="sm1">Сапуни</a>
      <a href="#" class="sm1">Самобръсначки</a>
      <a href="#" class="sm1">Тоалетни несесери</a>
      <a href="#" class="sm1">Шампоани</a>
      <a href="#" class="sm1">Балсами</a>
      <a href="#" class="sm1">Бои за коса</a>
   </div>
<a href="#" onmouseover="cto(2); shl('m2'); hdl('m1');" onmouseout="hto(2);" class="mm2">УСЛУГИ</a>
   <div class="submenu2" id="m2" onmouseover="cto(2);" onmouseout="hto(2);">
      <a href="#" class="sm2">Бръснене</a>
      <a href="#" class="sm2">Кола маска</a>
      <a href="#" class="sm2">Подстригване</a>
      <a href="#" class="sm2">Боядисване на коса</a>
   </div>
</div>
</body>
</html>
поради неудобството да се правят промени на много места за добавяне на нови леъри - и в CSS-а и в JS-та, но при преподаването в курса - такива огромни крачки ще убият курсистите. Този вариант е нежна крачица, след който твоят се явява естествено продължение, което спестява ред неудобства...

Дай следващата стъпка (върху твоят си вариант, естествено) с CSS-а, който да спестява "множествено пипане" и как може да се разхубавят бордерчетата... Покажи един хубав CSS, спретнат, подреден и коментиран в твой стил - така че и препратките надясно да са маркитрани стилно...
За HTML и JS вече си 6++, дай сега едно рамо и на гъвкавия CSS... Направи го, както смяташ, че трябва да бъде - нашият въобще не го оставяй... Ако трябва смени и наименованията на класовете, както и редът им за да са по-прегледни...

Та така, с твоя помощ от тук желаещите могат да получат много - хубави и работещи уроци по HTML/CSS/JS...

Такива като тебе са по един на няколко випуска. Дано времето те прави още по-добър и задобряващ...!

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


Върнете се в началото
 Профил  
 
 Заглавие: Re: Как сами да си направим web меню...
МнениеПубликувано на: Нед Ное 15, 2009 4:25 pm 
Offline
НЕЧОВЕК
Аватар

Регистриран на: Нед Ное 02, 2008 5:04 pm
Мнения: 146
Местоположение: localhost
И аз се уча... сега навлизам в дълбините на фреймуърка JQuery... с няколко реда това меню може да получи доста хубави ефектчета и т.н . Освен това в JQuery си има синтаксис за AJAX и така не се учат 2 синтаксиса, ами само един. JQuery е един фреймуърк който е в размер от 15 кб, и не мисля, че утежнява размера на един сайт, а напротив лесен за писане и същевременно постигане на много добри ефекти :)

Айде като имам време ще седна да измисля нова структура на менюто с под-подменюта.
Ще оставя JS-то същото, но ще променя HTML-a и CSS-a както на мен ми хареса.
Не мисля, че ще има голяма промяна в HTML-a, колкото до CSS-a :)
Когато го направя, ще постна тук в темата.

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


Върнете се в началото
 Профил  
 
 Заглавие: Re: Как сами да си направим web меню...
МнениеПубликувано на: Нед Ное 15, 2009 4:33 pm 
Offline
Администратор
Аватар

Регистриран на: Нед Ное 02, 2008 5:30 pm
Мнения: 3550
ОК - мерси предварително!

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


Върнете се в началото
 Профил  
 
 Заглавие: Re: Как сами да си направим web меню...
МнениеПубликувано на: Чет Ное 19, 2009 10:22 pm 
Offline
Администратор
Аватар

Регистриран на: Нед Ное 02, 2008 5:30 pm
Мнения: 3550
Тук качвам една илюстрация за да обсъдим нещо за измисляне...
Прикачени файлове:
Graphic1.gif
Това, което ми занимава мисълта може да бъде наречено "поведенческо програмиране"...
Дотук представените менюта са само т.нар "дроп-даун" или "пул-даун"... Ползва се единична променлива - отговорна за единствено отворено меню...
Ако се разгледа обаче поведението на меню - тип показаното на илюстрацията - според дълбочината на влагане може да имаме едновременно отворени няколко "леъра", както Пипо ги нарича в коментарите.

Как да се изгради програмно този поведенчески модел?

Нивата на влагане не са ограничени, могат да са 1, 2, 3, че и повече... Как да се подходи с броя променливи?
Има и отношение "parent - child", което се изразява в това, че един път отворено - детето се затваря, едва при "напускане" на родителя. Наблюдавах и Start менюто на Windows и разни такива менюта в програмите - примерно във Firefox-а Bookmarks/Bookmarks Toolbar/Most Visited->Получават се 3 падащи менюта и като се върна с мишката през родителите и докато седя в/у тях всички "дечица" си седят отворенки...

Търся поведенчески алгоритъм, при който желания "айтъм" от който се вика детето да е обвързан с него така че при напускане на някое родителско ниво всички дечица се скриват...

Пробвайте, за да разберете за какво става въпрос... Ако се дефинират функции за всеки "айтем" по отделно не е трудно да си го ползва всеки програмист, но идеята е да има комплект скриптови неща, лесен за употреба за различен брой родители и деца...

Пипо - ти си! Не се съмнявам, че си разбрал условието... Не ми се иска да се облягаме на готови решения.
Предизвикателството е в самостоятелното измисляне... Усъвършенстване на функциите с добавяне на "странични менюта"...


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

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


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

Регистриран на: Вто Май 03, 2011 10:56 pm
Мнения: 5
Ще се опитам да направя това за което говориш :) само да беше сложил поне 1, 2 коментара на кода за по лесно четене :)


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

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


Кой е на линия

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


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

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