د قدم طرف لارښود
که چیرې ستاسو نیویارک مینو کې په افقی قطار کې د افقی قطار وي یا د عمودی قطار لوري ته لاړ شي، دا لاهم یوازې یو لیست دی. کله چې د ویب نیویگیشن ډیزاین، دا ډیره اسانه ده چې هیر کړئ چې نیویګ نیینګ مینځل یوازې د اړیکو یوه جال ډله ده. مګر که تاسو د XHTML + CSS په کارولو سره خپل نیویژن پروګرام کړئ، تاسو کولی شئ هغه مینوچه جوړ کړئ چې کوچنی وي (XHTML) او اسانه کول په اسانۍ سره (سی ایس ایس).
پیل کول
د نیویارک لپاره د لیست ډیزاین کولو لپاره، تاسو اړتیا لرئ چې یو لیست استعمال کړئ.
دا کیدای شي یو معیاري بې بنسټه لیست چې د نیویارک په توګه پیژندل شوی وي:
که تاسو په HTML کې نږدي ګورئ، نو تاسو به وګورئ چې "Home" لینک هم ستاسو د ځای پېژندل شوی وي. دا به تاسو ته اجازه درکړي چې یو مینو ته رامینځ ته کړي چې ستاسو د لوستونکو لپاره اوسني موقعیت پیژني. حتی که تاسو په اوسني سایټ کې د دې ډول بصري ډول لرلو پالن نلري، تاسو کولی شئ دا معلومات شامل کړئ. که تاسو پریکړه وکړئ چې وروسته وروسته اضافه کړئ، نو تاسو به خپل سایټ چمتو کولو لپاره کم کوډونه ولرئ.
د سی ایس ایس د سټیلنګ پرته، دا د XHTML مینو یو معياري بې ترتیبه لیست ښکاري. دلته ګولۍ دي او د لیست توکي لږ تاوان لري. ځکه چې زه د ځایی لینکونو څخه کار اخلم، ډیری براؤزر به د کلیک کولو وړ ندی لکه تړل شوي او په نیلا کې اړیکو ښودلی. که تاسو په پورته HTML کې په ویب پاڼه کې پیټ کړئ، نو ستاسو نیویگیشن به داسې ښکاري:
- کور
- محصولات
- خدمتونه
- موږ سره اړیکه ونیسئ
دا ډیر بورډ دی او د مینځلیک په څیر نه ګوري. مګر د ځینو سی ایس ایس شیلیونو سره په لیست کې اضافه شوی، تاسو کولی شئ یوه مینو جوړه کړئ چې تاسو فخر کوي.
د عمودی نیویگیشن مینو
د عمودی نیویگیشن مینه ډیره اسانه ده چې ولیکئ ځکه چې دا د عادی لیست په څیر ښکارندوی کوي: پورته او ښکته.
د لړ توکو توکي په عمودي پاڼه کې مخ پرانيزي.
کله چې زه د مینځلو وړم، زه غواړم په بهر کې پیل او کار وکړم. په دې توګه، زما معنی دا ده چې لومړی د ال ال # نیویجینډ طرزالعمل او بیا د عناصر او بیا لینکونو او نورو ته ځي. نو د دې مینو لپاره، لومړی تاسو د مینو چوکۍ تعریف کړئ. دا به دا ډاډ ترلاسه کړي چې حتی که د مینو توکي اوږد وي، نو دوی به د لیږد نور لیږد نه وي یا د افقی سکول کولو لامل شي.
ul # نیویگیشن {چوکۍ: 12em؛ }
کله چې ما د چوکۍ سایټ ترلاسه کړ، زه کولی شم د لیست توکي سره لوبې وکړم. دا ماته اجازه راکوي چې شیان جوړ کړي (د گولیو څخه لیرې کولو)، پس منظر رنګ، سرحدونه، د متن پواسطه، او حاالتو.
ul # navigation li {
د لیست طرزالعمل: هیڅ نه
شاليد رنګ: # 039؛
سرحدي پوله: جامد 1px # 039؛
متن - نښه: ښي
حاصله: 0؛
}
یو ځل چې تاسو د لیست د توکو لپاره بنسټیز کړئ، تاسو کولی شئ چې د لینک په ساحه کې د مینو مینځ ته راوړلو سره لوبې کول پیل کړئ. لومړی ډول UL # نیویگیشن LI A او بیا A: لینک، A: لیدل شوي، A: هور، او A: فعال (که تاسو یې غواړئ). د لینکونو لپاره، زه غواړم چې د اړیکو یو بلاک عنصر جوړ کړم) د دې لپاره چې اصلي انټرنیټ ولرئ (. دا د دوی لین ټول ځای نیسي ترڅو دوی د پیراګراف په څیر عمل وکړي، کوم چې دوی د مینو د بکسونو په څیر سټینټ ته اسانتیا برابروي. بل څه چې زه تل کار کووم د لینډ لرې کړئ (متن - سجاوٹ: هیڅ نه،)، لکه څنګه چې دا بکسونه زما په څیر بټونه ګوري.
مګر البته، ستاسو ډیزاین ممکن مختلف وي.
ul # navigation li a {
ښودنه: بندیز؛
د متن جوړونې: هیڅ نه
ګنډل: .25em؛
سرحد - لاندینۍ: جامد 1px # 3f؛
د سرحد - حق: solid 1px # 3f؛
}
په یاد ولرئ چې د نندارې سره: بندیز؛ په لینکونو کې ځای پرځای کړئ، د مینو د توکو ټوله بکس د کلک وړ وړ دی، نه یوازې خطونه. دا د کارونې لپاره هم ښه ده. ډاډه کړئ چې د تړلو رنګونو (لینک، لیدل شوي، هور او فعال) تنظیم کړئ که تاسو غواړئ چې دوی د اصلي نیلې، سور او جامنی څخه توپیر ولرئ.
A: لینک، A: لیدل شوی {رنګ: #fff؛ }
A: هور، a: فعال {رنګ: # 000؛ }
زه غواړم د پس منظر رنګ بدلولو سره د هورورډ حالت لږ پام ورکړم.
A: هور {شاليد رنګ: #fff؛ }
که تاسو د عمودی ماینونو نور مثالونه غواړئ، لاندي لیست سره مشوره وکړئ.
- یو ټکی شوی عمودی ماین
- د بنسټیز عمودی ماین پاکۍ
- یو سټیل شوی عمودی مینو چې تاسو یې دلته یاست
- د تاسو سره دلته یو د اساسي عمودی میډیا ټکي
افقی نیویگیشن مینو
د افقی نیویگیشن مینو جوړول د عمودی نیویگیشن منګونو په پرتله لږ ډیر ستونزمن دي ځکه تاسو باید دا حقیقت تکرار کړئ چې د HTML لسټونه غوره کوي چې عمودی ډول ښودل کړي. لکه د افقی مینو کې، لومړی د نیویارک مینو مینو لیست جوړ کړئ:
د افقی مینو مینځته کولو لپاره، لکه څنګه چې تاسو د عمودی مینو سره ترسره کړې وي ورته کار وکړئ. له بهر سره پیل او کار وکړئ. له هغه ځایه چې زه غواړم خپل نیویګ په بائیں کښی پیل کړم، ما د 0 بڼې ګوټی او ډنډ سره ترتیب کړ، او زه یې ښي خوا ته وځم. تاسو باید د چوکۍ د جوړولو لپاره په عادت کې هم واخلئ ترڅو ستاسو مینه د اراده په پرتله ډیر یا لږ ځای ونلري. د افقی منبع لپاره، دا معمولا د ډیزاین بشپړ چوک دی. ما د ټولو لیست لپاره یو پس منظر رنګه رنګ هم اضافه کړ ترڅو د لوستلو لپاره یې اسانه کړي.
ul # navigation {
لوټ
حاصله: 0؛
ډډنگ: 0؛
چوکۍ: 100٪؛
شاليد رنګ: # 039؛
}
مګر د افقی نیویگیشن مینو ته پټه د لیست توکي کې دي. د توکو لیست معمولا د بلاک عناصر دي، دا پدې مانا ده چې دوی به د هر یو څخه دمخه او وروسته وروسته نوي لائن ولري. د بلاګ څخه د انلاین څخه د نندارتون بدلولو سره، تاسو د لیست عناصر مجبورول چې یو بل افقی سره بل ځای ته لاړ شي.
ul # نیویگیشن li {نمونه: انډول؛ }
ما هغه لینکونه لکه څنګه چې ما دوی د عمودی نیویگیشن مینو کې د ورته رنګونو او متن د ترتیب کولو سره درملنه کوله. ما یو لوړ پوړ اضافه کړ ترڅو هغه تڼۍ وټاکئ کله چې دوی پټ شوي وي. یواځې هغه شیان چې لیرې شوي دي نندارتون وه: بلاک؛ لکه څنګه چې دا به نوی افریقیان بیرته راولي او افقی مینو ته وران کړي.
ul # navigation li a {
د متن جوړونې: هیڅ نه
ګنډل: .25em 1em؛
سرحد - لاندینۍ: جامد 1px # 3f؛
سرحد - لوړ: solid 1px # 3f؛
د سرحد - حق: solid 1px # 3f؛
}
A: لینک، A: لیدل شوی {رنګ: #fff؛ }
ال # نیویگیشن li a: hover {
شاليد رنګ: #fff؛
رنګ: # 000؛
}
تاسو د موقعیت معلوماتو دلته یاست
د HTML بله بله اړخ د youarehere پېژندونکی دی. که تاسو غواړئ خپل مینو ته بدلون ورکړئ ترڅو د خپلو کاروونکو اوسنۍ موقعیت په ګوته کړئ، په ساده ډول دا پیژندنه وکاروئ چې د مختلف پس منظر رنګ یا بل ډول ډول تعریف کړئ. د ID دا ځانګړتیاوې په نورو مخونو کې د سمارټ مینځپانګه ته ولیږئ، دا چې اوسنی مخ تل په نښه شوي.
د # نیویگیشن li # ته تاسو دلته {شاليد رنګ: # 09f؛ }
که تاسو دا پاڼه ستاسو په پاڼه کې یوځای کړئ، تاسو کولی شئ د افقی یا عمودی مینو مینځته بار جوړه کړئ چې ستاسو د سایټ سره کار کوي مګر په راتلونکې کې تازه کولو لپاره چټک ډلبندۍ او خورا اسانه دی. د XHTML + CSS کارول د ډیزاین لپاره ستاسو لیستونه خورا پیاوړې وسیله کې راځي.
که تاسو د افقی منبع نور مثالونه غواړئ، لاندی مشوره وکړئ.
- یو سټیلی شوی افقی منځنی
- د بنسټیز افقی وسیله چوکاټ
- د تاسو سره دلته یو سټیلی شوی افریقی مینو
- د تاسو سره دلته یو بنسټیز افقی وسیله سمبول