簡単にレスポンシブメニューを作成

簡単にレスポンシブメニューを作成

2019.05.10

レスポンシブWebサイトを作成する際には、多くの人が Bootstrap で作ります 。たまにBootstrap で使用するのは面倒くさい事になります。例えば、メニューは、Webサイトの上部ではなく、そして、画面上合わせて大きくしたりして、Bootstrapで結構難しいものです。

コードCSS style.cssファイル
ul{

        display:block;

}

li{

    display:inline-block;

    float:left;

    width:20%;

    background-color:#33FF66;

    text-align:center;

}

li:hover{

    background-color:#F90;

}

.menu{display:none; cursor:pointer; background-color:#333; width:30px;}

.navigation{width:80%; margin-left:auto; margin-right:auto;}

@media(max-width:768px){

    span.menu{display:block;}

    li{    width:100%;}

    ul{

        display:none;

    }

}

@media(max-width:1500px){

    ul{

        display:block;

    }

    .menu{display:none;}

}

 


コードHTML index.htmlファイル
<!DOCTYPE HTML>

<html>

<head>

<title></title>

<link href=”css/bootstrap.css” rel=”stylesheet” type=”text/css” media=”all”>

<link href=”css/style.css” rel=”stylesheet” type=”text/css” media=”all”/>

<script src=”js/jquery-1.11.0.min.js”></script>

</head>

<body>

                <div class=”navigation”>

                    <span class=”menu”><img src=”images/icon.png” alt=””/></span>

                    <ul class=”res” >

                        <li><a href=”index.html” class=”active hvr-sweep-to-bottom”>Home</a></li> 

                        <li><a class=”hvr-sweep-to-bottom” href=”about.html”>About</a></li>  

                        <li><a class=”hvr-sweep-to-bottom” href=”typo.html”>News</a></li>

                        <li><a class=”hvr-sweep-to-bottom” href=”gallery.html”>Gallery</a></li> 

                        <li><a class=”hvr-sweep-to-bottom” href=”contact.html”>Contact</a></li> 

                     </ul>

                     <div class=”clearfix”></div>

                     <script>

                       $( “span.menu” ).click(function() {

                         $( “ul.res” ).slideToggle( 300, function() {

                         });

                         });

                    </script>

                </div>

            

</body>

</html>


Top