Problema meniu slide dinamic.

Aici postaţi orice este legat de tehnologiile "client side". HTML, HTML5, XHTML, CSS, CSS3, XML, Standarde
Manual JS: http://www.phpromania.net/jsmanual/index.html

Moderatori: eyecon, Moderatori

quadmachine
Senior Member
Mesaje: 807
Membru din: Sâm Iul 10, 2010 4:58 pm
Localitate: Ploiesti
Contact:

Problema meniu slide dinamic.

Mesajde quadmachine » Mie Ian 02, 2013 4:57 pm

Nu imi afiseaza link-urile le ascunde ,sigur gresesc la CSS dar nu gasesc unde.

Jquery:

Cod: Selectaţi tot

    <script>
        $(document).ready(function(){
$("#accordion > div").click(function(){

   if(false == $(this).next().is(':visible')) {
      $('#accordion > li > ul > li').slideUp(300);
   }
   $(this).next().slideToggle(300);
});

$('#accordion > ul:eq(0)').show();
      });
        </script>



CSS:

Cod: Selectaţi tot

#accordion {
   list-style: none;
   padding: 0 0 0 0;
   width: 170px;
}
#accordion li{
   display: block;
   background-color: #efefef;
   font-weight: bold;
   margin: 1px;
   cursor: pointer;
   padding: 4px;
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
   border-radius: 2px;
}
#accordion ul {
   list-style: none;
   padding: 0 0 0 0;
}
#accordion ul li{
   font-weight: normal;
   cursor: auto;
   background-color: #fff;
   padding: 0 0 0 7px;
}

#accordion li{
  display: none;
}

#accordion a {
   text-decoration: none;
   color: #111;
}

#accordion a:hover {
   text-decoration: underline;
}


PHP:

Cod: Selectaţi tot

     function dropdownMenu(){
       $roots = mysql_query("SELECT * FROM categories WHERE parent = ".intval(0)) or die(mysql_error());
       $subs = mysql_query("SELECT * FROM categories WHERE parent > ".intval(0)) or die(mysql_error());

       $sublinks = array();

       while ($row = mysql_fetch_array($subs)) {
             array_push($sublinks, $row);}

             $menu = '
             <div class="meniuCol">
             <ul id="accordion">'."\n";
             while($link = mysql_fetch_assoc($roots)) {
      $menu .= '<div>'.$link["text"].'</div>'."\n".'<li><ul>'."\n";
      foreach ($sublinks as $sublink) {
         if($sublink['parent'] == $link['id']) {
                          $menu .= '<li><a href="'.$sublink["link"].'">'.$sublink["text"].'</a></li>'."\n";
                          }
      }
      $menu .= '   </ul></li>'."\n";

      }
      $menu .= '</ul></div>';

      return $menu."\n";
      }


Cod: Selectaţi tot

Nu confundati femeia de serviciu cu profesoara de Limba si Literatura Romana.

ViezuREX
Senior Member
Mesaje: 502
Membru din: Joi Dec 13, 2012 1:35 pm

Re: Problema meniu slide dinamic.

Mesajde ViezuREX » Joi Ian 03, 2013 8:41 am

Ai cumva un link unde putem vedea codul "in actiune"? ca sa nu trebuiasca sa il luam cu copy/paste de aici si sa adaptam?

quadmachine
Senior Member
Mesaje: 807
Membru din: Sâm Iul 10, 2010 4:58 pm
Localitate: Ploiesti
Contact:

Re: Problema meniu slide dinamic.

Mesajde quadmachine » Joi Ian 03, 2013 2:31 pm

Lucrez pe localhost dar se poate face si static fara PHP.Pe http://jsfiddle.net/ poti face o versiune statica :D.Mersi

Cod: Selectaţi tot

Nu confundati femeia de serviciu cu profesoara de Limba si Literatura Romana.

ViezuREX
Senior Member
Mesaje: 502
Membru din: Joi Dec 13, 2012 1:35 pm

Re: Problema meniu slide dinamic.

Mesajde ViezuREX » Joi Ian 03, 2013 4:20 pm

Mie imi pare mai mult a fi din jQuery pentru ca pe elementul li din #accordion iti ramane display: none.
Desi scriptul jQuery iti pune la click display: list-item; acesta nu face override la display: none; si cred ca de la asta e. Nu prea am timp acum sa ma uit pe codul de jQuery dara daca nu o dovedesti pana maine mai arunc o privire.

quadmachine
Senior Member
Mesaje: 807
Membru din: Sâm Iul 10, 2010 4:58 pm
Localitate: Ploiesti
Contact:

Re: Problema meniu slide dinamic.

Mesajde quadmachine » Joi Ian 03, 2013 7:30 pm

L-am rezolvat dar pe jumatate, era din jquery.Cand intru pe pagina sunt visible desi ar trebui sa fie hidden si una singura visible.Am incercat ceva din CSS dar nu face ca inainte daca ii dau display: none la sub element (li ul li).Se poate rezolva din jquery?

Cod: Selectaţi tot

Nu confundati femeia de serviciu cu profesoara de Limba si Literatura Romana.

ViezuREX
Senior Member
Mesaje: 502
Membru din: Joi Dec 13, 2012 1:35 pm

Re: Problema meniu slide dinamic.

Mesajde ViezuREX » Joi Ian 03, 2013 8:11 pm

Se poate face destul de usor din jQuery daca folosesti addClass, numai ca trebuie sa definesti inca doua clase in CSS, una care sa fie cu display: hidden; si una cu display: block;

quadmachine
Senior Member
Mesaje: 807
Membru din: Sâm Iul 10, 2010 4:58 pm
Localitate: Ploiesti
Contact:

Re: Problema meniu slide dinamic.

Mesajde quadmachine » Vin Ian 04, 2013 8:26 pm

Bun ti-am urmat sfat-ul si functioneaza cat de cat dar im afiseaza doar o singura subcategorie la fiecare categorie.In loc sa imi afiseze prima categorie si restul hidden.

Asa ceva am adaugat in jquery.

Cod: Selectaţi tot

$('#accordion li:first-child').addClass('showClass');

Cod: Selectaţi tot

Nu confundati femeia de serviciu cu profesoara de Limba si Literatura Romana.

ViezuREX
Senior Member
Mesaje: 502
Membru din: Joi Dec 13, 2012 1:35 pm

Re: Problema meniu slide dinamic.

Mesajde ViezuREX » Sâm Ian 05, 2013 12:56 pm

Pai ar trebui sa ai doua clase de elemente, una pentru cele de pe nivelul 1 si una pentru cele de pe nivelul 2. Astfel poti instrui jQuery ca la .hover pe elementuld e nivel 1 sa faca .addClass cu SHOW pentru elementele de pe nivelul 2.


Înapoi la “HTML/JavaScript/CSS”

Cine este conectat

Utilizatori ce ce navighează pe acest forum: Niciun utilizator înregistrat și 15 vizitatori