یک روز وقت گذاشتم و کمی قالب رو از جمله منوی وبلاگ رو تغییر دادم. الان دیگه میتونید دسته بندی هارو هم بالای سایت ببینید با کمک این دو تگ گمنام:

<details>

و

<summary>

این تگ دوتا خوبی داره:

1 بیان این دو تگ رو جزو اسکریپت ها حساب نمی کنه!

2 و هر وقت منو باز بشه متن و کد های داخلش به طور کامل خونده و اجرا میشه و لود اولیه سایت سریعتر انجام میشه

-البته شاید زمان دسترسی کاربر به اینترنت کم باشه و خب در اون صورت این یه نقصه!

روش کار جالبی داره. تگ اول برای درست کردم باکس کشویی و تگ دوم برای عنوان گذاشتن روی اون باکس! تازه این شکلی میشه منو های تو در تو هم درست کرد. کد کامل منو توی ادامه ی مطلبه!

.

.

این از کد منو، دیزاین و استایلش با خودتون (: 

<details>
<summary>تیتر باکس</summary>
<li><a title="وقتی موس میره رو لینک این متن میاد" href="#">متن لینک</a></li>
</details>

که این شکلی در میاد، اگر بخواید خوشگل تر بشه باید کله تون رو ببرید توی بخش استایل قالب(در نظرات در خدمتم):

این البته بدون استایله

• اگر بخواید باکس توی حالت عادی باز باشه باید به تگ <details> صفت open بدید.اینجوری یعنی:

<details open>

حتما نیاز نیست که یک منو باشه. میتونه با کمی تغییر توی کد تیترش یه چیستان باشه و ادامه اش جوابش، میتونه معرفی خودتون باشه، میتونه سر فصل های یک مطلب باشه و...

• وقتی این تگ رو تست می کنیم یا در جایی استفاده می کنیم. به خاطر کلیک های زیاد روی متن دکمه ی منو، مرورگر اشتباه برداشت انتخاب کردن متن رو می کنه و اینکارو انجام میده. به زبون ساده تر. مرورگر اشتباهی متن دکمه رو انتخاب می کنه برای کپی کردنش. اگر این کد رو در آخر css قالبتون بزارید دیگه این اتفاق برای منوتون نمیفته

details, summary{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}

• اگر این منو بدون استایل باشه عرض باکس با اندازه متن منطبق میشه. این کد کمی بین باکس و متن فاصله ایجا میکنه:

details, summary{padding:3px;}

• در آخر هم می تونید کاری بکنید که موس وقتی روی منو میره حالت اشاره بگیره:

(توی حالت عادی چون متن منو لینکی رو نداره پس موس به شکل عادی ش می مونه)

details, summary{cursur:pointer}