Прилепнал текст

dakata__92

dakata__92

Super Moderator
Как мога да направя меню подобно на това в този сайт ? Не е реклама :

http://kyndocms.com/index.php/page/name/%D0%A4%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D0%B8

Интересува ме отляво ТЕМИ менюто, какъв е JS кода :)
 
Може ли пример, че нещо неее ми се получава настройката на бутона с картинката :o
 
dakata__92 каза:
Може ли пример, че нещо неее ми се получава настройката на бутона с картинката :o
Увеличете...
Радвам се, че ти е харесал ефекта. :)
Ето ти HTML кода:
HTML: 
        <div id="themes_panel">
            <ul id="themes_menu">
                <li><a href="#" title="default">Default</a></li>
                <li><a href="#" title="eco_frendly">Eco Frendly</a></li>
                <li><a href="#" title="coffee_bean">Coffee Bean</a></li>
                <li><a href="#" title="xenon_blue">Xenon Blue</a></li>
                <li><a href="#" title="olive_tree">Olive Tree</a></li>
                <li><a href="#" title="pool_time">Pool Time</a></li>
                <li><a href="#" title="pink_panther">Pink Panther</a></li>
                <li><a href="#" title="traffic_jam">Traffic Jam</a></li>
                <li><a href="#" title="pacific_coast">Pacific Coast</a></li>
                <li><a href="#" title="theme_10">Theme No. 10</a></li>
            </ul>
            <div id="toggle_button" class="right"><a href="#"></a></div>
        </div>
 
Извинявай, че така тии го копирам, ще си го преработя но просто ми хвана окото много :?: Защо снимката излиза така няколко пиксела отгоре, как да го оправя :)

4694578P.png
[/url]
 
tedo96 каза:
За това вече трябва да си бърникаш в css-а ти.
Увеличете...
Какво ли не променях, не е се получава, чудя се да не се задава и CSS в js-то. [css]#toggle_button {
margin:3px 0px 0px 0px;
padding:0px;
float:left;
width:38px;
height:118px;
}[/css]
 
eLite каза:
Без HTML-а ти, няма как да мине. :)
Увеличете...

HTML: 
        <div id="themes_panel">            <ul id="themes_menu">                <li><a href="#" title="default">Default</a></li>                <li><a href="#" title="eco_frendly">Eco Frendly</a></li>                <li><a href="#" title="coffee_bean">Coffee Bean</a></li>                <li><a href="#" title="xenon_blue">Xenon Blue</a></li>                <li><a href="#" title="olive_tree">Olive Tree</a></li>                <li><a href="#" title="pool_time">Pool Time</a></li>                <li><a href="#" title="pink_panther">Pink Panther</a></li>                <li><a href="#" title="traffic_jam">Traffic Jam</a></li>                <li><a href="#" title="pacific_coast">Pacific Coast</a></li>                <li><a href="#" title="theme_10">Theme No. 10</a></li>            </ul>            <div id="toggle_button" class="right"><a href="#"></a></div>        </div>
[css]
#themes_panel { position:fixed; top:150px; z-index:9999;}
ul#themes_menu {
float:left;
background:#333;
border:1px solid #333;
list-style:none;
}
ul#themes_menu li { border-bottom:1px solid #444; }
ul#themes_menu li a {
display:block;
padding:7px 10px;
color:#888;
font-size:10px;
font-weight:bold;
font-family:helvetica,arial,sans-serif;
text-transform:uppercase;
text-decoration:none;
}
ul#themes_menu li a:hover { background:#444; color:#ddd; }
#toggle_button {
margin:3px 0px 0px 0px;
padding:0px;
float:left;
width:38px;
height:118px;
}
#toggle_button.right { background:url("../images/cat.png") no-repeat 0% 0%; }
#toggle_button.left { background:url("../images/cat.png") no-repeat 100% 0%; }

#toggle_button a { display:block; padding:50px 0px; }[/css]
 
За "css reset" чувал ли си ? Ако не си бързо поправи този пропуск. Всеки един браузър си има свои собствени цсс стилове за различните елементи.Всеки блоков елемент е пък с предварително зададени стойности на margin и padding,в случая ul (неподредения списък) не прави изключение, така че можеш да занулиш(reset-неш) тези стойности.В цсс частта където стилзираш напиши най-отгоре:
[css]
ul { margin:0; padding:0; }[/css]

Това се прави за всички блокови елементи и след това се задават новите стойности.Това е една от стъпките за уеднаквяване на дизайна на сайт под различните браузъри(cross browser).

Можеш да видиш, че и сайта от който си взел това меню има такава css reset част -> http://kyndocms.com/css/style.css
 
somebody каза:
За "css reset" чувал ли си ? Ако не си бързо поправи този пропуск. Всеки един браузър си има свои собствени цсс стилове за различните елементи.Всеки блоков елемент е пък с предварително зададени стойности на margin и padding,в случая ul (неподредения списък) не прави изключение, така че можеш да занулиш(reset-неш) тези стойности.В цсс частта където стилзираш напиши най-отгоре:
[css]
ul { margin:0; padding:0; }[/css]

Това се прави за всички блокови елементи и след това се задават новите стойности.Това е една от стъпките за уеднаквяване на дизайна на сайт под различните браузъри(cross browser).

Можеш да видиш, че и сайта от който си взел това меню има такава css reset част -> http://kyndocms.com/css/style.css
Увеличете...

Човек от теб мога да науча страшно много неща !!! Незнам как го правиш, но винаги оспяваш да ми прикрепиш вниманието... Принципно знаех, че трябва да се ресетва на някой места, но това го ноучавам в процеса на работа :?: +1 защото научавам нови неща... Искаше ми се да дам +1 на всички отзовали се но това беше основния ми проблем, извинявам се предварително :)
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе