CSS MenusのCSS横メニューを設置してみた

先日「CSSメニューのサンプルがある海外サイト 9選」ということで紹介しましたが、そのなかのCSS Menusにあるサンプルを実際に設置してみました。
見たいサンプルをクリックすると右上のメニューが変わります。 サンプルについてはフッターにあります。ただ、なぜかCSSが指定されていませんので以下のようにCSSを指定してあげましょう。CSSの画像ファイルへのパスも変な場合があるので注意しましょう。
<link type="text/css" rel="stylesheet" href="CSSのアドレス" />

とりあえず気に入ったものを1つ設置してみました。 まずhtmlですが先ほど言ったようにCSSを指定しないといけません。あとサンプルではそれぞれにidが指定されていますが特になくてもいいと思います。
<link type="text/css" rel="stylesheet" href="menu.css" />
<ul id="menu">
    <li><a href="#"><b>Home</b></a></li>
    <li><a href="#"><b>menu1</b></a></li>
    <li><a href="#"><b>menu2</b></a></li>
    <li><a href="#"><b>menu3</b></a></li>
</ul>
CSSについては色々書いていますがこれくらいで大丈夫だと思います。
#menu li {
	position:relative; 
	float:left;
	list-style:none;
}
#menu li a {
	display:block; 
	height:50px; 
	padding:0; 
	width:100px; 
	float:left; 
	color:#444; 
	text-decoration:none; 
	font-size:14px; 
	text-align:center; 
	background: url(flat.gif); 
	line-height:50px;
}
#menu li a b {
	position:relative;
}
#menu li a:hover, 
#menu li a:active,{
	background: url(curled.png) no-repeat right top; 
	color:#c60;
}
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加