PDA

View Full Version : مشکل با Css وصل شده به منوي دايناميک



bftarane
دوشنبه 29 آبان 1391, 12:55 عصر
سلام لطفاً
منويي که در اين صفحه هست ببينيد
در حالت mouse over
ديوهاي پايين پرش دارن


حالا لطفاً روي لينکي که نوشته منوي 2 کليک کنيد و منوي اون صفحه رو هم ببينيد
مي بينيد که پرشي وجود نداره

ببينيد کدهاي Css اين دو منو يکي هستند
تفاوتشون اينه که منويي که درست نشون داده ميشه به صورت دستي ul و li ها نوشته شدن و مقادير داخلشون قرار گرفته
ولي منوي صفحه 2
يه منوي دايناميک هست که يه ليترال انداخته شده
و به صورت زير منو بهش نسبت داده شده

Literal1.Text = " <ul id=\"nav\">" + menuMaker(0).Substring(5);
حالا به نظرتون اين مشکل از کجا ناشي ميشه و چطور ميشه اون رو رفع کرد؟
در ضمن اينم آدرس منويي که ازش دارم استفاده مي کنم.
http://www.sitelizard.com/blog.php?blogID=73
در ضمن منبع من براي منوي دايناميک لينک زير بوده
http://barnamenevis.org/showthread.php?215065
که کدهايي که در مسترپيج نوشتم رو هم در زير مي نويسم


public partial class MasterPage : System.Web.UI.MasterPage
{
DataTable dt;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
dt = new DataTable();
SqlConnection cn = new SqlConnection(ConfigurationManager.ConnectionStrin gs["ConStr"].ConnectionString);
SqlCommand select = new SqlCommand("select * from MenuItem", cn);
SqlDataAdapter da = new SqlDataAdapter();
da.SelectCommand = select;
da.Fill(dt);
Literal1.Text = " <ul id=\"nav\">" + menuMaker(0).Substring(5);
}
}

string menuMaker(int parentId)
{
string menu = string.Empty;
IEnumerable<DataRow> query = dt.AsEnumerable().Where(col => col.Field<int>("ParentID") == parentId);
foreach (var item in query)
{
if (!string.IsNullOrEmpty(item.Field<string>("url")))
menu += "\n<li><a href=\"" + item.Field<string>("url") + "\" target=\"_blank\">" + item.Field<string>("name") + "</a>" + menuMaker(item.Field<int>("CategoryId")) + "</li>";
else
menu += "\n<li>" + item.Field<string>("name") + menuMaker(item.Field<int>("CategoryId")) + "</li>";
}
if (!string.IsNullOrEmpty(menu))
{
menu = "\n<ul>" + menu + "\n</ul>";
}
return menu;
}

}
من خيلي سعي کردم يه منوي کراس براوزر براي منوي دايناميکم پيدا کنم ولي اين بهترين چيزي بود که تونستم پيدا کنم که اينم اين مشکل رو داره.
بگذريم از اينکه وقتي دارم منو رو اضافه مي کنم اگه آدرس صفحه اي که قراره منو به اون بره رو ندم به صورت نوشته معمولي ديده ميشه همانطور که مي بينيد در مورد منوي پرسش و پاسخ اين اتفاق افتاده که اينم يه مشکل جداست که احتمالاً بعداً ميام و مطرح مي کنم.

لطفاً کمکم کنيد.

mrgraphy
دوشنبه 29 آبان 1391, 13:10 عصر
سلام دوست عزیز.
مشکل شما از css هست نه چیز دیگه ای.
وقتی شما رو منو hover میکنید یک خط سفید رنگ بالای اون ظاهر میشه که احتمالا border هستش و 1px هم طول داره.
اگر منوی شما طولش 100px باشه و وقتی که روش hover میشه گفته باشید به بالای اون 1px border اضافه بشه اونوقت طول منو میشه 101px و پرش ایجا میشه.
برای جلوگیری از این کار شما تو css وقتی که hover شد 1px از طول منو کم کنید اونوقت مشکلتون حل میشه.
امیدورام کمکتون کرده باشم.
موفق باشید.

Fartaj
دوشنبه 29 آبان 1391, 13:20 عصر
البته نمی دونم نظرم درسته یا نه

ولی من منوی 1 و 2 رو تو دو تب جدا باز کردم وقتی این دو تا رو با هم مقایسه کردم احساس کردم بدون hover و بدون هیچ کاری اینها اختلاف ارتفاع دارن احساس من اینه که فرق بین سایز فونت متن انگلیسی و اون فونت arial که برای فارسی به کار رفته باشه

bftarane
دوشنبه 29 آبان 1391, 13:55 عصر
سلام با صحبتهاي هر دو دوست گرامي يه قضيه اي به فکرم رسيد
ببينيد
در حالت استاتيک اومده با کمک کد زير

<li class="current"><a href="#">Option</a></li>کلاس current رو به li اول داده
ولي من چون بلد نبودم در روش دايناميک از خيرش گذشتم که ظاهراً همين مشکل رو ايجاد کرده.

حالا من در حالت دايناميک چطور مي تونم کلاس current رو به اولين li يعني اعمال کنم؟

خوب اين هم کلاس Current
/* main level link hover */
#nav .current a, #nav li:hover > a {
background: #666 url(gradient.png) repeat-x 0 -40px;
color: #444;
border-top: solid 1px #f8f8f8;

-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
box-shadow: 0 1px 1px rgba(0,0,0, .2);

text-shadow: 0 1px 0 rgba(255,255,255, 1);
}
ببينيد اينجا لينکي که کلاس current داشته باشه و همچنين
(با توجه به اين کد که معنيش رو حدس مي زنم اين باشه
#nav li:hover > a
)


a اي که داخل li واقع شده و روش hover بشه
مياد border-top
اضافه مي کنه
و خوب چون من به li اول در حالت دايناميک
کلاس current ندادم
پس مي ياد فقط در حالت hover بردر ميده
ولي براي حالت استاتيک
هم وقتي هيچ hover اي اتفاق نيفتاده
بردر داره هم وقتي hover ميشه.
پس عملاً پرشي صورت نميگيره.

خوب حالا سوال من اينه که چطور به اولين li کلاس current رو اعمال کنم در حالت دايناميک.
اين رو بلد نيستم.
لطفاً کمک کنيد.

bftarane
دوشنبه 29 آبان 1391, 14:20 عصر
بچه ها اومدم اين خط رو border-top: solid 1px #f8f8f8; حذف کردم از کلاس current و مشکل حل شد ولي اگه جواب سوال بالا رو هم بديد خيلي خوب ميشه يعني دادن کلاس به اولين li

به يک مشکل ديگه هم برخوردم
در IE ديگه منو ديده نميشه

Fartaj
دوشنبه 29 آبان 1391, 14:42 عصر
li رو به اینصورت بهش کلاس رو اضافه کنید ببینید جواب نمی ده البته از کدهای خودتون به این نتیجه رسیدم تست کنید شاید جواب داد :



<li class=\"current\">

bftarane
دوشنبه 29 آبان 1391, 14:57 عصر
اومدم اين طوري نوشتم اتفاقي نيفتاد

Literal1.Text = " <ul id=\"nav\">" + " <li class=\"current\">" + menuMaker(0).Substring(5);
به اون li پاييني هم کلاس دادم همه li هاي سطح اول اين کلاس بهشون اعمال شد.
فقط بايد براي اولي اتفاق بيفته.

منويي که در همين سايت برنامه نويس وصل کردنش به منوي دايناميک آموزش داده شده بود هم با Ie مشکل داشت از jdmenu هم خواستم استفاده کنم به خوبي راست به چپ نشد اين بهترين چيزي بود که پيدا کرده بودم که اونم باهاش به اين مشکل خوردم. منوي asp.net هم که گفته شد سنگينه و تازه سر و شکل دادن به اون هم کار سختي بود. ديگه نمي دونم چه کار کنم.

Fartaj
دوشنبه 29 آبان 1391, 15:07 عصر
کلا ie با مواردی از css3 که مشکل داره یک سر به این سایت بزنید نحوه اجرای بعضی سلکتورهای css3 رو در ie گفته :
http://phpro.ir/css3-%D8%AF%D8%B1-internet-explorer/
مثلا الان سایتی که آپلود کردین رو من با کروم وقتی نگاه می کنم موقع hover منو border-radius داره در حالی که در ie پشتیبانی نمی شه
ولی خوب فعلا استفاده از اینجور افکت ها خیلی جالب نیست چون هنوز خیلی ها با ie7 دارن کار می کنن

bftarane
دوشنبه 29 آبان 1391, 15:18 عصر
ولي من فکر مي کنم الآن مشکل اينه که چطور به اون li اول کلاس کاررنت رو بديم. آخه در حالت استاتيک مشکلي با ie مشکلي نداره. (البته فکر کنم با نسخه هاي پايين تر از 7 داشت ولي اون مهم نيست)

اصلاً هر کس مي تونه اون کد منوي دايناميک رو يه تحليلي کنه خيلي خوب ميشه ببينيد مثلاً اين کد
Literal1.Text = " <ul id=\"nav\">"
الآن از نظر من بايد به ازاي اين يه <ul/> وجود داشته باشه پس اون کجاست؟
اگه من کامل اين کد منوي دايناميک رو مي فهميدم شايد مي تونستم هر منويي رو راحت بهش وصل کنم ولي الآن فقط منوهايي که طوري نوشته شدن که فقط لازمه به اون ul اوليه کلاس يا id داد رو مي تونم وصل کنم.

bftarane
دوشنبه 29 آبان 1391, 16:38 عصر
مشکلي که در پست 5 گفتم ظاهراً فقط در لوکال وجود داره روي هاست گذاشتم
اومدم با ietester روي امتحان کردم
با نسخه 7 و 8 مشکلي نبود ولي با نسخه 6 زيرمنوها نشون داده نميشه.
البته اون زياد مهم نيست به نظرم.
ولي در هر صورت هنوز اين تاپيک از نظر من بسته نشده و اگه منوي بهتري سراغ دارين يا هر راهنمايي ديگه اي در اين مورد دارين خوشحال ميشم بشنوم.
ممنون مي شم هر کس مي تونه هم با هر مرورگري دم دستش هست لطفاً يه تستي بکنه اگه مشکلي وجود داشت در ميون بزاره.

fakhravari
دوشنبه 29 آبان 1391, 17:43 عصر
http://barnamenevis.org/showthread.php?358698-%D8%AF%D8%A7%DB%8C%D9%86%D8%A7%D9%85%DA%A9-%DA%A9%D8%B1%D8%AF%D9%86-%D9%85%D9%86%D9%88-%D9%88%D8%A8%D8%B3%D8%A7%DB%8C%D8%AA

bftarane
دوشنبه 29 آبان 1391, 17:45 عصر
آقاي فخرآوري اين لينک رو قبلاً هم واسه من گذاشته بوديد. اون منو تا دو سطح بيشتر نبود و من هم در حال حاضر اونقدر توانايي ندارم خودم اون رو n سطحي کنم.
و يا کاري کنم که از Xml اطلاعاتش رو بخونه.

saeed_sho
دوشنبه 29 آبان 1391, 18:39 عصر
همون اول حلقه چک کنید که متغیر منو خالیه یا نه اگه خالی بود یعنی اولیشه و هر تغییری خواستین بدین

bftarane
دوشنبه 29 آبان 1391, 19:25 عصر
من با توجه به چيزي که از صحبت شما متوجه شدم اين رو نوشتم ولي کلاس current اعمال نشد.

foreach (var item in query)
{
if (!string.IsNullOrEmpty(item.Field<string>("url")))
menu += "\n<li><a href=\"" + item.Field<string>("url") + "\" target=\"_blank\">" + item.Field<string>("name") + "</a>" + menuMaker(item.Field<int>("CategoryId")) + "</li>";
else
menu += "\n<li>" + item.Field<string>("name") + menuMaker(item.Field<int>("CategoryId")) + "</li>";
if (string.IsNullOrEmpty(menu))
{
if (!string.IsNullOrEmpty(item.Field<string>("url")))
menu += "\n<li class=\"current\"><a href=\"" + item.Field<string>("url") + "\" target=\"_blank\">" + item.Field<string>("name") + "</a>" + menuMaker(item.Field<int>("CategoryId")) + "</li>";
else
menu += "\n<li class=\"current\">" + item.Field<string>("name") + menuMaker(item.Field<int>("CategoryId")) + "</li>";
}
}

saeed_sho
دوشنبه 29 آبان 1391, 19:55 عصر
اشتباه اضافه کردید داخل اولین شرط فقط باید کنترل کنید و فقط اولین شرط رو تغییر بدین شرط دوم که خالی بودن منو رو چک میکنه بردارید و تگ ul رو در اولین منو بزارید و بعد از حلقه تگ /ul رو بزارید
در ضمن من این کدهارو باتوجه به کدهای پست 1 گذاشتم
شرمنده کدها یکم بهم ریخت
اینو تست کنید
string menuMaker(int parentId) {
string menu = string.Empty;
IEnumerable<DataRow> query = dt.AsEnumerable().Where(col => col.Field<int>("ParentID") == parentId);
foreach (var item in query)
{
if (!string.IsNullOrEmpty(item.Field<string>("url")))
if (!string.isnullorempty(menu))
اولین منو هست و مقداره لازمو بدین
else

menu += "\n<li><a href=\"" + item.Field<string>("url") + "\" target=\"_blank\">" + item.Field<string>("name") + "</a>" + menuMaker(item.Field<int>("CategoryId")) + "</li>";
else
if (!string.isnullorempty(menu))
کدهای مربوط به اولین منو رو بزارید
else
menu += "\n<li>" + item.Field<string>("name") + menuMaker(item.Field<int>("CategoryId")) + "</li>";
}
return menu;
}

saeed_sho
دوشنبه 29 آبان 1391, 19:58 عصر
اون قسمتی که در پست قبل گفتم در مورد ul رو در کد نذاشتم اما خودتون با توجه به توضیحاتی که دادم کاری نداره خودتون بزارید
نتیجه رو بگید چی شد

bftarane
دوشنبه 29 آبان 1391, 20:52 عصر
ممنون.
کد نهايي اين شد

string menuMaker(int parentId)
{
string menu = string.Empty;
IEnumerable<DataRow> query = dt.AsEnumerable().Where(col => col.Field<int>("ParentID") == parentId);
foreach (var item in query)
{
if (!string.IsNullOrEmpty(item.Field<string>("url")))
{
if (string.IsNullOrEmpty(menu))
{
menu += "\n<li class=\"current\"><a href=\"" + item.Field<string>("url") + "\" target=\"_blank\">" + item.Field<string>("name") + "</a>" + menuMaker(item.Field<int>("CategoryId")) + "</li>";
}
else
{
menu += "\n<li><a href=\"" + item.Field<string>("url") + "\" target=\"_blank\">" + item.Field<string>("name") + "</a>" + menuMaker(item.Field<int>("CategoryId")) + "</li>";
}
}

else
{
if(string.IsNullOrEmpty(menu))
{
menu += "\n<li class=\"current\">" + item.Field<string>("name") + menuMaker(item.Field<int>("CategoryId")) + "</li>";
}
else
{
menu += "\n<li>" + item.Field<string>("name") + menuMaker(item.Field<int>("CategoryId")) + "</li>";
}
}
}
if (!string.IsNullOrEmpty(menu))
{
menu = "\n<ul>" + menu + "\n</ul>";
}
return menu;
}
و کلاس کاررنت به اولين منو اعمال شد و بقيه منوها هم تا جايي که ديدم مشکلي ندارن.
اگه فکر مي کنين ايرادي در کارم هست در ميون بزارين.

saeed_sho
سه شنبه 30 آبان 1391, 10:11 صبح
آفرین این همونیه که من میگفتم :تشویق:
خب همه چی درسته؟
سرعتش پایین نیومد؟