Меню на бутон?
- Автор Maikal
- Начална дата
Погледни Това :wink:
П.С ***
Виж виж, това май ще ти е по полезно :
:arrow: http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm
:arrow: http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm
П.С ***
Виж виж, това май ще ти е по полезно :
:arrow: http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm
:arrow: http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm
Много е просто, даже сега сам ще се убедиш.
Ето какво трябва да направиш
1)Взимаме линка даден от Smirnoff http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm
2) Теглиш картинките по-доло The three images: "shade.gif", "shadeactive.gif" and "dropindicate.gif".
3)Теглиш този джава скрипт dropdowntab.js (few variables near top to configure)
Натисни на картинката ако не можеш да се ориентираш
4)Копираш си ЦСС кода от тук dropdowntab.css
След като се снабдиш с тези файлове просто задаваш път до джава скрипта и цсс кода след което ти остава само да си напишеш скрипта за менюто.И по точно
Тествай на нов документ първо 
Ето какво трябва да направиш
1)Взимаме линка даден от Smirnoff http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm
2) Теглиш картинките по-доло The three images: "shade.gif", "shadeactive.gif" and "dropindicate.gif".
3)Теглиш този джава скрипт dropdowntab.js (few variables near top to configure)
Натисни на картинката ако не можеш да се ориентираш
4)Копираш си ЦСС кода от тук dropdowntab.css
След като се снабдиш с тези файлове просто задаваш път до джава скрипта и цсс кода след което ти остава само да си напишеш скрипта за менюто.И по точно
Код:
<div id="shademenu" class="shadetabs">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="#" rel="dropmenu1" rev="testfield">Webmaster</a></li>
<li><a href="#" rel="dropmenu2">News</a></li>
<li><a href="#" rel="dropmenu3">Search</a></li>
</ul>
</div>
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
</div>
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://news.bbc.co.uk">BBC News</a>
</div>
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="http://www.google.com/">Google</a>
<a href="http://www.yahoo.com">Yahoo</a>
<a href="http://www.msn.com">MSN</a>
</div>
<script type="text/javascript">
//tabdropdown.initializetabmenu("tab_menu_id", optional_selected_tab_number)
//ie: tabdropdown.initializetabmenu("tab_menu_id", 2)
tabdropdown.initializetabmenu("shademenu")
</script>
<form id="testform">
Test form field:<br /><input type="text" id="testfield" />
</form>До тук всичко ми е ясно само да попитам това как се оправя да не излиза зад долния бутон, а над него ?
Ето ми го и кода
Ето ми го и кода
Код:
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}
ul li {
position:relative;
}
li ul {
position:absolute;
left: 25px;
top: 0;
display:none;
font:tahoma;
font-size:14;
}
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #ccc;
}
li:hover ul { display: block; }
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
<ul id="nav">
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
.shadetabs li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
background: white url(shade.gif) top left repeat-x; /*THEME CHANGE HERE*/
}
.shadetabs li a:visited{
color: #0000ff;
}
.shadetabs li a:hover{
text-decoration: underline;
color: #FF0000;
}