Въпрос за дроп меню

bgtupanfighter

Well-Known Member
Значи правя си дроп-даун меню, обаче искам суб-категориите да не се показват с маусовер, а само с клик.
Не става и не става.... Тук един пич го е направил, но нещо не мога да разбера как точно става хватката

10х предварително ако някой ме насочи правилно и спра да ръся пера :)
 
От: Въпрос за дроп меню

Тук?

Още 7 символа.

Едит: Хахха аз точно с mousover ти дадох :)

болдвай "не" -то :)
 
Последно редактирано:
От: Въпрос за дроп меню

Да страшно дърво...цел ден загубих и не намирам вариант как да стане само с клик :(
 
От: Въпрос за дроп меню

Мерси много :)
Сега да видим дали ще успея да го измъча, че ми трябва 2 левъл вертикално, дано сработи
 
От: Въпрос за дроп меню

Само това чаках да каже някой :) ей сега ще постна болката си :twisted:
 
От: Въпрос за дроп меню

Значи менюто е елементарно. Ето в как ми трябва в хтмл-а (грубо)

Код:
<div id="toqga">
    <ul>
        <li><a href="#1">qkatoqga</a>
            <div>
                <ul>
                   <li><a href="#">megatoqga</a></li>
                   <li><a href="#">megatoqga</a></li>
		   <li><a href="#">megatoqga</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#2">qkatoqga</a>
            <div>
                    <ul>
                   <li><a href="#">megatoqga</a></li>
                   <li><a href="#">megatoqga</a></li>
		   <li><a href="#">megatoqga</a></li>
                    </ul>
            </div>
	<li><a href="#3">qkatoqga</a>
            <div>
                    <ul>
                   <li><a href="#">megatoqga</a></li>
                   <li><a href="#">megatoqga</a></li>
		   <li><a href="#">megatoqga</a></li>
                    </ul>
            </div>
        </li>
	<li><a href="#4">qkatoqga</a>
            <div>
                    <ul>
                   <li><a href="#">megatoqga</a></li>
                   <li><a href="#">megatoqga</a></li>
		   <li><a href="#">megatoqga</a></li>
                    </ul>
            </div>
        </li>
	<li><a href="#5">qkatoqga</a>
            <div>
                    <ul>
                   <li><a href="#">megatoqga</a></li>
                   <li><a href="#">megatoqga</a></li>
		   <li><a href="#">megatoqga</a></li>
                    </ul>
            </div>
        </li>
    </ul>
</div>

Ето и как го джаскам в цсс-а:

Код:
#toqga a {
	font-size: 11px;
	font-weight: bold;
	color: #3879C9;
}
#toqga ul ul li{
    display:none;	
}
#toqga li:hover ul li{
color: #FF7F55;
    display:list-item;
}

Така в тоя вид ми върши перфектна работа ОСВЕН скапания маусовер. Трябва ми с маусклик. Тия всички примери в нета ги обиколих и преправях по 10 пъти и нищо не става и се размазва и изобщо умрела работа.
Единственото спасение е с джаба функция. Ще стане 100% и всичко ще е перфе....само дето не знам как да си я направя :)
Та, ако някой помогне с джабата (те сиг са 2-3 реда макс) освен че ще съм му адски благодарен, ще ми направи и скапания ден хубав и слънчев, каквото всъщност е и времето днес...поне това извън смотаните стени дет съм се заврел да се мъча с глупавото и нелицеприятно меню :D
 
От: Въпрос за дроп меню

Всъщност, не се мъчи. По-доло е css + менюто html. Копи и пейст, след това направи нужните промени в css за цветове, размери, шрифт ...
Ако има нещо друго пиши.:)

<!--------------------------------- HTML Menu ------------------------------------------------------------------------------->

<ul id="togga">
<li><a href="#">megatogga</a></li>
<li><a class="fly" href="#">Tutorials</a>
<ul class="dd">
<li><a href="#">HTML / CSS</a></li>
<li><a class="fly" href="#">JS / jQuery</a>
<ul>
<li><a href="#">jQuery</a></li>
<li><a href="#">JS</a></li>
</ul>
</li>
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">XSLT</a></li>
<li><a href="#">Ajax</a></li>
</ul>
</li>
<li><a class="fly" href="#">megatogga</a>
<ul class="dd">
<li><a class="fly" href="#">By category</a>
<ul>
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li><a class="fly" href="#">Menu1</a>
<ul>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a class="fly" href="#">Menu3</a>
<ul>
<li><a href="#">Menu31</a></li>
<li><a href="#">Menu32</a></li>
<li><a href="#">Menu33</a></li>
<li><a href="#">Menu34</a></li>
</ul>
</li>
<li><a href="#">Menu4</a></li>
</ul>
</li>
<li><a href="#">Ajax</a></li>
</ul>
</li>
<li><a class="fly" href="#">By tag name</a>
<ul>
<li><a href="#">captcha</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">animation</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Go Back To The Tutorial</a></li>
</ul>

<!------------------------------------------ END HTML Menu --------------------------------------------------->






<!------------------------------------------ CSS Style Menu ----------------------------------------------------->
/* styles */
body {
background:#ffffff;
margin:0;
padding:0;
}
.example {
width:770px;
height:570px;
border:1px #000 solid;
margin:20px auto;
padding:15px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}


/* main menu styles */
#togga,#togga ul {
/*background-image:url(../images/tr75.png);*/
list-style:none;
margin:0;
padding:0;
}
#togga {
height:41px;
padding-left:5px;
padding-top:5px;
position:relative;
z-index:2;
}
#togga ul {
left:-9999px;
position:absolute;
top:37px;
width:auto;
}
#togga ul ul {
left:-9999px;
position:absolute;
top:0;
width:auto;
}
#togga li {
float:left;
margin-right:5px;
position:relative;
}
#togga li a {
background:#c1c1bf;
color:#000;
display:block;
float:left;
font-size:16px;
padding:8px 10px;
text-decoration:none;
}
#togga > li > a {
-moz-border-radius:6px;
-webkit-border-radius:6px;
-o-border-radius:6px;
border-radius:6px;

overflow:hidden;
}
#togga li a.fly {
background:#c1c1bf url(../images/arrow.gif) no-repeat right center;
padding-right:15px;
}
#togga ul li {
margin:0;
}
#togga ul li a {
width:120px;
}
#togga ul li a.fly {
padding-right:10px;
}

/*hover styles*/
#togga li:hover > a {
background-color:#858180;
color:#fff;
}

/*focus styles
#togga li a:focus {
outline-width:0;
}*/

/*popups*/
#togga li a:active + ul.dd,#togga li a:focus + ul.dd,#togga li ul.dd:hover {
left:0;
}
#togga ul.dd li a:active + ul,#togga ul.dd li a:focus + ul,#togga ul.dd li ul:hover {
left:140px;
}

<!------------------------------------------ END CSS Style Menu ----------------------------------------------------->
 
От: Въпрос за дроп меню

С фокуса много пъти опитвах всякакви галимации - не става. Но сега ще пробвам с горният цсс
 
От: Въпрос за дроп меню

оо не вече съм опитвал с fly-a :) тия примери ги изредих всичките по 5 пъти :D Проблема е, че вече съм направил структура с над 800 итемс и галимациите с допълване към готови примери не стават. Само с проста функция джава ще стане, просто да се укаже в кой калс/див актива да е маусклик, а не овър... ама от джава си немам идея
 
От: Въпрос за дроп меню

Това ще трябва вече да работи с java function onclick - http://jsfiddle.net/bEPvP/
Смени името submenu.css с твоя css file - ред 12 в скрипта.
Също така промени ul id="togga", a не div id="togga" - дай му някакъв клас или айди

------------------------------------- JS Menu -----------------------------------------------


function togga() {
var timeout = 500;
var closetimer = 0;
var toggaitem = 0;

function togga_open(e)
{
togga_close();
var submenu = $(this).find('ul');
if(submenu){
toggaitem = submenu.css('visibility', 'visible');

}

$(document).bind('click',togga_close); //add bind
//event.stopPropagation();
return false; //stop propagation

}

function togga_close()
{
if(toggaitem) toggaitem.css('visibility', 'hidden');
$(document).unbind('click',togga_close); //remove bind
}

function togga_timer()
{ closetimer = window.setTimeout(togga_close, timeout); }

function togga_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}

$(document).ready(function()
{
$('#togga > li').bind('click', togga_open);
$('#togga li ul').bind('click', togga_timer);


});


}
togga();
 
Последно редактирано:
От: Въпрос за дроп меню

Ни ще :)
Даже 1/1 от примера не задейства функцията, камо ли да преработвам. Чудя се дали не е от ограничение в див-а, защото това е хоризонтално, а при мен е вертикално едно под друго и да не би да се получава някакво ограничение
 
От: Въпрос за дроп меню

Ми той още ми е на локала...
Ама ако ти се занимава - горе е примерният хтмл заедно с цсс-а, много елементарно вертикално меню - два левала (ще го видиш в хтмл) маин и суб. Кат цъкнеш на майна и вади отдолу субувете. С хувара става без грижи, но са 800 итемс и става мазало, за това просто е задължително с моусклик.
 
От: Въпрос за дроп меню

То за това е най-добре да се напише джавата по горните параметри, че така с натъкмяване на готови примери винаги става мазалото :)
Принципно се оправям с почти всякакви галимации, ама тука запецнах яко и яда е голям, огромен дори, даже гледам убавото слънчице отвън го заместиха яки гръмотевици и порои :D
 
От: Въпрос за дроп меню

ахахаах а да не говорим, че после ще се пробвам да тормозя некой и за галимация в базата, че скюела ме реже на 70000 синвола (дескрипшана е уж на лонгтекст), а съдържанието е общо 105000 символа. Опитвах с разширения на utp-a че нали е кирилик, пробвах с mb_substr и mb_strimwidth ама ни ще и не ще - реже всичко над 65К
 
От: Въпрос за дроп меню

Фани си напиши едно JavaScript-че сравнително просто е за това, което искаш. Иначе нема да стане :). Пиши на ЛС ще ти покажа подобно...
 
От: Въпрос за дроп меню

И ако питате мен левелите в случая не би трябвало да имат значение, ако имат значи не е написано като хората. Тва се пише така че да работи и за 1 и за 1000 левела
 

Горе