نمای درختی لیست های HTML است بهترین گزینهمروری بصری و مطالعه ساختار سلسله مراتبی آنها. بیایید به چندین تبدیل یک لیست HTML معمولی به حالت درختی بصری تر با استفاده از جادوی سبک های CSS نگاه کنیم.
1. نمونه ای از یک لیست معمولی HTML- منوی اصلی
- دانش محور
- اجزاء
- پلاگین ها
- ماژول ها
- بررسی ها
- مخاطب
- دانش محور
- منوی اصلی
- دانش محور
- اجزاء
- پلاگین ها
- ماژول ها
- بررسی ها
- مخاطب
- دانش محور
بیایید یک برچسب اختصاص دهیم
- کلاس Treeline برای ایجاد خطوط اتصال برای هر بخش از لیست.
- منوی اصلی
- دانش محور
- اجزاء
- پلاگین ها
- ماژول ها
- بررسی ها
- مخاطب
- دانش محور
- منوی اصلی
- دانش محور
- اجزاء
- پلاگین ها
- ماژول ها
- بررسی ها
- مخاطب
- دانش محور
- منوی اصلی
- دانش محور
- اجزاء
- پلاگین ها
- ماژول ها
- بررسی ها
- مخاطب
- دانش محور
- منوی اصلی
- + پایگاه دانش /* بلوک گسترش فهرست */
- اجزاء
- پلاگین ها
- ماژول ها
- بررسی ها
- مخاطب
- + پایگاه دانش /* بلوک گسترش فهرست */
- منوی اصلی
- دانش محور
- اجزاء
- پلاگین ها
- ماژول ها
- بررسی ها
- مخاطب
- دانش محور
- منوی اصلی
- دانش محور
- اجزاء
- پلاگین ها
- ماژول ها
- بررسی ها
- مخاطب
- دانش محور
- یک لیست تودرتو اضافه شده است
- یا .
- فیس بوک
- توییتر
- گوگل پلاس
- در تماس با
- RSS
برای قرار دادن منوی فرعی نسبت به منوی اصلی، سبک های زیر اعلام می شوند:
- برای یک عنصر لیست که یک لیست کشویی تو در تو قرار دارد: li (موقعیت: نسبی؛) ;
- برای منوی کشویی ul (موقعیت: مطلق؛) و همچنین مقادیر سمت چپ و بالا.برای وضوح و سهولت قالب‌بندی، اجازه دهید منوی بالای کلاس را به منوی اصلی و منوی فرعی را به منوی کشویی اضافه کنیم.
چندین روش برای مخفی کردن یک منوی کشویی وجود دارد:
روش 1. (نمایش: هیچ؛)
1) نمایش: هیچ.
2) دید: پنهان.
3) Opacity: 0;
4) transform: scaleY(0);
5) با استفاده از کتابخانه jQuery.منوی کشویی با استفاده از .submenu پنهان می شود (نمایش: هیچ؛) , در hover با استفاده از .topmenu li:hover .submenu (نمایش: block;) نشان داده می شود.
روش 2. (قابلیت مشاهده: پنهان؛)منو با استفاده از .submenu پنهان می شود (قابلیت مشاهده: پنهان؛) و با استفاده از .topmenu li:hover .submenu (قابلیت مشاهده: قابل مشاهده؛) نشان داده می شود.
روش 3. (تیرگی: 0؛)منو با استفاده از .submenu پنهان می شود (تأت: 0;) و با استفاده از .topmenu li:hover .submenu نشان داده می شود (تاری: 1;) . برای جلوگیری از ظاهر شدن منو زمانی که روی ناحیه ای که در آن قرار دارد می روید، قابلیت مشاهده را اضافه کنید: hidden; و هنگام شناور کردن، آن را به visibility تغییر دهید: قابل مشاهده; .
روش 4. (تبدیل: scaleY(0)؛)منو با استفاده از .submenu پنهان می شود (تبدیل: scaleY(0);) و با استفاده از .topmenu li:hover .submenu نشان داده می شود (تبدیل: scaleY(1);) . از آنجایی که تبدیل عنصر پیش‌فرض از مرکز اتفاق می‌افتد، باید برای .submenu (transform-origin: 0 0;) اضافه کنید. از گوشه سمت چپ بالا
روش 5: استفاده از jQuery $(".five li ul").hide(); // پنهان کردن منوی کشویی $(".five li:has(".submenu")").hover(function())($(".five li ul").stop().fadeToggle(300) ;) /* یک عنصر لیست را انتخاب کنید که حاوی یک عنصر با کلاس .submenu است و یک تابع شناور به آن اضافه کنید که منوی کشویی را نشان می دهد و پنهان می کند */); 2. منوی کشویی سه بعدیافکتهای جالبی را می‌توان با استفاده از تبدیل‌های CSS3 ایجاد کرد، به عنوان مثال، ایجاد یک منو از اعماق صفحه.
* ( اندازه جعبه: جعبه حاشیه؛ ) بدنه ( حاشیه: 0؛ پس‌زمینه: گرادیان شعاعی (#BFD6E2 1px، rgba(255,255,255,0) 2px؛ اندازه پس‌زمینه: 10px 10px؛ ) nav ul (سبک لیست : هیچ، حاشیه: 0، بالشتک: 0؛ ) nav a (نمایش: بلوک، متن-تزیین: هیچ، طرح کلی: هیچ، انتقال: 0.4s ease-in-out;) .topmenu ( نمای پشتی: پنهان، پس زمینه : rgba(255,255,255,.8)؛ .topmenu > li (نمایش: inline-block; موقعیت: نسبی؛ ) .topmenu > li > a ( font-family: "Exo 2", sans-serif; ارتفاع: 70px; ارتفاع خط: 70 پیکسل؛ بالشتک: 0 30 پیکسل؛ وزن قلم: پررنگ؛ رنگ: #003559؛ تبدیل متن: حروف بزرگ؛ ) .down:after ( محتوا: "\f107"؛ حاشیه چپ: 8 پیکسل؛ فونت-خانواده : FontAwesome; ) .topmenu li a:hover ( رنگ: #E6855F; ) .submenu ( پس زمینه: سفید؛ حاشیه: 2px جامد #003559؛ موقعیت: مطلق؛ سمت چپ: 0؛ دید: پنهان؛ کدورت: 0؛ z-index : 5؛ عرض: 150 پیکسل؛ تبدیل: پرسپکتیو(600 پیکسل) rotateX(-90 درجه؛ مبدا تبدیل: 0% 0%؛ انتقال: 0.6s ease-in-out؛ ) .topmenu > li:hover .submenu( visibility: قابل رویت؛ کدورت: 1; transform: view(600px) rotateX(0deg); ) .submenu li a ( رنگ: #7f7f7f؛ اندازه قلم: 13 پیکسل؛ ارتفاع خط: 36 پیکسل؛ بالشتک: 0 25 پیکسل؛ خانواده فونت: "Kurale"، سریف؛ ) 3. منوی کشویی قابل گسترش با آرمدر این مثال، قسمت بالای صفحه حاوی لوگو و ناوبری سایت است. لوگو می تواند تصویر یا متن باشد. منوی کشویی با استفاده از تابع تبدیل CSS3 به تدریج از زیر آیتم فهرست برتر گسترش می یابد.
لوگو
* ( اندازه جعبه: جعبه حاشیه؛ ) بدنه ( حاشیه: 0؛ پس‌زمینه: #f2f2f2؛ ) سرصفحه (پس‌زمینه: سفید؛ تراز کردن متن: مرکز؛ ) سرصفحه a (تزیین متن: هیچ؛ طرح کلی: هیچ؛ نمایشگر : بلوک؛ انتقال: .3s ease-in-out؛ ) .logo (رنگ: #D5B45B؛ فونت خانواده: "Playfair Display"، سریف؛ اندازه قلم: 2.5em؛ بالشتک: 20px 0; ) nav (نمایش: جدول؛ حاشیه: 0 خودکار؛ ) nav ul (سبک لیست: هیچکدام؛ حاشیه: 0؛ بالشتک: 0؛ ) .topmenu:after ( محتوا: ""؛ نمایش: جدول؛ پاک کردن: هر دو؛ ) .topmenu > li ( عرض: 25%؛ شناور: سمت چپ؛ موقعیت: نسبی؛ فونت-خانواده: "Open Sans"، sans-serif؛ ) .topmenu > li > a (تبدیل متن: بزرگ؛ اندازه قلم: 14 پیکسل؛ وزن فونت: پررنگ؛ رنگ: #404040؛ بالشتک: 15 پیکسل 30 پیکسل؛ ) .topmenu li a:hover (رنگ: #D5B45B; ) .submenu-link:after ( محتوا: "\f107"؛ خانواده فونت: "FontAwesome"؛ رنگ: ارث بری؛ حاشیه-چپ: 10 پیکسل؛ ) زیرمنو (پس زمینه: #273037؛ موقعیت: مطلق؛ سمت چپ: 0؛ بالا: 100%؛ شاخص z: 5؛ عرض: 180 پیکسل؛ کدورت: 0؛ تبدیل: scaleY(0) ; transform-origin: 0 0; انتقال: 0.5s ease-in-out; ) .submenu a ( رنگ: سفید؛ تراز نوشتاری: چپ؛ بالشتک: 12px 15px؛ اندازه قلم: 13px؛ حاشیه-پایین: 1px جامد rgba(255,255,255,.1); ) .submenu li:last-child a ( border-bottom: هیچ؛ ) .topmenu > li:hover .submenu ( opacity: 1; transform: scaleY(1); ) 4. گسترش منوی کشوییمثال دیگری برای یک منوی کشویی. وقتی منو ظاهر می‌شود، اثر بزرگ‌نمایی با کاهش اندازه اولیه (transform: scale(.8);) تحقق می‌یابد، در هنگام شناور اندازه به.topmenu > li:hover .submenu (transform: scale(1);) افزایش می‌یابد. .
* ( اندازه جعبه: border-box; ) body ( حاشیه: 0؛ پس‌زمینه: url (https://html5book.ru/wp-content/uploads/2015/10/background54.png) ) nav ( پس‌زمینه: سفید; ) nav ul (سبک لیست: هیچکدام؛ حاشیه: 0؛ بالشتک: 0؛ ) nav a (تزیین متن: هیچکدام؛ طرح کلی: هیچکدام؛ نمایش: بلوک؛ انتقال: .4s ease-in-out؛ ) .topmenu ( text-align: center; padding: 10px 0; ) .topmenu > li (نمایش: inline-block; position: نسبی؛ ) .topmenu > li:after ( content: ""; position: absolute; right: 0; width: 1px؛ ارتفاع: 12px؛ پس‌زمینه: #d2d2d2؛ بالا: 16px؛ box-shadow: 4px -2px 0 #d2d2d2؛ تبدیل: rotate(30deg)؛ .topmenu > li:last-child:after ( پس‌زمینه: هیچکدام؛ کادر -shadow: هیچ؛ ) .topmenu > li > a ( بالشتک: 12px 26px؛ رنگ: #767676؛ تبدیل متن: بزرگ؛ وزن فونت: پررنگ؛ فاصله حروف: 1px؛ خانواده فونت: "Exo 2"، sans-serif; ) .topmenu li a:hover ( رنگ: #c0a97a; ) .submenu ( موقعیت: مطلق؛ چپ: 50%؛ بالا: 100%؛ عرض: 210 پیکسل؛ حاشیه سمت چپ: -105 پیکسل؛ پس‌زمینه: #fafa ; حاشیه: 1px جامد #ededed; z-index: 5; دید: پنهان؛ کدورت: 0; transform: scale(.8); انتقال: .4s ease-in-out; ) .submenu li a ( padding: 10px 0; margin: 0 10px; border-bottom: 1px solid #efefef; اندازه قلم: 12px; color: #484848; font-family: "Kurale", serif; ) .topmenu > li:hover .submenu ( رویت: قابل مشاهده؛ کدورت: 1؛ تبدیل: مقیاس (1)؛ ) 5. منوی کشویی بازشومنوی افقی با مینی انیمیشن: هنگامی که ماوس را بر روی پیوندهای منوی بالا نگه می دارید، یک دایره کوچک ظاهر می شود که ظاهر منوی کشویی را نیز همراهی می کند.
@import url("https://fonts.googleapis.com/css?.jpg)؛ موقعیت پس‌زمینه: مرکز، پس‌زمینه تکرار: بدون تکرار؛ اندازه پس‌زمینه: پوشش؛ ارتفاع: 100 ولت؛ موقعیت: نسبی. ) بدنه: قبل ( محتوا: ""؛ موقعیت: مطلق؛ سمت چپ: 0؛ پایین: 0؛ ارتفاع: 100%؛ عرض: 100%؛ پس‌زمینه: گرادیان خطی (45 درجه، rgba (0،0،0،0) , rgba(255,255,255,.8))؛ ) nav (تراز کردن متن: مرکز؛ بالشتک: 40 پیکسل 0 0؛ ) nav ul (سبک لیست: هیچ، حاشیه: 0؛ پد: 0؛ ) nav a (تزیین متن : هیچکدام؛ نمایشگر: بلوک؛ رنگ: #222؛ .topmenu > li (نمایش: بلوک درون خطی؛ موقعیت: نسبی؛) خط Kaushan"، خط شکسته؛ اندازه قلم: 1.5em؛ ارتفاع خط: 1؛ فاصله حروف: 3px؛ .topmenu > li > a:before ( محتوا: ""؛ موقعیت: مطلق؛ z-index: 5; سمت چپ: 50%؛ بالا: 100%؛ عرض: 10 پیکسل؛ ارتفاع: 10 پیکسل؛ پس‌زمینه: سفید؛ شعاع حاشیه: 50%؛ تبدیل: ترجمه (-50%, 20 پیکسل؛ شفافیت: 0؛ انتقال: 0.3 ثانیه؛ ) .topmenu li:hover a:before ( transform: translate(-50%, 0); کدورت: 1; ) .submenu ( موقعیت: مطلق؛ z-index: 4؛ سمت چپ: 50%؛ بالا: 100%؛ عرض: 150px؛ بالشتک: 15px 0 15px؛ حاشیه بالا: 5px؛ پس‌زمینه: سفید؛ شعاع حاشیه: 5px. box-shadow: 0 0 30px rgba(0,0,0,.2)؛ box-size: border-box; visibility: hidden; opacity: 0; transform: translate(-50%, 20px)؛ transition: 0.3s ; ) .topmenu > li:hover .submenu (قابلیت مشاهده: قابل مشاهده؛ کدورت: 1؛ تبدیل: translate(-50%, 0); ) .submenu a ( font-family: "Libre Baskerville"، serif; اندازه فونت: 11px؛ فاصله حروف: 1px؛ بالشتک: 5px 10px؛ انتقال: 0.3s خطی؛ ) .submenu a:hover (پس‌زمینه: #e8e8e8;)اغلب اوقات، هنگام ثبت نام یا نظرسنجی در سایت ها، از شما خواسته می شود که از یک لیست کشویی انتخاب کنید. به عنوان مثال، کشور خود را از بسیاری از کشورهای دیگر انتخاب کنید. اینها همه عناصر فرم متفاوتی هستند و می توان آنها را به روش های مختلفی طراحی کرد: از HTML5 ساده تا CSS3 پیچیده.
امروز به یکی از این نمونه‌ها از طراحی یک فیلد انتخابی با استفاده از HTML/CSS و نماد Font Awesome نگاه خواهیم کرد. اما ما طبق معمول با نشانه گذاری سند شروع می کنیم.
کد HTMLدر داخل تگ انتخاب، آیتم های لیست کشویی گزینه ها قرار دارند. به نوبه خود، تگ های select و form در یک ظرف div مشترک قرار می گیرند. اگر داده‌ها متعاقباً به سرور ارسال شوند، باید تگ فرم وجود داشته باشد.
قرمز
آبی
رنگ صورتی
مشکی
سفید
ظرف را با کلاس جعبه در مرکز پنجره قرار می دهیم.
جعبه(
موقعیت: مطلق;
بالا: 50%;
سمت چپ: 50%;
transform: translate(-50%, -50%);
}
ما فونت آیکون را قبل از برچسب سر بسته می‌کنیم.
مدل دادن به انتخابگرابعاد فیلد انتخاب را 250x50 پیکسل قرار می دهیم و فیلدهای موارد را از هر طرف 10 پیکسل می کنیم.
کادر انتخاب (
عرض: 250 پیکسل؛
ارتفاع: 50 پیکسل؛
بالشتک: 10 پیکسل؛
}برداشتن قاب و ضربه:
مرز: هیچ
طرح کلی: هیچثبت نام می کنیم رنگ بنفشپس زمینه، عنوان، رنگ و اندازه فونت برای لیست ها.
زمینه: #ab05af;
font-family: "Russo One", sans-serif;
رنگ: #fff;
اندازه فونت: 20px;یک سایه در اطراف زمین ایجاد کنید.
Box-shadow: 0 5px 20px rgba(0,0,0,.3);
به طور کلی جعبه انتخاب آماده و کار می کند اما خسته کننده به نظر می رسد و مثلثی که باید با ماوس بزنید بسیار کوچک است. و اگر من چنین فکر می کردم، پس طراح همان فکر را خواهد کرد، ما باید از قبل برای گزینه های مختلف آماده شویم.
به احتمال زیاد، طراح مثلث کوچک را با نمادی از فونت Font Awesome جایگزین خواهد کرد.
به این ترتیب بسیار زیباتر به نظر می رسد، اما کد هنوز باید توسط یک طراح طرح نوشته شود. راه حل در اینجا چه می تواند باشد؟ ما کد HTML را لمس نمی کنیم، بلکه از شبه عنصر قبل استفاده می کنیم.
قبل از شبه عنصر برای جعبهاولین کاری که باید انجام دهید این است که کد آیکون و نام فونت "Font Awesome 5 Free" را یادداشت کنید. آیکون مورد نظر را در وب سایت fontawesome.com با علامت "انتخاب" انتخاب می کنیم و کد آن را کپی می کنیم.
.box::قبل از (
محتوا: "\f150"؛
font-family: "Font Awesome 5 Free";
موقعیت: مطلق;
بالا: 0;
سمت راست: 0;
عرض: 50 پیکسل؛
ارتفاع: 50 پیکسل؛
text-align: center;
ارتفاع خط: 50 پیکسل؛
رنگ: #fff;
اندازه فونت: 28px;
پس زمینه: #da00e0;
اشاره گر رویدادها: هیچ
}بعد کاملاً موقعیت می دهیم، ابعاد 50x50 را نشان می دهیم، رنگ سفیداین نماد دارای پس‌زمینه بنفش روشن است. ما یک ویژگی بسیار مهم اشاره گر-رویداد را تنظیم کردیم: هیچ . این بدان معنی است که شبه عنصر قبل، یک شی رویداد ماوس نیست، و مقدار none به رویداد "انتخاب ماوس" می گوید که به لایه پایین رفته و به عنصر زیر آن - آن مثلث کوچک دسترسی پیدا کند. مثلث ناپدید نشده است، فقط در زیر عنصر شبه قبلی قرار دارد و فقط به عنوان تزئین عمل می کند. با کلیک بر روی نماد زیبا، مثلث "زشت" در واقع کار می کند و ما انتخاب می کنیم.
با سلام خدمت خوانندگان محترم سایت وبلاگ. به عنوان بخشی از مطالعه ما در مورد پیچیدگی ها، به عنوان کار بعدی، ما به تجزیه و تحلیل جزئیات ایجاد فرم ها در سایت با استفاده از فرم های مناسب ادامه خواهیم داد.
امروز به نحوه ایجاد لیست‌های کشویی شامل چند گزینه‌ای، با استفاده از انتخاب و گزینه، نحوه ساخت یک فیلد متنی با استفاده از ناحیه متنی و همچنین در مورد امکان گسترش عملکرد فرم‌ها با استفاده از آن صحبت خواهیم کرد. مجموعه فیلدها، برچسب ها و برچسب های افسانه.
به شما یادآوری می کنم که هر فرم موجود در صفحه با استفاده از ایجاد می شود و برای وارد کردن اطلاعات کاربر و ارسال آن به سرور است (مثال - ).
متأسفانه، ابزارهای زبان نشانه گذاری فرامتن به شما اجازه نمی دهند مستقیماً این اطلاعات را پردازش کنید، بنابراین با استفاده از HTMLما فقط ایجاد می کنیم ظاهرفرم ها، و داده های لازم برای پردازش ارسال می شود. برای این منظور، یک فایل خاص به طور هدفمند در وب سرور ایجاد می شود که به یکی از زبان های سرور (اغلب PHP) نوشته شده است. بیایید بگوییم برای بازخوردشما می توانید یک فایل mail.php ایجاد کنید که کنترل کننده خواهد بود.
هنگام استفاده از اطلاعات به دست آمده در این نشریه در عمل، نحوه ظاهر آن را فراموش نکنید، جایی که کدهای همه عناصر صفحه قابل مشاهده، از جمله فرم ها، همیشه در برچسب بدنه قرار دارند.
این اطلاعات بسیار ضروری است، زیرا حتی اگر از تمام ابزارهای توسعه دهنده مدرن ساخته شده در آنها استفاده کنید (اجازه دهید یادآوری کنم، اولین علامت در اجرای این عملکرد بود)، باید مکانیسم استفاده از برچسب های اصلی را به وضوح درک کنید، سپس ویرایش کد HTML که هر از چند گاهی نیاز به آن ایجاد می شود، به یک فعالیت دلپذیر تبدیل می شود.
2. Multiple - این ویژگی که هیچ پارامتری ندارد، امکان انتخاب چندگانه را فراهم می کند، برخلاف مثال بالا که می توانید تنها یک عنصر (خط) را انتخاب کنید. سعی کنید چندین خط در این لیست را به طور همزمان با ماوس انتخاب کنید (یکی در یک زمان در هر مکانی، کلید Ctrl را نگه دارید، یا با استفاده از Shift، پشت سر هم یکی پس از دیگری دنبال کنید):
گزینه Textarea Label Fieldset Legend
3. Size - ارتفاع لیست کشویی، یعنی تعداد خطوط نمایش داده شده را تعیین می کند. اگر ویژگی چندگانه وجود داشته باشد و مقدار اندازه مشخص نشده باشد (مانند مثال بالا)، پس به طور پیش فرض چهار خط نمایش داده می شودو به عنوان مثال با size="5" پنج قابل مشاهده خواهد بود:
گزینه Textarea Label Fieldset Legend
گزینه Textarea Label Fieldset Legend
4. مورد نیاز (هیچ پارامتری ندارد) - تعیین می کند که قبل از ارسال داده ها به پردازنده باید یک انتخاب انجام شود. اگر عنصری از لیست انتخاب نشده باشد، داده های فرم ارسال نخواهد شد:
گزینه Textarea Label Fieldset Legend
گزینه Textarea Label Fieldset Legend
5. فوکوس خودکار (مهم نیست) - فوکوس را بلافاصله پس از بارگیری صفحه روی لیست تنظیم می کند. علاوه بر این، اگر کاربر عادت داشته باشد که اکثر اقدامات را با استفاده از کلیدها انجام دهد، آنگاه چنین تمرکز از پیش پیکربندی شده به انتخاب لیست با استفاده از فلش های روی صفحه کلید بدون استفاده از ماوس کمک می کند:
گزینه Textarea Label Fieldset Legend را از لیست انتخاب کنید
6. غیرفعال (بدون پارامتر) - دسترسی به لیست را مسدود می کند (آن را غیرفعال می کند). در عمل، معمولاً همراه با اسکریپت‌ها در مواردی استفاده می‌شود که فقط در صورت وجود شرایط خاصی نیاز به فعال کردن یک لیست کشویی دارید:
گزینه Textarea Label Fieldset Legend را از لیست انتخاب کنید
7. فرم - لیست را با یک یا چند فرم که به آن تعلق دارد، اما خارج از ظرف قرار دارد، ارتباط می دهد. در این حالت، پارامتر به عنوان مقدار ویژگی form نوشته می شود شناسه ویژگی جهانیکه به تگ فرم اضافه می شود:
گزینه Textarea Label Fieldset Legend را از لیست انتخاب کنید
گزینه Textarea Label Fieldset Legend را از لیست انتخاب کنید
ویژگی تگ select را با تگ فرم اصلی اشتباه نگیرید. در مثال بالا، ویژگی id="data" به تگ form و form="data" به تگ select اضافه شد که امکان مرتبط کردن لیست کشویی را با یک فرم خاص فراهم کرد.
ویژگی های برچسب گزینه1. مقدار - مقداری را از لیست کشویی که به سرور (پردازنده فرم) ارسال می شود، تعیین می کند. در واقع، یک نام برای کنترل کننده ارسال می شود که با ویژگی نام تگ انتخاب و مقدار (برای این مثال— 1، 2، 3، 4، 5)، مربوط به خط انتخاب شده از لیست کشویی:
گزینه Textarea Label Fieldset Legend را از لیست انتخاب کنید
گزینه Textarea Label Fieldset Legend
2. غیرفعال - مانع از انتخاب مورد لیست کشویی می شود.
گزینه Textarea Label Fieldset Legend
گزینه Textarea Label Fieldset Legend
همانطور که از مثال می بینید، خط "Option" غیر فعال است و نمی توان آن را انتخاب کرد.
3. برچسب - محتوای متن (که مقدار آن است) یک عنصر لیست خاص را نمایش می دهد. اگر برچسب وجود داشته باشد، خطی مشابه با مقدار این ویژگی چاپ می‌شود و محتوای متن داخل تگ گزینه نادیده گرفته می‌شود. اگر اصلاً محتوایی بین آنها نباشد همین اتفاق می افتد.
برچسب Textarea Tag Tag Tag Fieldset Tag Legend
برچسب Textarea Tag Tag Tag Fieldset Tag Legend
نگاه کن در مثال بالا، خط اول گزینه در کد خالی است (در سمت چپ جدول)، اما پارامتر label="Option Tag" نوشته شده است، در نتیجه این متن خاص در لیست ظاهر می شود (در سمت راست). خط دوم کد حاوی متن "Textarea Tag" به عنوان محتوای تگ گزینه است، اما منوی کشویی سمت راست کلمه "Textarea" را برای مطابقت با مقدار label="Textarea" نشان می دهد.
4. انتخاب شده - مورد فهرست کشویی فعلی را انتخاب می کند:
گزینه Textarea Label Fieldset Legend
گزینه Textarea Label Fieldset Legend
اگر ویژگی چندگانه وجود داشته باشد، می توان بیش از یک عنصر را انتخاب کرد:
ویژگی های تگ optgroupگزینه Textarea Label Fieldset Legend
گزینه Textarea Label Fieldset Legend
اگر لیست کشویی باید به نحوی مرتب شود، به عنوان مثال، به گروه ها تقسیم شود، برای هر یک از این گروه ها یک کانتینر استفاده می شود که شامل تگ های optgroup باز و بسته می شود که حاوی بخشی از آیتم های لیست کشویی است. با این حال، دو ویژگی برای تنظیم چنین لیست کشویی وجود دارد.
1. Label - نام هر گروه را به عنوان یک پارامتر تنظیم می کند:
گزینه Textarea Label Fieldset Legend
گزینه Textarea Label Fieldset Legend
همان چیزی است، اما با چند و اندازه = "7" از تگ انتخاب:
گزینه Textarea Label Fieldset Legend
گزینه Textarea Label Fieldset Legend
2. غیرفعال (بدون مقدار) - انتخاب عناصر گروهی را که در رابطه با آن نصب شده است مسدود می کند و موارد غیرفعال معمولاً برجسته می شوند. خاکستری:
گزینه Textarea Label Fieldset Legend
گزینه Textarea Label Fieldset Legend
یک ویدیوی کوتاه در اینجا مفید خواهد بود:
فیلد متن در یک فرم با استفاده از textareaیکی دیگر از عناصر فرم برای سایت که در نظر خواهیم گرفت فیلدی با قابلیت وارد کردن متن چند خطی در آن است. می توان آن را با استفاده از تگ textarea ایجاد کرد. بدون ویژگی های پیش فرض، اعمال این تگ نتیجه زیر را ایجاد می کند:
متن را وارد کنید:
متن را وارد کنید:
شما می توانید خطوط را در میدان انجام دهید و متن با در نظر گرفتن تغییرات ایجاد شده به پردازنده روی سرور منتقل می شود. با کلیک بر روی گوشه پایین سمت راست که با دو نوار مورب مشخص شده است، می توان زمینه را از نظر عرض و طول کشید.
بیایید اکنون سعی کنیم چندین ویژگی را با پارامترها به کد اصلی اضافه کنیم:
1. Name - نام ناحیه متن را به عنوان مقداری برای شناسایی آن پس از ارسال داده های فرم در هنگام پردازش در سرور تعریف می کند.
2. Cols - عرض فیلد، که به عنوان پارامتر به عنوان یک عدد مشخص می شود ایستاده در نزدیکینمادهای یکسان به صورت افقی قرار می گیرند. مقدار پیش فرض 20 است.
3. ردیف - ارتفاع فیلد متنی که با تعداد خطوط تعیین می شود. اگر تعداد خطوط متن وارد شده توسط کاربر بیشتر از مقدار مشخص شده توسط این ویژگی باشد، پس نوار عمودیطومار.
4. Maxlength - حداکثر تعداد کاراکترهایی را که می توان در قسمت متن قرار داد را نشان می دهد. در صورت تجاوز از حد مجاز، ورودی بیشتر امکان پذیر نخواهد بود.
در زیر یک مثال با تمام ویژگی‌های بالا آورده شده است که می‌توانید با قرار دادن تعداد مورد نیاز حروف و خطوط در قسمت متن، تأثیر هر یک از آنها را بررسی کنید (به سادگی می‌توانید همان کاراکتر را چندین بار وارد کنید):
متن را وارد کنید:
متن را وارد کنید:
5. Minlength - حداقل تعداد کاراکترهایی را که باید در قسمت متن وارد شوند را مشخص می کند. اگر کاربر بخواهد متنی با کاراکترهای کمتر ارسال کند، مرورگر پیام کوتاهی با اطلاعاتی نمایش می دهد که حاوی ذکر نیاز به تکمیل محتوای فرم و تعداد کاراکترهایی است که قبلاً وارد شده است.
7. Readonly (بدون پارامتر) - اگر این ویژگی را به textarea متصل کنید، قسمت متن توسط کاربران قابل ویرایش نخواهد بود و فقط خواندنی خواهد بود. اما می‌توانید روی آن تمرکز کنید (مکان‌نما را به فیلد ببرید و کلیک چپ کنید)، و همچنین متن را انتخاب و کپی کنید (جزئی یا کامل):
چند ویژگی دیگر که عملکردهای اضافی را هنگام پر کردن فیلدها اجرا می کنند:
8. تکمیل خودکار - نشان می دهد که آیا مرورگر باید نکاتی را در زمانی که کاربر فرمی را بر اساس داده های وارد شده قبلی پر می کند ارائه دهد و امکان درج خودکار متن مناسب را فراهم می کند.
فقط دارد دو پارامتر: روشن (فعال) و خاموش (غیرفعال). در اینجا یک مثال کد است:
متن را وارد کنید:
این ویژگی با مقدار "روشن" فقط زمانی کار می کند که پر کردن خودکار فیلدهای فرم در مرورگر وب یک کاربر خاص فعال باشد.
9. Wrap - قوانین مرورگر را برای بسته بندی خطوط در ناحیه متن با استفاده از سه مقدار تنظیم می کند:
نرم- مجموعه ای از کاراکترها که از نظر عرض در فیلد قرار نمی گیرند به طور خودکار به یک خط جدید منتقل می شوند. در این مورد، پردازنده متن به صورت یک خط ارسال می شود. اگر کاربر متنی را در هر کدام منتقل کند در جای مناسببا استفاده از کلید "Enter"، سپس این انتقال هنگام ارسال فرم وب ذخیره می شود.
متن را وارد کنید:
متن را وارد کنید:
سخت- اگر متن از نظر عرض در فیلد قرار نگیرد، خط تیره ها به صورت خودکار ساخته می شوند و هنگام ارسال به پردازنده، مکان این خط تیره ها ذخیره می شود. این گزینه فقط در در ارتباط با ویژگی cols:
متن را وارد کنید:
متن را وارد کنید:
خاموش- غیر فعال کردن خطوط شکسته اگر یک قطعه متن را بدون انتقال مکانیکی با استفاده از کلید "Enter" چاپ کنید، کل متن در یک خط قرار می گیرد و یک نوار اسکرول افقی ظاهر می شود:
متن را وارد کنید:
متن را وارد کنید:
10. فوکوس خودکار (هیچ پارامتری ندارد) - هنگام بارگیری صفحه با فرم، تمرکز روی فیلد متنی را آغاز می کند.
11. غیرفعال - بر خلاف ویژگی readonly (که ویرایش محتوای فیلد را نیز ممنوع می کند، اما تمرکز روی آن را امکان پذیر می کند)، دسترسی به قسمت متن را که معمولاً رنگی است کاملاً مسدود می کند. رنگ خاکستری:
فیلد متنی غیر فعال
امروز می خواهم یک "دستور العمل" کوچک برای ایجاد یک لیست در CSS ارائه دهم. بدون JQuery، بدون CSS3 - فقط CSS چند مرورگر خوب قدیمی. مثال بسیار ساده است، بنابراین رفقای با تجربه ممکن است علاقه ای نداشته باشند. ما یک لیست کشویی با دکمه های اجتماعی پیاده سازی خواهیم کرد.
بنابراین، اجازه دهید برای مدت طولانی صحبت نکنیم، بیایید مستقیماً برویم سر اصل مطلب
HTML این پست را به اشتراک بگذاریدمن عمدا حذف می کنم نکات کلی، مانند شامل کردن استایل ها برای اینکه کد رشد نکند. در پایین صفحه پیوندی به منابع خواهم داد - همه چیز وجود دارد.
CSS
آنچه ما در HTML داریم یک لیست منظم و یک سربرگ غیر معمول است. ویژگی غیرمعمول آن این است که با یک لینک ساخته شده است، که به شما امکان می دهد رویداد :hover، یعنی شناور را ردیابی کنید. زمانی که ماوس را روی عنوان نگه دارید، لیست کشویی کار خواهد کرد.ابتدا، بیایید به سبک های اساسی یک لیست کشویی نگاه کنیم. من سعی کردم هر خط کد را نظر بدهم تا واضح تر شود:
/* padding را بازنشانی کنید*/ .droplink ul,.droplink h3,.droplink h3 a( padding:0;margin:0 ) /*Basic wrapper*/ .droplink ( عرض:200px; position:absolute; margin:10px 0 0 25 پیکسل ) /*سبک بلوک شناور*/ .droplink:hover(ارتفاع:خودکار؛ پس‌زمینه رنگ:#3E403D؛ حاشیه: جامد 1px #3A3C39) /*عنوان در حالت عادی*/ .droplink h3 a(تراز متن:مرکز ؛ عرض: 100%؛ نمایش: بلوک؛ بالشتک: 12 پیکسل 0 پیکسل؛ رنگ:#999؛ تزئین متن: هیچ ) .droplink h3 a img(حاشیه: هیچ) /*سبک برای عنوان شناور*/ .droplink:hover h3 a (رنگ: #FFF؛ وزن قلم: پررنگ؛ موقعیت: مطلق)
هیچ چیز خاصی در اینجا وجود ندارد؛ ما اندازه و سبک بلوک، سبک هدر، و برای هر دو عنصر، سبک آنها را هنگام نگه داشتن مکان نما نشان دادیم. برو جلو:
/*لیست را بدون شناور پنهان کنید*/ .droplink ul( list-style:none; display:none ) /*نمایش لیست در hover*/ .droplink:hover ul( display:block; margin-top:40px .droplink li (نمایش: بلوک)
این کد جالب‌تر است و نشان می‌دهد که لیست کشویی هنگام نگه‌داشتن ماوس روی آن چگونه رفتار می‌کند. در شرایط عادی هزینه دارد نمایش: هیچ،یعنی نمایش داده نمی شود. هنگامی که ماوس را نگه می داریم، آن را به عنوان یک بلوک نشان می دهیم. این تمام راز است. حالا بیایید عناصر لیست را کمی تزئین کنیم و نمادها را وارد کنیم:
/*سبک مورد فهرست*/ .droplink li a( padding:5px 12px 4px 34px; margin:1px; background-color:#484A47; display:block; color:#FFF; text-decoration:none;size-font:12px; ؛ پس‌زمینه-تکرار: بدون تکرار؛ موقعیت پس‌زمینه: 10 پیکسل 3 پیکسل ) /*سبک شناور عنصر*/ .droplink li a:hover( پس‌زمینه-رنگ:#999) /*آیکون‌ها*/ .facebook a (تصویر پس‌زمینه: url("icons/facebook.png")) .twitter a (background-image:url("icons/twitter.png")) .vk a (background-image:url("icons/vk.png")) . rss a (background-image:url("icons/rss.png")) .gplus a (background-image:url("icons/gplus.png"))
این همه، در واقع. لیست کشویی آماده است و بسیار زیبا به نظر می رسد. شما می توانید عناصر را به صلاحدید خود طراحی کنید، گوشه های گرد و سایر زنگ ها و سوت ها را اضافه کنید.
اگر می‌خواهید فهرست هنگام نگه‌داشتن ماوس روی متن زیر آن «همپوشانی» داشته باشد، به کناری نگاه کنید z-index.
اگر چیزی نامشخص است یا درست نشد، در نظرات بپرسید یا از دکمه "ارسال پیام" استفاده کنید، آن جاست ->
- /* اختصاص خط درختی کلاس */
ما + را به نشانه گذاری قبلی اضافه می کنیم تا عملکرد گسترش عناصر یک لیست درختی را پیاده سازی کنیم.
سبک های زیر باید به CSS از مثال قبلی اضافه شوند:
خط درختی .drop ( موقعیت: مطلق؛ چپ: -6 پیکسل؛ بالا: 5 پیکسل؛ عرض: 11 پیکسل؛ ارتفاع: 11 پیکسل؛ ارتفاع خط: 1em؛ تراز نوشتاری: مرکز؛ پس‌زمینه: #9F9F9F؛ رنگ: #fff؛ /* پس‌زمینه و رنگ دکمه ای که لیست را باز می کند */ font-size: 78%؛ /* Size +/- */ مکان نما: اشاره گر؛ -webkit-user-select: هیچ؛ -moz-user-select: هیچ؛ ) .treeline li: last-child > .drop (حاشیه-چپ: 1px؛) .treeline .drop + ul (نمایش: هیچکدام؛) .treeline .dropM + ul (نمایش: بلوک؛)
اجرای اسکریپت تابع لیست کشوییعلاوه بر HTML و CSS، این روش برای طراحی لیست درختی نیاز به استفاده از JS دارد:
$(function() ( var ul = document.querySelectorAll(".treeline > li:not(:only-child) ul, .treeline ul ul"); for (var i = 0; i< ul.length; i++) { var div = document.createElement("div"); div.className = "drop"; div.innerHTML = "+"; ul[i].parentNode.insertBefore(div, ul[i].previousSibling); div.onclick = function() { this.innerHTML = (this.innerHTML == "+" ? "−" : "+"); this.className = (this.className == "drop" ? "drop dropM" : "drop"); } } })();
این کد JS را می توان با رفتن به حالت مشاهده کد منبع در انتهای مطالب درج کرد. لطفاً توجه داشته باشید که ممکن است کد اسکریپت توسط ویرایشگر قطع شود و در نتیجه کار نکند. در این حالت به تنظیمات ویرایشگر رفته و اجازه استفاده از تگ را بدهید.
4. نمونه ای از لیست درختی عمودی- /* اختصاص کلاس treevertical */
یک منوی کشویی افقی برای سازماندهی ساختار ناوبری سایت استفاده می شود. تعداد بهینه سطوح تودرتو یک یا دو است. هرچه سطوح ضمیمه کمتر باشد، بازدیدکنندگان سایت راحت تر می توانند اطلاعات مورد نیاز خود را پیدا کنند. نحوه ایجاد یک منوی افقی منظم به تفصیل در توضیح داده شده است.
نحوه ایجاد یک منوی کشویی افقی 1. نشانه گذاری HTML و سبک های اساسی برای یک منوی کشویی با یک سطح تودرتونشانه گذاری HTML یک منوی کشویی افقی با یک منوی معمولی متفاوت است زیرا به آیتم لیست مورد نظر پیوند می دهد.
