просто падащо меню

R

renegat96

Registered
можете ли да ми направите просто падащо меню...
хоризонтално ще е по-добре
ако може да е с малко js за да не товари...

не разбирам от js така че ако има значение го направете със списък
ако няма значение с какъв html код е аз ще си го пригодя
 
малко съм подходил грешно....

аз съм си направил меню
как мога да го направя падащо обаче не знам...
тези се много добри но не ми вършат работа....

@adrian ако разбираш от js можеш ли да ми го направиш ако ти дам моето меню ?
 
maxvolum каза:
Дай си кода на менюто. Ще направя каквото мога ;).
Увеличете...
css
Код: 
ul li a {
padding-top:10px;
display:block;
width:100px;
height:28px;
background:url(images/link.jpg) no-repeat center;
color:#fff;
text-decoration:none;
font-size:16px;
font-weight:bold;
}
ul li a:hover {
background:url(images/hover_link.jpg) no-repeat center;
}
ul li {
display:inline;
text-align:center;
padding-left:0px;
float:left;
}
и html
Код: 
<ul>
<li><a href="линк">име</a></li>
<li><a href="линк">име</a></li>
</ul>

тва е малко преработено меню на mute от един урок
 
Виж какво направих. Дано ти свърши работа :)
Първо трябва да свалиш този .js файл ----> chrome.js

После да добавиш това в .css файла ти

style.css
.chromestyle{
width: 99%;
font-weight: bold;
}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromestyle ul{
padding: 4px 0;
margin: 0;
text-align: center; /*set value to "left", "center", or "right"*/
}

.chromestyle ul li{
display:inline;
text-align:center;
padding-left:10px;
float:left;
}

.chromestyle ul li a{
padding-top:10px;
display:block;
width:100px;
height:32px;
background:url(images/link.jpg) no-repeat center; /*Тук се смения картинката на линк*/
color:#999;
text-decoration:none;
font-size:16px;
font-weight:bold;

}

.chromestyle ul li a:hover{
color:#fff; background:url(images/hover_link.jpg) no-repeat center; /*Тук се сменя картинката на линка когато е застанато върху него*/}

.chromestyle ul li a[rel]:after{ /*HTML to indicate drop down link*/
content: " v";
}


/* От тук започват drop down менютата*/

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4);
}


.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv a:hover{
background-color: #F0F0F0;
}

и след това да добавиш това в съдържанието на страницата

index.html
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Drop Menu 1</a></li>
<li><a href="#" rel="dropmenu2">Drop Menu 2</a></li>
<li><a href="#" rel="dropmenu3">Drop Menu 3</a></li>
</ul>
</div>


<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/">1-1</a>
<a href="http://www.cssdrive.com">1-2</a>
<a href="http://www.javascriptkit.com">1-3</a>
<a href="http://www.codingforums.com">1-4</a>
<a href="http://www.javascriptkit.com/jsref/">1-5</a>
</div>



<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.cnn.com/">2-1</a>
<a href="http://www.msnbc.com">2-2</a>
<a href="http://news.bbc.co.uk">2-3</a>
</div>


<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="http://www.google.com/">3-1</a>
<a href="http://www.yahoo.com">3-2</a>
<a href="http://www.msn.com">3-3</a>
</div>

За кода ми съм използвал картинките от урока на mute, но ти можеш да си ги промениш там където съм ти отбелязъл с цианово :)

Предполагам, че ще искаш да промениш drop down менютата. Това може да правиш като променяш кода след коментара в зелено

Също ако не са ти добре бутоните с твоите картинки, можеш да си нагаждаш твоя код, който си дал в горното мнение с кода в червено :) (той отговаря за външния вид на бутоните ти)

Също така съм ти оставил някои от коментарите, за да ти стане по-ясно :?:

Ето ти демо на целия код заедно :)



П.С. Малко голяма шеранийка стана, но исках всичко да ти изясня :) Дано се получи и да си разбрал всичко :)
Ако все пак имаш още въпроси - питай :)
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе