Проблем със spacing


2

Здравейте, експериментирам с някви работи за уеб сайт и имам проблем, предполагам е елементарно решението, но аз лично не се сещам. Ето две снимки http://imgur.com/mbq8NWv и http://imgur.com/mbq8NWv,zLla8oh#1. Та направил съм jquery hover функция, проблема е че заради тоя spacing отстрани като си сложа мишката на същото ниво като текста се dropdown-ва менюто, без значение дали е върху самия текст или не. Пробвах с margin и padding в style sheet-a но не ми се получава може и аз да греша. Ето и код:

<div id="sidebar">
<ul class="top">
<li>Aside Item 1
<ul class="sub">
<li>Sub Menu 1</li>
</ul>
</li>
<li>Aside Item 2
<ul class="sub">
<li>Sub Menu 2</li>
</ul></li>
<li>Aside Item 3
<ul class="sub">
<li>Sub Menu 3</li>
</ul></li>
<li>Aside Item 4
<ul class="sub">
<li>Sub Menu 4</li>
</ul></li>
<li>Aside Item 5
<ul class="sub">
<li>Sub Menu 5</li>
</ul></li>
<li>Aside Item 6
<ul class="sub">
<li>Sub Menu 6</li>
</ul></li>
</ul>
<script>
$(document).ready(function () {
$("ul.top li").hover(function () { //When trigger is hovered...
$(this).children("ul.sub").slideDown('fast');
}, function () {
$(this).children("ul.sub").slideUp('slow');
});
});
</script>
</div>



Отговори



1

Здравей, колега

Ако съм те разбрал правилно искаш Sub menu-то да ти се измести в страни от Aside item и долните му елементи да не се изместват надолу. Тъй като все още не съм много наясно с Javascript-а, ще ти предложа начин как да го направиш със css като сложиш на външния списък position: relative; а на вътрешния след като се покаже position: absolute; След което с margin-left и margin-top (може и отрицателни стойности) за вътрешният списък можеш да си го нагодиш, където искаш. Можеш да погледнеш и това видео, в което Дончо показва как се прави падащо меню.

Поздрави!


от Nikolay_Radkov (2911 точки)


0
Ами не точно колега, извинявам се явно не съм обяснил правилно, искам да кажа че като си сложа мишката отстрани на текста и пак се dropdown-ва, а аз искам само като минеш с мишката през текста.

от MitkoY (18 точки)

0
Пробвай с {display:inline-block;}

от iliefff (12 точки)



2

Здравей, ако съм разбрал правилно, проблема е, че можеш да селектираш менюто и от другия край на екрана ? Ако е така, пробвай с:

li { 
	float: left;
	clear: left;
}

П.С. работи в css, за jquery не знам :)

 


от ivo.nenchev (35 точки)


0
Мерси, и твоето и на илиеффф решенията работят +1 :))

от MitkoY (18 точки)