CSS 三角 を利用したメニューを作る(レスポンシブ)

公開日: : CSS

CSS三角を利用したメニューを作る(レスポンシブ)

前回の吹き出しを利用して、段階を見せるような三角メニューを作っておきます。
なるべくレスポンシブ対応にしようと思います。

■ HTML

<div class="wrap">
<div class="yamenu-sp">

<div class="yamenu">
<p><span>1.朝起きる</span></p>
</div>

<div class="yamenu">
<p><span>2.歯を磨く</span></p>
</div>

<div class="yamenu">
<p><span>3.着替える</span></p>
</div>

</div>
</div>

メニューと言ってもaタグが入っていないので、リンクしたい場合は、pタグをaタグにすれば多分出来ると思います。

三角内側メニュー

DEMO を見る
■ CSS

body{
text-align:center;background:#ddff99;
}
.wrap{
width:90%;margin:200px auto;
}
.yamenu-sp{
	display:block;
	width:100%;
	height:200px;
}
.yamenu{
	display:block;
	width:28%;
	height:200px;
	float:left;
	position:relative;
}
.yamenu p{
 	display:block;float: left;
	width:85%;height:100px;
	text-align: center;
	position:absolute;
	color:#fff;
}
.yamenu span {
display:block;margin:10px 10px 10px 10px;
}
.yamenu-sp div:first-child p{background:#000;}
.yamenu-sp div:nth-child(2) p{ background:#666; }
.yamenu-sp div:nth-child(3) p{ background:#999; }

.yamenu p:after{
    content:'';
    border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
    position: absolute;
	top: 30%;
	left: 90%;
}
.yamenu-sp div:first-child p:after{border-left: 20px solid #f00;}
.yamenu-sp div:nth-child(2) p:after{ border-left: 20px solid #f66; }
.yamenu-sp div:nth-child(3) p:after{ border-left: 20px solid #f99; }

矢印型メニュー

DEMO を見る
■ CSS

body{
text-align:center;background:#ddff99;
}
.wrap{
width:90%;margin:200px auto;
}
.yamenu-sp{
	display:block;
	width:100%;
	height:200px;
}
.yamenu{
	display:block;
	width:28%;
	height:200px;
	float:left;
	position:relative;
}
.yamenu p{
 	display:block;float: left;
	width:85%;height:100px;
	text-align: center;
	position:absolute;
	color:#fff;
}
.yamenu span {
display:block;margin:10px 10px 10px 50px;
}
.yamenu-sp div:first-child p{background:#000;}
.yamenu-sp div:nth-child(2) p{ background:#666; }
.yamenu-sp div:nth-child(3) p{ background:#999; }

.yamenu p:after{
    content:'';
    border-top: 100px solid transparent;
	border-bottom: 100px solid transparent;
    position: absolute;
	top: -50%;
	left: 100%;
	z-index: 1;
}
.yamenu-sp div:first-child p:after{border-left: 50px solid #000;}
.yamenu-sp div:nth-child(2) p:after{ border-left: 50px solid #666; }
.yamenu-sp div:nth-child(3) p:after{ border-left: 50px solid #999; }

五角形型 矢印メニュー

DEMO を見る
■ CSS

body{
text-align:center;background:#ddff99;
}
.wrap{
width:90%;margin:200px auto;
}
.yamenu-sp{
	display:block;
	width:100%;
	height:200px;
}
.yamenu{
	display:block;
	width:28%;
	height:200px;
	float:left;
	position:relative;
}
.yamenu p{
 	display:block;float: left;
	width:85%;height:100px;
	text-align: center;
	clip:rect(0px 500px 100px 0px);
	position:absolute;
	color:#fff;
}
.yamenu span {
display:block;margin:10px 10px 10px 50px;
}
.yamenu-sp div:first-child p{background:#000;}
.yamenu-sp div:nth-child(2) p{ background:#666; }
.yamenu-sp div:nth-child(3) p{ background:#999; }

.yamenu p:after{
    content:'';
    border-top: 100px solid transparent;
	border-bottom: 100px solid transparent;
    position: absolute;
	top: -50%;
	left: 100%;
	z-index: 1;
}
.yamenu-sp div:first-child p:after{border-left: 50px solid #000;}
.yamenu-sp div:nth-child(2) p:after{ border-left: 50px solid #666; }
.yamenu-sp div:nth-child(3) p:after{ border-left: 50px solid #999; }

関連記事

フルスクリーンを CSS だけで、vw, vh, vmin, vmax を試してみる(スクロールバーも消したい)

フルスクリーンを CSS だけで、vw, vh, vmin, vmax を試してみる(スクロールバーも消したい)

ビューポートの単位 vw, vh, vmin, vmax CSS で大きさを指定する時、px や

記事を読む

WordPress カレンダー カスタマイズ

WordPress カレンダー カスタマイズ

WordPressでカレンダーの表示部分をいじってみようかと思います。 どうやら、カレンダー関

記事を読む

WordPress カレンダー カスタマイズ

WordPress カレンダー カスタマイズ(add_filter版)

前回、「WordPress の PHP をちょっと見てみよう Ⅲ」でフックをやったので、カレンダーで

記事を読む

日本語対応の オープンソースの美しい フォント Noto Sans CJK が出来たらしい

日本語対応の オープンソースの美しい フォント Noto Sans CJK が出来たらしい

Google Earth が出来た時も、Google ストリートビューが出来た時も、 Google

記事を読む

CSS セレクタ

【CSS セレクタ】その2:擬似クラスセレクタやラジオボタンチェックでフォームの有効無効や枠の色変えたいとか

<今回のピックアップ項目> :link :visited :hover :active :t

記事を読む

繰り返し背景を全面表示してアニメーションする

繰り返し背景を全面表示してアニメーションする

前回の「背景を SVG で全面表示し、パターン化をアニメーションさせる」がSVGの要素を全て対応して

記事を読む

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript でマウスドラッグのテストをしていきます。 分かりやすいように、ボールを投げる

記事を読む

CSS セレクタ

【CSS セレクタ】その1:アスタリスクや属性セレクタとか

CSS3も浸透してきて、細かい所が危うくなってきたので、セレクタを中心に少しおさらいしようかと思いま

記事を読む

CSS 吹き出し

CSS 三角で吹き出しを作る

吹き出しとか三角とかよく使うのに、いちいち調べてどれ使おうかといつもやっていたので、まとめて作ってお

記事を読む

Web フォント とは?

WEBフォントとは? 意図するフォントを表示する技術 Webブラウザは端末にインストールされ

記事を読む

CSS

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

WordPress エラー:Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js
WordPress エラー:Failed to load plugin: table from url https://cdn.tinymce.com/4/plugins/table/plugin.min.js

WordPress エラーの状態 WordPress 管理画面のテキ

wordpress タイトルの変更
WordPress タイトルの変更

テンプレートタグ the_title(); get_the_title

All-in-One WP Migration で サーバ移動
「All-in-One WP Migration」プラグインで 簡単に WordPress のサーバー移行する手順メモ

1.移行元サイトでのデータエクスポート 「All-in-One WP

DNSサーバーとは
ドメインとは?DNSサーバーとは?

ドメインとは? ドメインとは? ドメインとは、インターネット上のネ

javascriptで複数同じ名前のformの値を取得する
javascriptで複数同じ名前のformの値を取得するとエラー Cannot read property ‘value’ of undefined

Javascript で value の値を取得する このようなHT

→もっと見る

    • 202207
      Mon Tue Wed Thu Fri Sat Sun
      123
      45678910
      11121314151617
      18192021222324
      25262728293031
    にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
    にほんブログ村 FC2 Blog Ranking
    PAGE TOP ↑