ナビゲーションヘッダー作成

ナビゲーションヘッダー作成する。

https://atom.io/

ナビゲーションの土台を作成

.navigation {
    background-color: #584b4f;
    color: #efeae1;
    height: 43px;
}

import React from 'react';
import './AtomPage.css';

export const AtomPage = () => {
    return (
        <>
            <nav className="navigation">
                
            </nav>
        </>
    )
}

↓こうなる

メニューの作成

.wrapper {
    margin: 0 auto;
}

import React from 'react';
import './AtomPage.css';

export const AtomPage = () => {
    return (
        <>
            <nav className="navigation">
                <div className="wrapper">
                    <ul>
                        <li>Hoge</li>
                        <li>Fuga</li>
                        <li>Piyo</li>
                    </ul>
                </div>
            </nav>
        </>
    )
}

↓こうなる

メニューを横並びにする

・ul要素をinline-blockにすることで横並びにする

.navigation {
    background-color: #584b4f;
    height: 43px;
    padding: 5px 0;
    font-size: 14px;
}

.wrapper {
    margin: 0 auto;
    width: 860px;
}

.navigation ul {
    display : inline-block;
    padding: 0;
    margin: 0;
}

.navigation li {
    display : inline-block;
    padding-right: 10px;
}

.navigation a {
    display: inline-block;
    padding: 5px;
    text-decoration: none;
    color: #efeae1;
}

import React from 'react';
import './AtomPage.css';

export const AtomPage = () => {
    return (
        <>
            <nav className="navigation">
                <div className="wrapper">
                    <ul>
                        <li><a href="">Hoge</a></li>
                        <li><a href="">Fuga</a></li>
                        <li><a href="">Piyo</a></li>
                    </ul>
                </div>
            </nav>
        </>
    )
}

右側にSign inボタンつける

・右側用のdivにfloat: rightをつけることで右端まで要素が移動する

.navigation-right {
    float: right;
}

.navigation-right a {
    padding: 5px;
    text-decoration: none;
    color: efeae1;
}

import React from 'react';
import './AtomPage.css';

export const AtomPage = () => {
    return (
        <>
            <nav className="navigation">
                <div className="wrapper">
                    <ul>
                        <li><a href="">Hoge</a></li>
                        <li><a href="">Fuga</a></li>
                        <li><a href="">Piyo</a></li>
                    </ul>

                    <div className="navigation-right">
                        <a href="">Sign in</a>
                    </div>
                </div>
            </nav>
        </>
    )
}