CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSImageSpriteを使用したナビゲーションメニューの作成

画像スプライトは、サイトの読み込み時間を短縮するhttpリクエストの数を減らすために使用されます。

以下は、CSS画像スプライトを使用してナビゲーションメニューを作成するためのコードです-

例

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   margin: 0px;
}
span {
   width: 200px;
   height: 300px;
   background-color: black;
}
nav {
   background-color: black;
   height: 50px;
   padding-top: 15px;
   padding-left: 10px;
}
nav a {
   font-size: 20px;
   color: white;
   text-decoration: none;
   margin-right: 10px;
}
.home {
   width: 32px;
   height: 32px;
   background: url("css_sprites.png") -62px -62px;
}
.search {
   width: 32px;
   height: 32px;
   background: url("css_sprites.png") -10px -62px;
}
.phone {
   width: 32px;
   height: 32px;
   background: url("css_sprites.png") -62px -10px;
}
.user {
   width: 32px;
   height: 32px;
   background: url("css_sprites.png") -10px -10px;
}
</style>
</head>
<body>
<nav>
<img class="home" />
<a href="">HOME</a>
<img class="phone" />
<a href="">Call Us</a>
<img class="user" />
<a href="">Our Team</a>
<img class="search" />
<a href="">Search</a>
</nav>
<h1>
Main content here
</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, non! Numquam
reprehenderit alias, nisi eos corrupti repudiandae deleniti illo officiis!</p>
</body>
</html>

出力

上記のコードは次の出力を生成します-

CSSImageSpriteを使用したナビゲーションメニューの作成


  1. CSSを使用してImageSpriteからアイコンを表示する

    画像スプライトを使用する主な利点は、httpリクエストの数を減らして、サイトの読み込み時間を短縮できることです。 以下は、CSSを使用して画像スプライトからアイコンを表示するためのコードです- 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .twitter,.facebook {    background

  2. Tkinterを使用したドロップダウンメニューの作成

    ナビゲーションは、美的な方法でユーザーエクスペリエンスを向上させるため、アプリケーションの最も重要な部分です。 Tkinterを使用すると、メニューとサブメニューを非常に効率的に作成できます。 Tkinterにはメニューを作成するための組み込み関数があり、これらは別のtkinterウィジェットまたはウィンドウで呼び出すことができます。 Tkinter.Menu モジュールは、Menu-itemsにいくつかのプロパティを提供します。これらのプロパティの一部は、ボタンのラベル付け、ボタンの切り替え、カスケードプロパティを使用したサブメニューの追加などに使用されます。 この記事では、 tki