How to turn list into responsive menu?

Question

How to turn list into responsive menu?

Navigation

#1 by (0 votes)

2

I'm having trouble making the list below into a responsive menu, something like Bootstrap's responsible navbar. I want to keep the current style of the menu, but let it behave just like Bootstrap's responsible navbar, which picks up the menu for a clickable button. Here is the list:

<nav>
    <div class="container">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-2 logo">
                    <h1><i class="fa fa-cogs"></i> Fábio Soluções</h1>
                </div>
                <div class="col-md-10">
                    <ul class="nav justify-content-end">
                        <li class="nav-item">
                            <a class="nav-link active" href="#">Inicio</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link scrollPage" href="#experiencia">Experiência</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link scrollPage" href="#projetos">Projetos</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link scrollPage" href="#contato">Contato</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav>

I'm using: v4.0.0-beta.2 and jQuery 3.2.1

Current site: www.fabiojanio.com/site_teste

Download file: www.fabiojanio.com/site_teste/src.zip

html css bootstrap

asked by anonymous 21.11.2017 / 19:13

1 answer

How to extract the face of an RG document from a scanned image Texts style of EditText - Underline on ZigZag

score 0 · Answer 1

You can do the following.

HTML: (link in your head rel link)

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 

<nav>
<div class="container">
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-2 logo">
                <h1><i class="fa fa-cogs"></i> Fábio Soluções</h1>
            </div>
            <button class="btn-menu"> <i class="fa fa-bars fa-2x" aria-hidden="true"></i> </button>
            <div class="col-md-10 menu">
                <a class="btn-close"><img src="FOTO DO BOTÃO 'X' PARA FECHAR"></a>
                <ul class="nav justify-content-end">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Inicio</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link scrollPage" href="#experiencia">Experiência</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link scrollPage" href="#projetos">Projetos</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link scrollPage" href="#contato">Contato</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

JS

    $(".btn-menu").click(function(){
$(".menu").show();
});
$(".btn-close").click(function(){
$(".menu").hide();
});
$(".fotodomenuz").click(function(){
$(".menu").show();
});

CSS

.menu {
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(0,0,0,0.9);
top: 0;
left: 0;
display: none;
z-index: 999;
}

.btn-menu {
width: 50px;
height: 50px;
float: right;
text-align: center;
cursor: pointer;
background-color: transparent;
border: solid 0px transparent;
margin-top: -52px;
margin-right: 7%;
font-size: 1em;
}

.btn-close {
float: right;
cursor: pointer;
margin-right: 1%;
margin-top: 1%;
}

Remember, you should put this in your css / @query where you want the menu to appear. With this, if you substitute correctly in your project, you will be able to make the menu look like this:

Any questions, just ask.