khorsandreza
پنج شنبه 06 آبان 1389, 15:34 عصر
سلام
من با استفاده ار CSS منو طراحی میکنم
کد را ببینید
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.suckerdiv ul
{
margin: 0;
padding: 0;
list-style-type: none;
width: 99%; /* Width of Menu Items */
height: 23px;
border-bottom: 1px solid C#cc;
background-color: #B8D6AA;
}
.suckerdiv ul li{
position: relative;
}
.suckerdiv ul li ul
{
position: absolute;
width: 100%; /*sub menu width*/
top: 0;
visibility: hidden;
height: 23px;
background-color: #B8D6AA;
}
/* Sub level menu links style */
.suckerdiv ul li a
{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: black;
text-decoration: none;
padding: 1px 5px;
border-bottom: 0;
height: 23px;
background-color: #B8D6AA;
border-style: solid solid none solid;
border-width: 1px;
border-color: #999999;
}
.suckerdiv ul li a:visited{
color: black;
}
.suckerdiv ul li a:hover{
color: black;
background-color: #FFE271;
border-style: outset;
}
.suckerdiv .subfolderstyle{
background: url(images/arrow-list.gif) no-repeat center left;
background-color: #B8D6AA;
}
/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */
.suckerdiv
{
width: 100%;
}
</style>
<script type="text/javascript">
var menuids = ["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas
function buildsubmenus() {
for (var i = 0; i < menuids.length; i++) {
var ultags = document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t = 0; t < ultags.length; t++) {
ultags[t].parentNode.getElementsByTagName("a")[0].className = "subfolderstyle"
if (ultags[t].parentNode.parentNode.id == menuids[i]) //if this is a first level submenu
ultags[t].style.right = ultags[t].parentNode.offsetWidth + "px" //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.right = ultags[t - 1].getElementsByTagName("a")[0].offsetWidth + "px" //position menu to the right of menu item that activated it
ultags[t].parentNode.onmouseover = function() {
this.getElementsByTagName("ul")[0].style.display = "block"
}
ultags[t].parentNode.onmouseout = function() {
this.getElementsByTagName("ul")[0].style.display = "none"
}
}
for (var t = ultags.length - 1; t > -1; t--) { //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility = "visible"
ultags[t].style.display = "none"
}
}
}
if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)
function pageLoad() {
}
</script>
</head>
<body dir="rtl">
<div class="suckerdiv" dir="rtl"
style="font-family: Tahoma; font-size: 9pt; width: 200px;">
<ul id="suckertree1" dir="ltr">
<li><a href="#"> کلاس بنز</a></li>
<li><a href="#"> کلاس پژو</a>
<ul>
<li><a href="#"> 405</a></li>
<li><a href="#"> 206</a></li>
<li><a href="#"> 207</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
من ای دی مربوط به منو suckertree1 قرار دادم بعد از کامپایل برنامه در VS2008 کدی را به اول آی دی من اضافه میکنه که باعث خطا میشه موقع ایجاد منو این شکل ctl00_suckertree1 میشه من اگر بعد از کامپایل برم در فایل Aspx بصورت دستی تغییر بدم مشکل ایجاد میشه؟
من با استفاده ار CSS منو طراحی میکنم
کد را ببینید
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.suckerdiv ul
{
margin: 0;
padding: 0;
list-style-type: none;
width: 99%; /* Width of Menu Items */
height: 23px;
border-bottom: 1px solid C#cc;
background-color: #B8D6AA;
}
.suckerdiv ul li{
position: relative;
}
.suckerdiv ul li ul
{
position: absolute;
width: 100%; /*sub menu width*/
top: 0;
visibility: hidden;
height: 23px;
background-color: #B8D6AA;
}
/* Sub level menu links style */
.suckerdiv ul li a
{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: black;
text-decoration: none;
padding: 1px 5px;
border-bottom: 0;
height: 23px;
background-color: #B8D6AA;
border-style: solid solid none solid;
border-width: 1px;
border-color: #999999;
}
.suckerdiv ul li a:visited{
color: black;
}
.suckerdiv ul li a:hover{
color: black;
background-color: #FFE271;
border-style: outset;
}
.suckerdiv .subfolderstyle{
background: url(images/arrow-list.gif) no-repeat center left;
background-color: #B8D6AA;
}
/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */
.suckerdiv
{
width: 100%;
}
</style>
<script type="text/javascript">
var menuids = ["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas
function buildsubmenus() {
for (var i = 0; i < menuids.length; i++) {
var ultags = document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t = 0; t < ultags.length; t++) {
ultags[t].parentNode.getElementsByTagName("a")[0].className = "subfolderstyle"
if (ultags[t].parentNode.parentNode.id == menuids[i]) //if this is a first level submenu
ultags[t].style.right = ultags[t].parentNode.offsetWidth + "px" //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.right = ultags[t - 1].getElementsByTagName("a")[0].offsetWidth + "px" //position menu to the right of menu item that activated it
ultags[t].parentNode.onmouseover = function() {
this.getElementsByTagName("ul")[0].style.display = "block"
}
ultags[t].parentNode.onmouseout = function() {
this.getElementsByTagName("ul")[0].style.display = "none"
}
}
for (var t = ultags.length - 1; t > -1; t--) { //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility = "visible"
ultags[t].style.display = "none"
}
}
}
if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)
function pageLoad() {
}
</script>
</head>
<body dir="rtl">
<div class="suckerdiv" dir="rtl"
style="font-family: Tahoma; font-size: 9pt; width: 200px;">
<ul id="suckertree1" dir="ltr">
<li><a href="#"> کلاس بنز</a></li>
<li><a href="#"> کلاس پژو</a>
<ul>
<li><a href="#"> 405</a></li>
<li><a href="#"> 206</a></li>
<li><a href="#"> 207</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
من ای دی مربوط به منو suckertree1 قرار دادم بعد از کامپایل برنامه در VS2008 کدی را به اول آی دی من اضافه میکنه که باعث خطا میشه موقع ایجاد منو این شکل ctl00_suckertree1 میشه من اگر بعد از کامپایل برم در فایل Aspx بصورت دستی تغییر بدم مشکل ایجاد میشه؟