PDA

View Full Version : سوال: نحوه استفاده از منوی ایجاد شده با css در Asp



fatemeh631
دوشنبه 08 اردیبهشت 1393, 11:21 صبح
سلام خدمت دوستان

من یه منو با برنامه easy css menu طراحی کردم

#mbbjiuebul_table {
margin: 0px;
padding: 0px;
line-height: 0px;
font-size: 0px;
display: inline-block;
}

#mbbjiuebul_table li a {
line-height: 32px;
font-size: 19px;
font-family: "B Yagut",sans-serif;
text-decoration: none;
color: #FFFFFF;
font-style: normal;
font-weight: bold;
padding: 12px 15px 12px 15px;
display: block;
cursor: pointer;
white-space: nowrap;
}

#mbbjiuebul_table li div.buttonbg {
height: 56px;
width: 109px;
line-height: 0;
background-color: transparent;
border-style: solid;
border-color: transparent;
border-width: 0;
border-radius: 0;
padding: 0;
box-shadow: none;
text-align: center;
}

#mbbjiuebul_table li:hover div.buttonbg a, #mbbjiuebul_table li.expanded a.topitem, #mbbjiuebul_table li.active a.topitem,
#mbbjiuebul_table li.itemhot a.topitem, #mbbjiuebul_table li a:hover {
color: #FFFFFF;
font-style: normal;
font-weight: bold;
text-decoration: none;
}


#mbbjiuebul_table li.expanded div.buttonbg, #mbbjiuebul_table li.active div.buttonbg, #mbbjiuebul_table li.itemhot div.buttonbg, #mbbjiuebul_table li:hover div.buttonbg {
background-color: transparent;
box-shadow: none;
border-color: transparent;
}

#mbbjiuebul_table {
padding: 0;
border-style: solid;
border-color: #000000;
border-width: 1px;
border-radius: 5px;
background-color: transparent;
box-shadow: 0 0 5px -1px #333333, 0 1px 2px -1px #FFFFFF inset;
border-collapse: separate;
}

#mbbjiuebul_table li.first_button div.buttonbg {
border-radius: 4px 0 0 4px;
}

#mbbjiuebul_table li.last_button div.buttonbg {
border-radius: 0 4px 4px 0;
}

#mbbjiuebul_table ul li a {
color: #000000;
font-family: "B Yagut",sans-serif;
font-size: 16px;
line-height: 27px;
font-style: normal;
font-weight: normal;
text-decoration: none;
display: block;
vertical-align: middle;
white-space: nowrap;
}

#mbbjiuebul_table ul li:hover > a {
color: #FFFFFF;
font-family: "B Yagut",sans-serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
text-decoration: none;
}

#mbbjiuebul_table ul li.subexpanded a.subexpanded, #mbbjiuebul_table ul li.subitemhot a.subitemhot, #mbbjiuebul_table ul li a:hover {
color: #FFFFFF;
font-family: "B Yagut",sans-serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
text-decoration: none;
}

#mbbjiuebul_table ul li:hover, #mbbjiuebul_table ul li.subexpanded, #mbbjiuebul_table ul li.subitemhot {
border-color: transparent;
background-color: transparent;
box-shadow: none;
}

#mbbjiuebul_table ul {
margin: 0;
border-style: solid;
border-color: #98B7E4;
border-width: 0;
padding: 0;
background: transparent;
font-size: 0;
border-radius: 5px;
}

#mbbjiuebul_table ul li a {
padding: 7px 15px 7px 13px;
text-align: left;
}

#mbbjiuebul_table ul li.separator {
padding: 7px;
cursor: default;
background: none;
box-shadow: none;
border-width: 0;
}

#mbbjiuebul_table ul li.separator div {
border-top: 1px solid #858585;
font-size: 0px;
}

#mbbjiuebul_table ul li {
border-style: solid;
border-color: transparent;
border-width: 0;
height: auto;
width: auto;
text-align: left;
line-height: 0;
font-size: 0;
cursor: pointer;
float: none;
margin: 0 0 0px 0;
border-radius: 0;
padding: 0;
box-shadow: none;
background-color: transparent;
}

#mbbjiuebul_table ul li.first_item {
border-radius: 5px 5px 0 0;
}

#mbbjiuebul_table ul li.last_item {
border-radius: 0 0 5px 5px;
}


#mbbjiuebul_table ul {
box-shadow: 0 0 7px -1px #666666;
}

#mbbjiuebul_table .spaced_li {
margin: 0px 0px 0px 0px;
}

#mbbjiuebul_table a img {
border: none;
}

#mbbjiuebul_table li {
list-style: none;
float: left;
}

#mbbjiuebul_table.css_menu li {
position: relative;
}

#mbbjiuebul_table.css_menu ul li:hover > ul {
opacity: 1;
}

#mbbjiuebul_table.css_menu li:hover > ul {
top: 100%;
left: 0;
right: auto;
opacity: 1;
}

#mbbjiuebul_table.css_menu ul li:hover > ul {
top: -0px;
left: 100%;
right: auto;
}

#mbbjiuebul_table.css_menu ul {
transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
transition-property:opacity;
-webkit-transition-property:opacity;
-moz-transition-property:opacity;
-ms-transition-property:opacity;
opacity: 0;
}

#mbbjiuebul_table ul {
position: absolute;
top:-99999px;
z-index: 4000;
}

#mbbjiuebul_table ul ul {
position: absolute;
z-index: 5000;
}

#mbbjiuebul_table .submenu_arrow {
margin-left: 8px;
}

#mbbjiuebul_table a.with_img_4 span.img_4x5, .mbbjiuebul_menulist span.img_4x5 {
width: 4px;
height: 5px;
display: inline-block;
vertical-align: middle;
}

#mbbjiuebul_table li:hover > a span.img_4x5, #mbbjiuebul_table li.subexpanded > a span.img_4x5 {
background-position: 0 -5px;
}

#mbbjiuebul_table div.arrow {
background-image: url(ebab_mbbjiu_d.png);
background-repeat: no-repeat;
background-position: right center;
height: 100%;
}

#mbbjiuebul_table ul li a.with_arrow {
background-image: url(ebab_mbbjiu_c.png);
background-repeat: no-repeat;
background-position: right center;
padding-right: 19px;
}

#mbbjiuebul_table ul li a.with_arrow:hover, #mbbjiuebul_table ul li:hover > a.with_arrow, #mbbjiuebul_table ul li.subexpanded > a.with_arrow {
background-image: url(ebab_mbbjiu_c2.png);
}

#mbbjiuebul_table div.gradient56 {
background-image: url('button_bg.png');
background-repeat: repeat-x;
background-color: #000000;
}

#mbbjiuebul_table li:hover div.gradient56, #mbbjiuebul_table li.expanded div.gradient56, #mbbjiuebul_table li.active div.gradient56, #mbbjiuebul_table li.itemhot div.gradient56 {
background-image: url('buttonhot_bg.png');
background-repeat: repeat-x;
background-color: #636363;
}

#mbbjiuebul_table div.gradient_button {
background: -moz-linear-gradient(top, #5F5F5F 0%, #292929 48%, #010101 51%, #000000 100%);
background: -webkit-linear-gradient(top, #5F5F5F 0%, #292929 48%, #010101 51%, #000000 100%);
background: -ms-linear-gradient(top, #5F5F5F 0%, #292929 48%, #010101 51%, #000000 100%);
background: linear-gradient(top, #5F5F5F 0%, #292929 48%, #010101 51%, #000000 100%);
}

#mbbjiuebul_table li:hover div.gradient_button, #mbbjiuebul_table li.expanded div.gradient_button, #mbbjiuebul_table li.active div.gradient_button, #mbbjiuebul_table li.itemhot div.gradient_button {
background: -moz-linear-gradient(top, #8B8B8B 0%, #565656 48%, #3F3F3F 51%, #636363 100%);
background: -webkit-linear-gradient(top, #8B8B8B 0%, #565656 48%, #3F3F3F 51%, #636363 100%);
background: -ms-linear-gradient(top, #8B8B8B 0%, #565656 48%, #3F3F3F 51%, #636363 100%);
background: linear-gradient(top, #8B8B8B 0%, #565656 48%, #3F3F3F 51%, #636363 100%);
}

#mbbjiuebul_table ul.gradient164 {
background-image: url('menu_bg.png');
background-repeat: repeat-x;
background-color: #E8E8E8;
}

#mbbjiuebul_table ul.gradient_menu {
background: -moz-linear-gradient(top, #F7F7F7 0%, #E8E8E8 100%);
background: -webkit-linear-gradient(top, #F7F7F7 0%, #E8E8E8 100%);
background: -ms-linear-gradient(top, #F7F7F7 0%, #E8E8E8 100%);
background: linear-gradient(top, #F7F7F7 0%, #E8E8E8 100%);
}

#mbbjiuebul_table ul li.gradient41:hover, #mbbjiuebul_table ul li.gradient41.subexpanded, #mbbjiuebul_table ul li.gradient41.subitemhot {
background-image: url('menuitemhot_bg.png');
background-repeat: repeat-x;
background-color: #424242;
}

#mbbjiuebul_table ul li.gradient_menuitem:hover, #mbbjiuebul_table ul li.gradient_menuitem.subexpanded, #mbbjiuebul_table ul li.gradient_menuitem.subitemhot {
background: -moz-linear-gradient(top, #858585 0%, #424242 100%);
background: -webkit-linear-gradient(top, #858585 0%, #424242 100%);
background: -ms-linear-gradient(top, #858585 0%, #424242 100%);
background: linear-gradient(top, #858585 0%, #424242 100%);
}

#mbbjiuebul_table li a.button_3, #mbbjiuebul_table li div a.button_3 {
padding-right: 30px;
}




نمی دونم حالا این منو رو چطوری بیارم تو صفحه

چطوری از این استفاده کنم؟
گذاشتم تو پوشه theme
Page Language="C#‎‎‎‎‎" Theme="Theme1"@%>
ولی اعمال نمیشه
یغنی دیگه ادامه شو بلد نیستم:لبخند:
میشه لطفا راهنمایی کنید:بامزه:

masoud_pnu
دوشنبه 08 اردیبهشت 1393, 11:56 صبح
دوست عزیزم،در این استایل(css)شما مشخص کردید هر بلاک استایلی به یه المان با id مشخص تخصیص پیدا کنه(#در css به این معنیه).مثلا برای دادن استایل بلاک اول به یه div،به این صورت انجام میشه:
<div id="mbbjiuebul_table"></div>

قطعا نرم افزار یه کد htmlهم بصورت یه صفحه index.htmlبراتون تولید کرده.بازش کنید و روی صفحه کلیک راست کنید و گزینه view page sourceرو بزنید.محتویات کد htmlبراتون مشخصه.کافیه کپیش کنید.
ضمنا برای فراخوانی استایل کد(css)هم اونو با استفاده از تگ link فراخوانی می کنن.به این صورت که بین بازوبسته تگ head،این خط کد رو قرار بدید:

<link rel="stylesheet" href="theme/menu-style.css" />.
کد بالا رو داخل یه stylesheet قرار بدید(روی اسم پوشه theme کلیک راست کرده و add new itemرو بزنید.از اونجا style sheetرو انتخاب کنید و بعد اون پایین اسمشو به menu-style یا هرچی دوست دارید تغییر بدید.حالا کد بالا رو دقیقا توی صفحه باز شده pasteکنید.یادتون نرن اون bodyکه موقع بازکردن اولیه stylesheetوجود داره رو پاک کنید.
سوالی بود درخدمتم.