Как сами да си направим web меню...

emilang · **Публикувано на:** Съб Ное 14, 2009 10:13 pm

Днес на курса по дизайн вече навлязохме на сТредна дълбочина в такива неща като: 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-ът са тук. Както се вижда - нищо дълго... За ъпгрейда можем и рамчици да сложим...

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

PIPO · **Публикувано на:** Нед Ное 15, 2009 12:11 am

Така и не разбрах какво е това качване и напускане ?
Ето го моя вариант с 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>

emilang · **Публикувано на:** Нед Ное 15, 2009 8:50 am

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

emilang · **Публикувано на:** Нед Ное 15, 2009 9:20 am

Ето от това положение (тук съм отлепил падащите и пробвал и бордюри ;-):

Код:

<!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>

без да се местят нещата... Таймаута хем за красота хем за време - да може да "прескочиш" от едното на другото място... Това е задачата... На път съм да стане, но ми се иска Пипо (щото няма кой друг) да помисли и той...

PIPO · **Публикувано на:** Нед Ное 15, 2009 1:06 pm

Това вече трябва да няма проблеми, има и таймаут и се регулира с променлива. Промених изцяло 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>

emilang · **Публикувано на:** Нед Ное 15, 2009 1:51 pm

Директно си получил сертификата!

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

Ако сега дадеш един пример, как да се олекоти и 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...

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

PIPO · **Публикувано на:** Нед Ное 15, 2009 4:25 pm

И аз се уча... сега навлизам в дълбините на фреймуърка JQuery... с няколко реда това меню може да получи доста хубави ефектчета и т.н . Освен това в JQuery си има синтаксис за AJAX и така не се учат 2 синтаксиса, ами само един. JQuery е един фреймуърк който е в размер от 15 кб, и не мисля, че утежнява размера на един сайт, а напротив лесен за писане и същевременно постигане на много добри ефекти :)

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

emilang · **Публикувано на:** Нед Ное 15, 2009 4:33 pm

ОК - мерси предварително!

emilang · **Публикувано на:** Чет Ное 19, 2009 10:22 pm

Тук качвам една илюстрация за да обсъдим нещо за измисляне...

Прикачени файлове:

Graphic1.gif

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

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

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

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

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

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

forgi · **Публикувано на:** Сря Май 04, 2011 5:26 pm

Ще се опитам да направя това за което говориш :) само да беше сложил поне 1, 2 коментара на кода за по лесно четене :)

fentg.com

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

Как сами да си направим web меню...

Кой е на линия