Html'de gezinti çubuğu yapmak istiyorsak aşağıda verilen adımları takip etmemiz gerekir. Bu adımları kullanarak Gezinme çubuğunu kolayca oluşturabiliriz.
Aşama 1: Öncelikle herhangi bir metin editörüne Html kodunu yazmamız veya Gezinme Çubuğu yapmak istediğimiz metin editöründe mevcut Html dosyasını açmamız gerekiyor.
linux yapma komutu
Make a Navigation Bar
Adım 2: Şimdi tag içerisinde bar yapmak istediğimiz yeri tanımlamamız gerekiyor.
You are at JavaTpoint Site.....
Aşama 3: Daha sonra tanımlamamız gerekiyor.
- sırasız listeyi göstermek için kullanılan etiket. Daha sonra liste öğelerini tanımlamamız gerekir.
- etiket. Gezinti çubuğunda göstermek istediğimiz öğeleri tanımlamamız gerekir.
<ul> <li> <a href="#"> Home </a> </li> <li> <a href="#"> About </a> </li> <li> <a href="#"> Contact </a> </li> <li> <a href="#"> Terms of use </a> </li> <li> <a href="#"> Join Us </a> </li> </ul> You are at JavaTpoint Site.....
Adım 4: Daha sonra imleci başlık etiketinin kapanmasının hemen sonrasına yerleştirmemiz gerekiyor. Daha sonra etiketi tanımlamamız gerekiyor. Adım 4: Bundan sonra imleci başlık etiketinin kapanmasının hemen sonrasına yerleştirmeliyiz. Daha sonra etiketi tanımlamamız gerekiyor.
kullanıcı adı örneği
Make a Navigation Bar
Adım 5: Şimdi, gezinme çubuğunun konumunu ve rengini ayarlamak için kullanılan farklı kimlik niteliklerini belirtmemiz gerekiyor. Bu yüzden head etiketinde aşağıdaki kodu kullanmamız gerekiyor. Ayrıca özelliklerin değerini gereksinimlerimize göre değiştirebiliriz.
body { height: 125vh; margin-top: 80px; padding: 30px; background-size: cover; font-family: sans-serif; } header { background-color: orange; position: fixed; left: 0; right: 0; top: 5px; height: 30px; display: flex; align-items: center; box-shadow: 0 0 25px 0 black; } header * { display: inline; } header li { margin: 20px; } header li a { color: blue; text-decoration: none; } Adım 6: Bundan sonra açılış etiketinin hemen öncesine etiketi yazmamız gerekiyor. Ve bu etiketi de kapatmamız gerekiyor. Ve son olarak Html dosyasını kaydetmemiz ve ardından dosyayı tarayıcıda çalıştırmamız gerekiyor.
Make a Navigation Bar body { height: 125vh; margin-top: 80px; padding: 30px; background-size: cover; font-family: sans-serif; } header { background-color: orange; position: fixed; left: 0; right: 0; top: 5px; height: 30px; display: flex; align-items: center; box-shadow: 0 0 25px 0 black; } header * { display: inline; } header li { margin: 20px; } header li a { color: blue; text-decoration: none; } <ul> <li> <a href="#"> Home </a> </li> <li> <a href="#"> About </a> </li> <li> <a href="#"> Contact </a> </li> <li> <a href="#"> Terms of use </a> </li> <li> <a href="#"> Join Us </a> </li> </ul> You are at JavaTpoint Site..... Şimdi Test Edin Yukarıdaki Html kodunun çıktısı aşağıdaki ekran görüntüsünde gösterilmektedir:
