Can you create a menu from an image?

Question

Suppose I’m creating a website, and I put this image icon, and when I click on that image, open a menu, it’s like?

Ex;

I’m sorry if this is too obvious, but I only saw menus with lists, I researched and I couldn’t find one that looked like this.

Answer 1

This is an icon used to indicate the existence of a menu, which can be easily applied in your project using the Bootstrap css framework.

Bootstrap is a css you add to your project. It contains several standard css rule definitions to style various html components.

This is a widely used framework in the market.

By default, on a website, we display the menu completely, however, when the screen of the device that is displaying this site does not have a size suitable for the full display of the menu, we apply the display of this icon, to indicate the existence of a menu, so that when the icon is triggered, the menu items will be displayed vertically for better user view.

See the examples:

1 - Full menu in standard view (horizontal).

2 - Menu deprecated indicated by the existence of the list icon.

3 - Menu (vertical) displayed after clicking the icon.

It is important to understand that the menu icon display is either not automatically applied by Bootstrap, as long as you follow the classes defined in this framework for creating your menu.

This behavior of displaying the icon according to the device’s screen size is what we call a responsive layout. Bootstrap applies layouts to other elements using the same concept.

If you want to study more about Bootstrap, see the link: Bootstrap Framework

If you wanted to work with the cited example, see the link: Example Menu with Bootstrap

If you’re testing the Bootstrap example and wanted to simulate the display on a mobile device, simply lower your browser screen or use Chrome mobile mode debugging.

On the example page, you can view the menu in your browser and also check the html, css and javascript codes used.

Answer 2

There is, and you don’t even have to create an image for that. Using Fontawesome vc has hundreds of icones q vc can use in the applications, and with boostrap vc has médodos to make the menu without having to break your head too much.

Take an example:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h4 class="text-white">Collapsed content</h4>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>