HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/5-3-11.css">

body内のテキストナビゲーションを表示させたい場所に以下のHTMLを記載します。

<ul class="gnavi">
	<li class="current"><a href="#"><span>Home</span></a></li><!--現在地にはcurrentクラスを付ける-->
	<li><a href="#"><span>About</span></a></li>
	<li><a href="#"><span>Service</span></a></li>
	<li><a href="#"><span>Contact</span></a></li>
</ul>

CSSの書き方

/*==================================================
共通　横並びのための設定
===================================*/
.gnavi{
	display: flex;
	flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
	margin:0 0 50px 0;
	list-style: none;
}

.gnavi li a{
	display: block;
	padding:10px 30px;
	text-decoration: none;
	color: #333;
}


/*==================================================
　5-3-11 左右から線が伸びて枠線になる
===================================*/

.gnavi li{
	/*線の基点とするためrelativeを指定*/
	position: relative;
	margin:0 10px;
}

/*線の基点位置*/
.gnavi li::before,
.gnavi li::after{
	content:"";

	/*絶対配置で線の位置を決める*/
	position: absolute;

	/*線の形状*/
	width: 0;
	height:2px;
	background:#0481A2;

	/*アニメーションの指定*/
	transition: all 0.2s linear;
	transition-delay: 0.2s;
}

.gnavi li::before{
	right: 0;
	top: 0;
}

.gnavi li::after{
	left: 0;
	bottom: 0;
}

/*線の基点位置2 spanタグ*/
.gnavi li span{
	display: block;
}

.gnavi li span::before,
.gnavi li span::after{
	content:"";

	/*絶対配置で線の位置を決める*/
	position: absolute;

	/*線の形状*/
	width:2px;
	height:0;
	background: #0481A2;

	/*アニメーションの指定*/
	transition: all 0.2s linear;
}

.gnavi li span::before{
	left: 0;
	top: 0;
}

.gnavi li span::after{
	right: 0;
	bottom: 0;
}

/*現在地とhoverした際の線の変化*/
.gnavi li.current::before,
.gnavi li.current::after,
.gnavi li:hover::before,
.gnavi li:hover::after{
	width: 100%;/*横幅を100%に*/
}

.gnavi li.current span::before,
.gnavi li.current span::after,
.gnavi li:hover span::before,
.gnavi li:hover span::after{
	height: 100%;/*縦幅を100%に*/
}

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/5-3-10.css">

body内のテキストナビゲーションを表示させたい場所に以下のHTMLを記載します。

<ul class="gnavi">
	<li class="current"><a href="#"><span>Home</span></a></li><!--現在地にはcurrentクラスを付ける-->
	<li><a href="#"><span>About</span></a></li>
	<li><a href="#"><span>Service</span></a></li>
	<li><a href="#"><span>Contact</span></a></li>
</ul>

CSSの書き方

/*==================================================
共通　横並びのための設定
===================================*/

gnavi{
	display: flex;
	flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
	margin:0 0 50px 0;
	list-style: none;
}

.gnavi li a{
	display: block;
	padding:10px 30px;
	text-decoration: none;
	color: #333;
}


/*==================================================
　5-3-10 線が伸びて枠線になる
===================================*/

.gnavi li{
	/*線の基点とするためrelativeを指定*/
	position: relative;
	margin:0 10px;
}

/*線の基点位置*/
.gnavi li::before,
.gnavi li::after{
	content:"";

	/*絶対配置で線の位置を決める*/
	position: absolute;
	background:#0481A2;

	/*線の形状*/
	width: 0;
	height:2px;

	/*アニメーションの指定*/
	transition: all 0.2s linear;
}

.gnavi li::before{
	right: 0;
	bottom: 0;
}

.gnavi li::after{
	left: 0;
	top: 0;
}

/*線の基点位置2 spanタグ*/
.gnavi li span{
	display: block;
}

.gnavi li span::before,
.gnavi li span::after{
	content:"";

	/*絶対配置で線の位置を決める*/
	position: absolute;
	background: #0481A2;

	/*線の形状*/
	width:2px;
	height:0;

	/*アニメーションの指定*/
	transition: all 0.1s linear;
}

.gnavi li span::before{
	left: 0;
	bottom: 0;
}

.gnavi li span::after{
	right: 0;
	top: 0;
}

/*現在地とhoverした際の線の変化*/
.gnavi li.current::before,
.gnavi li.current::after,
.gnavi li:hover::before,
.gnavi li:hover::after{
	width: 100%;
}

.gnavi li:hover::after{
	transition-delay: 0s;/*すぐ線を出現させる*/
}

.gnavi li:hover::before{
	transition-delay: 0.3s;/*線の出現を0.3秒遅らせる*/
}

.gnavi li.current span::before,
.gnavi li.current span::after,
.gnavi li:hover span::before,
.gnavi li:hover span::after{
	height: 100%;
}

.gnavi li:hover span::before{
	transition-delay: 0.5s;/*線の出現を0.5秒遅らせる*/
}

.gnavi li:hover span::after{
	transition-delay: 0.2s;/*線の出現を0.2秒遅らせる*/
}

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/5-3-9.css">

body内のテキストナビゲーションを表示させたい場所に以下のHTMLを記載します。

<ul class="gnavi">
	<li class="current"><a href="#"><span>Home</span><span>ホーム</span></a></li><!--現在地にはcurrentクラスを付ける-->
	<li><a href="#"><span>About</span><span>私たちについて</span></a></li>
	<li><a href="#"><span>Service</span><span>サービス</span></a></li>
	<li><a href="#"><span>Contact</span><span>お問い合わせ</span></a></li>
</ul>

CSSの書き方

/*==================================================
共通　横並びのための設定
===================================*/

.gnavi{
	display: flex;
	flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
	margin:0 0 50px 0;
	list-style: none;
}

.gnavi li a{
	display: block;
	text-decoration: none;
	color: #333;
}

.gnavi li{
	margin-bottom:20px;
}

/*==================================================
　5-3-9 テキストが入れ替わる
===================================*/

.gnavi li a{
	/*テキストの基点とするためrelativeを指定*/
	position: relative;

	/*はみ出る要素を隠す*/
	overflow: hidden;
	padding:10px 60px;
}

.gnavi li span{
	/*絶対配置でテキストの位置を決める*/
	position: absolute;
	left: 50%;
	top:0;

	/*アニメーションの指定*/
	transition: all .5s;
	transform: translate(-50%, 0);/*X方向に-50% ※中央寄せにするため*/

	/*ブロック要素にして透過なし、テキスト折り返しなし*/  
	display: block;
	opacity:1;
	white-space: nowrap;
}

/*差し替わるテキストの設定*/
.gnavi li span:nth-child(2){
	opacity:0;/*透過0に*/
	transform: translate(-50%,100%);/*X方向に-50% Y方向に100%*/
}

/*hoverするとテキストが入れ替わる設定*/
.gnavi li:hover span:nth-child(1){
	opacity:0;/*透過0に*/
	transform: translate(-50%,-100%);/*X方向に-50% Y方向に-100%*/
}

.gnavi li:hover span:nth-child(2){
	opacity:1;/*不透明に*/
	transform: translate(-50%, 0);/*X方向に-50% Y方向に0*/
}