[Beginner] I tried to decorate the bar after displaying the details of the hamburger menu

* This article was written by a programming beginner. Please point out any mistakes.
This time I will write about how to design a list of navigators when you click on the hamburger menu.

Prerequisites

Define the model name as posts.
The framework is Ruby on Rails.

Bootstrap is a super convenient function that automatically designs the minimum design just by writing HTML. Be sure to write it down!

application.html


<head>
    <title>Any title</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <link href="sp.css" rel="stylesheet" type="text/css" media="screen and (min-width: 992px)" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css">

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>

  <body>
     <main>

     <div class='main-font'>
      <%= yield %>
     </div>
     </main>
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

   
  </body>

① Write HTML

First, create a hamburger menu using Bootstrap article .

index.html


<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

At this stage, I don't think there is a navigator design after clicking the hamburger.

② Apply CSS

7th line of the above code
 <div class="collapse navbar-collapse" id="navbarSupportedContent">

Write CSS in the class of.

posts.scss



@media screen and (max-width: 992px) {
.collapse.navbar-collapse{
    padding: 10%;
    border-radius: 10px 10px 10px 10px;
    background: linear-gradient(white, #cccccc) !important;
    margin: 15%;
    font-size: 1.7rem;
  }
}

@media screen and (max-width: 992px) {
  //For smartphones
  .collapsing.navbar-collapse{
    padding: 10%;
    border-radius: 10px 10px 10px 10px;
    background: linear-gradient(white, #cccccc) !important;
    margin: 15%;
    font-size: 1.7rem;
    
  }
}

Explanation of ②

Q. Even though the class is collapse navbar-collapse Why do I need to write the same properties and values ​​as an undefined selector?
A. The second selector shows the CSS while the display screen is moving. Bootstrap automatically implements a dynamic design, so "when the display screen is moving" and "after the operation after clicking is completed" You have to write it separately. You can check what the selector is in action with
developer tools . I'm sure the class name in action has changed.

Thank you for reading! !!

Recommended Posts

[Beginner] I tried to decorate the bar after displaying the details of the hamburger menu
I tried to summarize the state transition of docker
I tried to decorate the simple calendar a little
05. I tried to stub the source of Spring Boot
I tried to reduce the capacity of Spring Boot
I tried to summarize the basics of kotlin and java
[Swift] I tried to implement the function of the vending machine
I tried to summarize the basic grammar of Ruby briefly
I want to control the display of the upper management navigation bar (Control menu) in Liferay 7 / DXP
I tried to explain the method
I tried to solve the problem of "multi-stage selection" with Ruby
I tried to build the environment of PlantUML Server with Docker
I tried to check the operation of gRPC server with grpcurl
I tried to summarize the methods of Java String and StringBuilder
I tried to solve the problem of Google Tech Dev Guide
I tried to express the result of before and after of Date class with a number line
I tried to summarize the methods used
I tried to summarize the key points of gRPC design and development
Bootstrap4 Change the color of the hamburger menu
I tried to summarize the Stream API
I tried to make full use of the CPU core in Ruby
I tried to visualize the access of Lambda → Athena with AWS X-Ray
I tried to measure and compare the speed of GraalVM with JMH
After all I wanted to preview the contents of mysql with Docker ...
What I tried when I wanted to get all the fields of a bean
I tried to compare the infrastructure technology of engineers these days with cooking.
[Swift] How to change the order of Bar Items in Tab Bar Controller [Beginner]
I want to output the day of the week
I tried to organize the session in Rails
I tried to chew C # (basic of encapsulation)
I want to var_dump the contents of the intent
I tried to set tomcat to run the Servlet.
[AndroidStudio] Change the color of the ActionBarDrawerToggle hamburger menu
I want to truncate after the decimal point
I tried using the profiler of IntelliJ IDEA
I tried to check the operation of http request (Put) with Talented API Tester
I tried to create a log reproduction script at the time of apt install
[Beginner's point of view] I tried to solve the FizzBuzz problem "easily" with Ruby!
I tried to investigate the mechanism of Emscripten by using it with the Sudoku solver
I tried to organize the cases used in programming
I tried using the Server Push function of Servlet 4.0
I tried the new feature profiler of IntelliJ IDEA 2019.2.
I want to know the answer of the rock-paper-scissors app
I want to display the name of the poster of the comment
[WIP] I tried the configuration of Docker + Streama + NFS
I tried to implement the Euclidean algorithm in Java
I want to be aware of the contents of variables!
I want to return the scroll position of UITableView!
I tried to build an environment using Docker (beginner)
I finished watching The Rose of Versailles, so I tried to reproduce the ending song in Java
I tried to solve the Ruby karaoke machine problem (there is an example of the answer)
I tried to make the sample application into a microservice according to the idea of the book "Microservice Architecture".
Since the reading of JdbcCodeList of TERASOLUNA is slow, I tried to register multiple at once.
I tried to touch the asset management application using the emulator of the distributed ledger Scalar DLT
[For Swift beginners] I tried to summarize the messy layout cycle of ViewController and View
I tried to develop the cache function of Application Container Cloud Service in the local environment
I tried to implement the like function by asynchronous communication
[Beginner] I want to modify the migration file-How to use rollback-
I tried to introduce Bootstrap 4 to the Rails 6 app [for beginners]
I tried to increase the processing speed with spiritual engineering
[JDBC] I tried to access the SQLite3 database from Java.