-
Conteúdo Similar
-
Por opl12
Podem me ajudar?
Preciso colocar um menu "DropDown" na "Nav Bar"... mas tô me quebrando hahahaha
o que estou fazendo de errado?
<!DOCTYPE html> <html lang="pt-br"> <head> <!-- Última versão CSS compilada e minificada --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Tema opcional --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Última versão JavaScript compilada e minificada --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <title>::: TESTE :::</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 12px 16px; z-index: 1; } .dropdown:hover .dropdown-content { display: block; } </style> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <!--<img width="80px" height="30" src="#" title="seu texto" vspace="10px"/>--> </div> <ul class="nav navbar-nav"> <li class="nav-item"><a class="nav-link" href="#" target="a_blank">HOME</a></li> <li class="nav-link"><a href="#" target="a_blank">LINK A</a></li> <li class="nav-link"><a href="#" target="a_blank">LINK B</a></li> <li class="nav-link"><a href="#">LINK C</a></li> <li><a href="#">LINK D</a></li> <li><a href="#">LINK E</a></li> <li><a href="#">LINK F</a></li> <li><a href="#" target="a_blank">LINK G</a></li> <div class="dropdown"> <div class="dropdown-content" id="myDropdown"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> User</a></li> <li><a href="#"><span class="glyphicon glyphicon-off" aria-hidden="true" <img title="Deslogar"/> </span>Sair</a></li> </ul> </div> </nav> </body> </html>
-
-
Por ShadowDLL
Olá pessoas,
Estou desenvolvendo um painel responsivo, porém, durante os testes do mesmo encontrei um erro ao abrir o 'navbar',
sendo assim, gostaria de pedir uma ajudinha de vocês se possível...
Bem, vamos lá!
[ Qual o Problema? ]
Ao abrir o 'navbar' na resolução para dispositivos móveis, o conteúdo presente em <div class="one-content"> deveria
ser 'jogado' para a direita sem redimensionar a largura dos itens conforme o 'navbar' é apresentado na tela, porém,
o mesmo está redimensionando a largura dos itens para ajustar-se na tela sem os 'jogar' para a direita...
Vale a pena ressaltar que o conteúdo só deverá ficar com uma parte "oculta" nas resoluções de dispositivos móveis.
[ Imagem do Erro ]
[ Imagem da Solução ]
[ Código com Erro ]
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="one-wrapper"> <div class="one-sidebar"></div> <div class="one-content"> <div class="one-navbar"> <div class="toggle"> <a class="toggle-btn"></a> </div> </div> <div class="container"> <form class="form-inline"> <label class="mr-sm-2" for="inlineFormCustomSelect">Preference</label> <select class="custom-select mb-2 mr-sm-2 mb-sm-0" id="inlineFormCustomSelect"> <option selected>Choose...</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> <span class="custom-control-description">Remember my preference</span> </label> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </div> </div> CSS
@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css'); .one-wrapper { align-items: stretch; display: flex; width: 100%; } .one-sidebar { background-color: #333c4e; transition: all 0.2s; min-width: 250px; max-width: 250px; color: #ffffff; } .one-sidebar.active { margin-left: -250px; } .one-content { background-color: #f0f1f3; align-items: stretch; transition: all 0.2s; min-height: 100vh; color: #666666; width: 100%; } .one-navbar { border-bottom: 1px solid #cccccc; background-color: #ffffff; padding: 10px; width: 100%; } .one-navbar .toggle { padding: 20px; } .one-navbar .toggle a { background: #000000; padding: 20px; } JS
$(function(){ $ ('.toggle-btn').click (function(){ $('.one-sidebar').toggleClass('active'); }); if ($(window).width() < 1000) { $('.one-sidebar').toggleClass('active'); } });
Desde já, agradeço!
-
Por Bruno Godinho
Bom dia!
Alguém pode me ajudar a ajudar um amigo?
Eu estou criando uma pagina para um amigo; o site é gpchaveiro.com.br. Mas quando abro pelo computador ele apesar de simples, está amigável; mas quando abro de qualquer smartphone, a parte superior está com um espaçamento fora do comum, alterando o layout, cortando parte de um slide que vem logo abaixo e, o pior é que quando aperto o menu ele abre as opções, eu escolho, e ele continua na tela, ele não recua.
No HTML (index.html):
<!-- ====================================================
header section -->
<header class="top-header">
<div class="container">
<div class="row">
<div class="col-xs-5 header-logo">
<br>
<a href="index.html"><img src="img/logo.png" alt="" class="img-responsive logo"></a>
</div>
<div class="col-md-7">
<nav class="navbar navbar-default">
<div class="container-fluid nav-bar">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a class="menu active" href="#home" >Home</a></li>
<li><a class="menu" href="#servicos">Serviços</a></li>
<li><a class="menu" href="#localizacao">Localização </a></li>
<li><a class="menu" href="#quemsomos">Quem Somos</a></li>
<li><a class="menu" href="#faleconosco"> Fale Conosco</a></li>
</ul>
</div><!-- /navbar-collapse -->
</div><!-- / .container-fluid -->
</nav>
</div>
</div>
</div>
</header> <!-- end of header area -->
NO CSS (style.css)
.navbar-default {
background-color: transparent;
border-color: transparent;
margin-bottom: 0;
margin-top: 8px;
transition: all .5s ease 0s;
-webkit-transition: all .5s ease 0s;
-moz-transition: all .5s ease 0s;
-o-transition: all .5s ease 0s;
-ms-transition: all .5s ease 0s;
}
.nav-bar {
margin-top: 29px;
}
.navbar-toggle span {
color: #fff;
}
ul.nav {
margin: 0;
padding: 0;
}
.navbar-default .navbar-nav>li>a {
font-size: 24px;
color: #737373;
text-transform: uppercase;
transition: all .7s ease 0s;
-webkit-transition: all .7s ease 0s;
-moz-transition: all .7s ease 0s;
-o-transition: all .7s ease 0s;
-ms-transition: all .7s ease 0s;
padding: 14px 15px;
font-weight: bold;
}
.navbar-default .navbar-nav>li>a:hover {
color: #42b3e5;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #000;
}
li a.active {
color: #42b3e5 !important;
}
.navbar-default .navbar-toggle {
border-color: #fff;
margin-top: 4px;
}
Existem dois sites muito no estilo desse que fiz, e o deles funcionam perfeitamente essa ação via smartphone, não fica com o espaço que o meu fica e uma vez escolhido o link no menu, ele recua: chaveiro24horasajato.com.br e chaveiros24horas.com.br
Alguem consegue me ajudar, por gentileza?!
Agradecendo desde já!
-
.thumb.jpg.6d2448400c07192c7587b7e6a08fa29a.jpg)
Por marcelocardoso
Olá Colegas....
Tenho o código abaixo que funciona perfeitamente, fiz algumas modificações no CSS e também no JQUERY, segue abaixo...
O PROBLEMA é que ao dar um refresh na página, F5 no brownser, ele como DEFAULT se perde o background, ficando TRANSPARENT.
1) Que é o modo que ele deve começar;
2) Mas como ele muda após se o window for maior >=20, no jquery;
3) Ao dar refresh, dependendo do lugar da página, ele deveria ficar o mesmo, mas fica sempre transparente;
CODIGO HTML
<nav class="navbar navbar-light navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar_menu" aria-expanded="false"> <span class="fa fa-bars"></span> </button> <a href="http://" class="navbar-brand brand-centered"> <img src="img/logo.png" class="img-responsive"> </a> </div> <div class="collapse navbar-collapse" id="navbar_menu"> <ul class="nav navbar-nav navbar-right"> <li><a href="#mn_empresa">EMPRESA</a></li> <li><a href="#mn_clientes">CLIENTES</a></li> <li><a href="#mn_formulario">CONTATO</a></li> </ul> </div> </div> </nav>
CODIGO CSS
/* NAVBAR */ .navbar { padding-top: 5px; padding-bottom: 12px; background-color: transparent; margin: 0px; color: #333; transition: all 0.3s; z-index: 9999; -webkit-box-shadow: 0px 0px 5px -1px rgba(171, 171, 171, 1); -moz-box-shadow: 0px 0px 5px -1px rgba(171, 171, 171, 1); box-shadow: 0px 0px 5px -1px rgba(171, 171, 171, 1); } /* NAVBAR - efeito simples dos itens do menu */ .navbar-nav a, .navbar-nav a.active { color: #00224b !important; background-color: transparent; font-size: 15px; font-weight: 600; width: 100%; -moz-transition: all .3s; -o-transition: all .3s; -webkit-transition: all .3s; transition: all .3s; } .navbar-nav li a:hover, .navbar-nav li.active a { color: #f4511e !important; background-color: white; font-weight: 600; width: 100%; } /* NAVBAR - toggle button */ .navbar-light .navbar-toggle { border: none; border-radius: 40px; width: 40px; height: 40px; font-size: 20px; z-index: 12; background-color: dodgerblue; color: white; cursor: pointer; -moz-transition: all .8s; -o-transition: all .8s; -webkit-transition: all .8s; transition: all .8s; } .navbar-light .navbar-toggle:hover { background-color: #f6761c; border-radius: 40px 0px 40px 40px; color: white; } /* NAVBAR - mudanças jquery */ .navbar-brand.nav_corlogo { height: auto; filter: brightness(0) invert(1) !important; } .navbar-nav.nav_cormenu a, .navbar-nav.nav_cormenu a.active { color: white !important; } .navbar-nav.nav_cormenu li a:hover, .navbar-nav.nav_cormenu li.active a { color: #ff9326 !important; background-color: transparent; } .navbar.nav_sombra { -webkit-box-shadow: 0px 2px 12px -1px rgba(31, 31, 31, 0.39); -moz-box-shadow: 0px 2px 12px -1px rgba(31, 31, 31, 0.39); box-shadow: 0px 2px 12px -1px rgba(31, 31, 31, 0.39); border-bottom: 2px solid rgba(118, 0, 191, 0.56); } .navbar.nav_comprime { padding-top: 10px; padding-bottom: 10px; background: #002a5c; color: white; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5); -moz-transition: all .4s; -o-transition: all .4s; -webkit-transition: all .4s; transition: all .4s; } .navbar.nav_slide { background-color: transparent !important; } /* NAVBAR - config do logotipo imagem e logo texto */ .navbar-brand { padding: 4px; position: absolute; font-size: 1.25rem; white-space: nowrap; } .navbar-brand>img { padding: 0px; width: 16%; } .navbar-brand:focus, .navbar-brand:hover { text-decoration: none; color: white }
CODIGO JQUERY
$(function () { $(window).on('scroll', function () { if ($(this).scrollTop() >= 20) { $('.navbar').addClass('nav_comprime'); $('.navbar').addClass('nav_sombra'); $('.navbar-nav').addClass('nav_cormenu'); $('.navbar-brand').addClass('nav_corlogo'); } else { $('.navbar').removeClass('nav_comprime'); $('.navbar').removeClass('nav_sombra'); $('.navbar-nav').removeClass('nav_cormenu'); $('.navbar-brand').removeClass('nav_corlogo'); } }); $('.navbar a').on('click', function () { if (window.innerWidth <= 768) { $('.navbar-toggle').trigger("click"); } }); //função que troca em resoluções menores o logotipo $(window).resize(function () { if ($(window).width() < 481) { $('#logotipo').attr('src', '../site/img/simbolo.png'); } else { $('#logotipo').attr('src', '../site/img/logo_-_original.png'); } }); $(".navbar a, footer a[href='#wrapper']").on("click", function (event) { event.preventDefault(); var hash = this.hash; $("html, body").animate({ scrollTop: $(hash).offset().top }, 800, function () { window.location.hash = hash; }); }); }); Se conseguirem me dar uma luz, agradeço.
Posso estar errando no CSS ou JQUERY.
Obrigado.
-
