ნაბიჯ-ნაბიჯ სახელმძღვანელო
თუ არა თქვენი სანავიგაციო მენიუ ჰორიზონტალური რიგის ზედა ან ვერტიკალური რიგის ქვედა მხარეს, ეს ჯერ კიდევ მხოლოდ სიაშია. ვებ-ნავიგაციის შექმნისას ხშირად ადვილია დაგვავიწყდეს, რომ ნავიგაციის მენიუ მხოლოდ ბრწყინვალე ბმულების ჯგუფს წარმოადგენს. მაგრამ თუ პროგრამას თქვენი ნავიგაცია იყენებს XHTML + CSS- ს, თქვენ შეგიძლიათ შექმნათ მენიუ, რომელიც არის პატარა (XHTML) გადმოსაწერად და ადვილად მორგება (CSS).
ვიწყებთ
ნავიგაციის ნუსხის შესაქმნელად, საჭიროა სიის გამოყენება.
ეს შეიძლება იყოს სტანდარტული უწესრიგო სია, რომელიც იდენტიფიცირებულია ნავიგაციის სახით:
თუ ყურადღებით ადევნებთ HTML- ს, თქვენ შეამჩნევთ, რომ "Home" ლინკზე ასევე გაქვთ ID- ის ID. ეს საშუალებას მოგცემთ შექმნათ მენიუ, რომელიც განსაზღვრავს მკითხველებისთვის მიმდინარე ადგილმდებარეობას. მაშინაც კი, თუ არ გეგმავს ამ ტიპის ვიზუალურ გამოცემას თქვენს საიტზე, ახლა შეგიძლიათ შეიტანოთ ეს ინფორმაცია. თუ გადაწყვეტთ გრაფის დამატებას, თქვენ დაგჭირდებათ ნაკლები კოდირება, რათა მომზადდეს თქვენი საიტი.
გარეშე CSS სტილის , ამ XHTML მენიუ ჰგავს სტანდარტული უწესრიგო სია. არსებობს ტყვიები და სიის ელემენტები ოდნავ ინტენსიურია. იმის გამო, რომ მე გამოყენებით პლატფორმების ბმულები , ყველაზე ბრაუზერები არ არიან ბმულები როგორც clickable (ხაზგასმით და ლურჯი). თუ ზემოთ HTML- ში ვებ-გვერდზე ჩასვით, თქვენი ნავიგაცია გამოიყურება:
- მთავარი
- პროდუქცია
- მომსახურება
- დაგვიკავშირდით
ეს არის საკმაოდ მოსაწყენი და არ გამოიყურება ჰგავს მენიუში. მაგრამ მხოლოდ რამდენიმე CSS სტილის დაემატა სია, შეგიძლიათ შექმნათ მენიუ, რომელიც ხდის თქვენ ამაყი.
ვერტიკალური ნავიგაციის მენიუ
ვერტიკალური ნავიგაციის მენიუ ძალიან მარტივია დაწერა, რადგან ის აჩვენებს, როგორც ნორმალურ სიაში: ქვემოთ და ქვემოთ.
სიის ელემენტი ვერტიკალურად ქვემოთ ჩამოთვლილია.
მე მენიუს სტილის დამთავრებისას, მე მინდა, რომ დაიწყოს გარედან და ვმუშაობ. ამით ვგულისხმობ, რომ მე პირველი სტილის ul # ნავიგაცია და შემდეგ გადატანა li ელემენტებზე და შემდეგ ბმულები და ა.შ. ამ მენიუში, პირველ რიგში განსაზღვრავთ მენიუს სიგანე. ეს უზრუნველყოფს, რომ მაშინაც კი, თუ მენიუ ელემენტი გრძელია, ისინი არ დააყენებს დანარჩენი განლაგება მეტი ან გამოიწვიოს ჰორიზონტალური სენსორული.
ul # ნავიგაცია {width: 12em; }
მას შემდეგ, რაც მე მივიღე სიგანე კომპლექტი, შემიძლია თამაში სიებთან ერთად. ეს საშუალებას გვაძლევს შექმნას ისეთი რამ, როგორიცაა (ტყვიების მოშორება), ფონის ფერები, საზღვრები, ტექსტის განლაგება და ზღვარი.
ul # ნავიგაცია li {
სიის სტილი: არა;
ფონის ფერი: # 039;
სასაზღვრო: მყარი 1px # 039;
ტექსტის გასწორება: მარცხნივ;
ზღვარი: 0;
}
მას შემდეგ, რაც თქვენ ჩამოთვლით ელემენტებს სიის ელემენტებისთვის, შეგიძლიათ დაიწყოთ თამაში, თუ როგორ გამოიყურება მენიუ ბმულების სივრცეში. პირველი სტილის UL # ნავიგაცია LI A და შემდეგ: ბმული, A: ეწვია, A: hover და A: აქტიური (თუ მათ სურთ მათ). ბმულებისათვის მე მომწონს ბმულების ბლოკირება (ვიდრე ნაგულისხმევი ხაზი). ეს აიძულებს მათ აიღონ მთელი სივრცე LI - და ისინი იმოქმედონ უფრო მეტად პარაგრაფი, რაც მათ უფრო ადვილად სტილი, როგორც მენიუ ღილაკები. სხვა რამ მე ყოველთვის გავაკეთოთ არის ამოიღონ ხაზგასმა (ტექსტი გაფორმება: არა;), როგორც ეს ხდის ღილაკები გამოიყურება უფრო ღილაკები ჩემთვის.
რა თქმა უნდა, თქვენი დიზაინი შესაძლოა განსხვავებული იყოს.
ul # ნავიგაცია li {
ჩვენება: ბლოკი;
ტექსტი-გაფორმება: არა;
padding: .25em;
საზღვრის ქვედა: მყარი 1px # 39f;
საზღვრის უფლება: მყარი 1px # 39f;
}
გაითვალისწინეთ, რომ ეკრანზე: ბლოკი; მითითებული ბმულები, მთელი ყუთი menu item არის clickable, არა მხოლოდ წერილები. ეს ასევე სასარგებლოა გამოყენებადობა. დარწმუნდით, რომ დაამატოთ ბმული ფერები (ბმული, მოინახულეთ, hover და აქტიური) თუ გინდათ რომ იყოს განსხვავებული default blue, red and purple.
a: ლინკი, a: ეწვია {color: # ff; }
a: hover, a: აქტიური {ფერი: # 000; }
მე ასევე მინდა მივცადო Hover სახელმწიფო ცოტა მეტი ყურადღების შეცვლის ფონზე ფერი.
a: hover {background-color: #ff; }
თუ გსურთ მეტი ვერტიკალური მენიუები, ქვემოთ მოყვანილი კონსულტაციები.
- სტილის ვერტიკალური მენიუ
- ძირითადი ვერტიკალური მენიუ თარგი
- სტილის ვერტიკალური მენიუ თქვენთან ერთად
- ძირითადი ვერტიკალური მენიუ თარგი თქვენთან ერთად
ჰორიზონტალური ნავიგაციის მენიუ
ჰორიზონტალური ნავიგაციის მენიუს შექმნა ოდნავ უფრო რთულია, ვიდრე ვერტიკალური სანავიგაციო მენიუები, რადგან თქვენ უნდა ჩაიდინოთ ის ფაქტი, რომ HTML სიები ვერტიკალურად გამოხატავს. ჰორიზონტალური მენიუს მსგავსად, პირველი შექმნათ თქვენი ნავიგაციის მენიუს სია :
ჰორიზონტალური მენიუს შესაქმნელად, იგივეა, რაც თქვენ ვერტიკალურ მენიუში გააკეთეთ. იწყება გარეთ და მუშაობთ სისტემაში. მას შემდეგ, რაც მე მინდა ნავიგაცია მარცხენა კუთხეში დაიწყოს, დავამატე ეს 0 მარცხენა ზღვარი და padding, და მე მივდივარ ის მარცხნივ. თქვენ ასევე უნდა მიიღოთ ჩვევა სიგანეში ისე, რომ თქვენს მენიუში არ გაატაროთ მეტი ან ნაკლები სივრცე, ვიდრე აპირებთ. ჰორიზონტალური მენიუსთვის, ეს ჩვეულებრივი დიზაინის სრული სიგანეა. მეც დაამატე ფონის ფერი მთელი სიისთვის, რათა წაიკითხოთ.
ul # ნავიგაცია {
float: მარცხენა;
ზღვარი: 0;
padding: 0;
სიგანე: 100%;
ფონის ფერი: # 039;
}
მაგრამ ჰორიზონტალური ნავიგაციის მენიუს საიდუმლო სიაშია. სია ელემენტი, როგორც წესი, დაბლოკოს ელემენტები, რაც იმას ნიშნავს, რომ მათ ექნებათ ახალი ხაზი განთავსებული და მის შემდეგ თითოეული. ბლოკნოტის ბლოკირების ჩართვისას თქვენ დააწექით სიის ელემენტები ჰორიზონტალურად ერთმანეთისაგან.
ul # navigation li {ჩვენება: inline; }
მე ვმუშაობდი ბმულებთან ზუსტად ისე, როგორც მე ვუყურებ მათ ვერტიკალურ სანავიგაციო მენიუში, იგივე ფერები და ტექსტი გაფორმება. მე დავამატე ზედა საზღვარი, რომ გაეცნოთ ღილაკებს ერთადერთი, რაც მე ამოღებულია, იყო ჩვენება: ბლოკი; ისე, რომ დააყენებს newlines უკან და განადგურება ჰორიზონტალური მენიუ.
ul # ნავიგაცია li {
ტექსტი-გაფორმება: არა;
padding: .25em 1em;
საზღვრის ქვედა: მყარი 1px # 39f;
სასაზღვრო: მყარი 1px # 39f;
საზღვრის უფლება: მყარი 1px # 39f;
}
a: ლინკი, a: ეწვია {color: # ff; }
ul # ნავიგაცია li: hover {
ფონის ფერი: # ff;
ფერი: # 000;
}
თქვენ აქ ხართ მდებარეობა ინფორმაცია
HTML- ის კიდევ ერთი ასპექტია youarehere იდენტიფიკატორი. თუ გსურთ შეცვალოთ მენიუ თქვენი მომხმარებლის ამჟამინდელი ადგილმდებარეობის შესაცვლელად, გამოიყენეთ ეს ID სხვადასხვა ფონის ფერის ან სხვა სტილის განსაზღვრისათვის. გადააადგილეთ ეს ID სხვა გვერდებზე სწორი მენიუში ატრიბუტისთვის, რათა მიმდინარე გვერდი ყოველთვის ხაზგასმული იყოს.
ul # ნავიგაცია li # youarehere {background-color: # 09f; }
თუ ამ სტილს თქვენს გვერდზე შეავსებთ, შეგიძლიათ შექმნათ ჰორიზონტალური ან ვერტიკალური მენიუ ბარი, რომელიც მუშაობს თქვენს საიტზე, მაგრამ სწრაფად ჩამოტვირთოთ და ძალიან ადვილია განახლება მომავალში. XHTML + CSS- ის გამოყენებით თქვენი სიები ძალზე ძლიერი ინსტრუმენტია დიზაინისთვის.
თუ გსურთ მეტი ჰორიზონტალური მენიუს მაგალითები, მიმართეთ შემდეგს:
- სტილის ჰორიზონტალური მენიუ
- ძირითადი ჰორიზონტალური მენიუ თარგი
- სტილის ჰორიზონტალური მენიუ შენთან ხარ აქ
- ძირითადი ჰორიზონტალური მენიუ თარგი თქვენთან ერთად