- Падащо хоризонтално меню
WT форуми -> HTML / Javascript / CSS -> Падащо хоризонтално меню
Създайте нова тема Напишете отговор 
Автор Съобщение
Ticketa
Турист
Турист

Регистриран на: 27/02/2012 3:54 pm

Support: 23
Bonus: 46
Мнения: 274
Мнение 25/11/2018 7:13 pm     Падащо хоризонтално меню Отговорете с цитат


Привет,
някой има ли представа това хоризонтално падащо меню как се нарича и от къде мога да го намеря?

https://www.urbansplash.co.uk/

Прегледах различни варианти: push navigation horizontal menu , navigation horizontal full-screen и т.н. обаче, не са от този тип?

ЕДИТ:
Намерих този вариант, но като че ли "падането" от горе надолу не е същото?

HTML code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
body{background:#f9f9f9;
font-family: 'Open Sans', sans-serif;
font-weight: normal;
font-size: 12px;}
#wrapper{padding:90px 15px;}
.navbar-expand-lg .navbar-nav.side-nav{flex-direction: column;}
.card{margin-bottom: 15px; border-radius:0; box-shadow: 0 3px 5px rgba(0,0,0,.1); }
.header-top{box-shadow: 0 3px 5px rgba(0,0,0,.1)}
.leftmenutrigger{display: none}
@media(min-width:992px) {
.leftmenutrigger{display: block;display: block;margin: 7px 20px 4px 0;cursor: pointer;}
#wrapper{padding: 90px 15px 15px 15px; }
.navbar-nav.side-nav.open {top:55px;}
.navbar-nav.side-nav{
background: #585f66;
box-shadow: 2px 1px 2px rgba(0,0,0,.1);
position:fixed;
left:0;
flex-direction: column!important;
top:-120px;
width:100%;
overflow-y:auto;overflow-x:hidden;
}
}
.animate{-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
</style>
<!-- Bootstrap CSS -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<script>$( document ).ready(function() {
$('.leftmenutrigger').on('click', function(e) {
$('.side-nav').toggleClass("open");
e.preventDefault();
});
});</script>
</head>
<body>

<div id="wrapper" class="animate">
<nav class="navbar header-top fixed-top navbar-expand-lg navbar-dark bg-dark">
<span class="navbar-toggler-icon leftmenutrigger"></span>
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav animate side-nav">
<li class="nav-item">
<a class="nav-link" href="#">Начало
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Side Menu Items</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<ul class="navbar-nav ml-md-auto d-md-flex">
<li class="nav-item">
<a class="nav-link" href="#">Начало
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Top Menu Items</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Try Other</h5>
<h6 class="card-subtitle mb-2 text-muted">Bootstrap 4.0.0 Snippet by pradeep330</h6>
<p class="card-text">You can also try different version of Bootstrap V4 side menu. Click below link to view all Bootstrap Menu versions.</p>
<a href="https://bootsnipp.com/pradeep330" class="card-link">link</a>
<a href="http://websitedesigntamilnadu.com" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Try Other</h5>
<h6 class="card-subtitle mb-2 text-muted">Bootstrap 4.0.0 Snippet by pradeep330</h6>
<p class="card-text">You can also try different version of Bootstrap V4 side menu. Click below link to view all Bootstrap Menu versions.</p>
<a href="https://bootsnipp.com/pradeep330" class="card-link">link</a>
<a href="http://websitedesigntamilnadu.com" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Try Other</h5>
<h6 class="card-subtitle mb-2 text-muted">Bootstrap 4.0.0 Snippet by pradeep330</h6>
<p class="card-text">You can also try different version of Bootstrap V4 side menu. Click below link to view all Bootstrap Menu versions.</p>
<a href="https://bootsnipp.com/pradeep330" class="card-link">link</a>
<a href="http://websitedesigntamilnadu.com" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Try Other</h5>
<h6 class="card-subtitle mb-2 text-muted">Bootstrap 4.0.0 Snippet by pradeep330</h6>
<p class="card-text">You can also try different version of Bootstrap V4 side menu. Click below link to view all Bootstrap Menu versions.</p>
<a href="https://bootsnipp.com/pradeep330" class="card-link">link</a>
<a href="http://websitedesigntamilnadu.com" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Try Other</h5>
<h6 class="card-subtitle mb-2 text-muted">Bootstrap 4.0.0 Snippet by pradeep330</h6>
<p class="card-text">You can also try different version of Bootstrap V4 side menu. Click below link to view all Bootstrap Menu versions.</p>
<a href="https://bootsnipp.com/pradeep330" class="card-link">link</a>
<a href="http://websitedesigntamilnadu.com" class="card-link">Another link</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Try Other</h5>
<h6 class="card-subtitle mb-2 text-muted">Bootstrap 4.0.0 Snippet by pradeep330</h6>
<p class="card-text">You can also try different version of Bootstrap V4 side menu. Click below link to view all Bootstrap Menu versions.</p>
<a href="https://bootsnipp.com/pradeep330" class="card-link">link</a>
<a href="http://websitedesigntamilnadu.com" class="card-link">Another link</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>

</body>
</html>
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
teroristd
Редовен
Редовен

Регистриран на: 18/02/2010 1:50 pm

Support: 83
Bonus: 178
Мнения: 1747
Мнение 26/11/2018 1:52 pm      Отговорете с цитат


Според мен е ето такова https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_overlay2

Трябва да си направиш някои настройки за да стане същото като в сайта който си дал. Например z-index, също да не е прозрачно и да се отваря и затваря от един и същи бутон и т.н.

Малко ако си поиграеш и ще стане точно същото.
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
Ticketa
Турист
Турист

Регистриран на: 27/02/2012 3:54 pm

Support: 23
Bonus: 46
Мнения: 274
Мнение 27/11/2018 10:35 am      Отговорете с цитат


Аз долу горе го направих. Въпроса, е че при мен тръгва от началото на страницата да пада, а искам падането да започне от под navbar-а. Laughing
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
teroristd
Редовен
Редовен

Регистриран на: 18/02/2010 1:50 pm

Support: 83
Bonus: 178
Мнения: 1747
Мнение 27/11/2018 3:03 pm      Отговорете с цитат


Това е лесно. На overlay му задаваш top да е толкова пиксела колкото ти е navbar-а.

.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 100px;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
Ticketa
Турист
Турист

Регистриран на: 27/02/2012 3:54 pm

Support: 23
Bonus: 46
Мнения: 274
Мнение 27/11/2018 8:03 pm      Отговорете с цитат


Не ми се получава нещо:
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">

<title>Bootstrap V4 Side Nave with Blocker (Responsive) - Bootsnipp.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<style type="text/css">
@font-face {
font-family:UniversLTStd-Light;
src:url("./fonts/UniversLTStd-Light/UniversLTStd-Light.woff") format("woff")
}
@font-face {
font-family:UniversLTStd;
src:url("./fonts/UniversLTStd/UniversLTStd.woff") format("woff")
}
@font-face {
font-family:UrbanSplashLight-Regular;
src:url("./fonts/UrbanSplashLight-Regular/UrbanSplashLight-Regular.woff") format("woff")
}
@font-face {
font-family:UrbanSplashMedium-Regular;
src:url("./fonts/UrbanSplashMedium-Regular/UrbanSplashMedium-Regular.woff") format("woff")
}
body{background:#f9f9f9;
font-family: UrbanSplashLight-Regular,Arial,sans-serif;}
#wrapper{padding:90px 15px;}
.navbar-expand-lg .navbar-nav.side-nav{flex-direction: column;}
.card{margin-bottom: 15px; border-radius:0; box-shadow: 0 3px 5px rgba(0,0,0,.1); }
.header-top{box-shadow: 0 3px 5px rgba(0,0,0,.1)}
.leftmenutrigger,.blocker{display: none}
.navbar {
text-transform: uppercase;
font-family: UrbanSplashMedium-Regular,Arial,sans-serif;
letter-spacing: .11px;
font-size: 16px;
padding-top: 5px;
}
@media(min-width:992px) {
.leftmenutrigger{display: block;display: block;margin: 7px 20px 4px 0;cursor: pointer;}
#wrapper{padding: 90px 15px 15px 15px; }
.blocker {position: fixed;top: 0;right: 0; bottom: 0; left: 0;background: rgba(0, 0, 0, 0.4);z-index: 5;display: none}
.blocker.open {display: block}

.navbar-nav.side-nav.open {top:53px;}
.navbar-nav.side-nav{
background: #f3f3f3;
box-shadow: 2px 1px 2px rgba(0,0,0,.1);
position:fixed;
left:0;
flex-direction: column;
top:-550px;
width:100%;
padding: 30px;
overflow-y:auto;overflow-x:hidden;
}
}
@media(max-width:800px) {
.side-nav {
display: none;
}
}
.navbar-nav.side-nav h1 {
font-size: 19px;
color: #919394;
}
a.navlinkblue {
background-color:#0073c4;
color:#fff !important;
padding:19px;
font-size: 17px;
padding-right: 50px !important;
padding-left: 50px !important;
}
a.navlinkblue:hover {
background-color:#114e74;
}
a.hover_enquiry {
padding: 20px;
background-color: #222729;
border-color: #222729;
color: #fff;
-webkit-transition: all .4s;
transition: all .4s;
clear:both;
margin:0 auto;
}
a.hover_enquiry:hover {
background-color: #919394;
border-color: #919394;
}
.side-nav .c-main-menu__arrow {
margin-left: 18px;
width: 24px;opacity: 0.2;
}
.side-nav .nav-item .c-main-menu__arrow:hover {
opacity: 1;
}
.animate{-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
window.alert = function(){};
var defaultCSS = document.getElementById('bootstrap-css');
function changeCSS(css){
if(css) $('head > link').filter(':first').replaceWith('<link rel="stylesheet" href="'+ css +'" type="text/css" />');
else $('head > link').filter(':first').replaceWith(defaultCSS);
}
$( document ).ready(function() {
var iframe_height = parseInt($('html').height());
window.parent.postMessage( iframe_height, 'https://bootsnipp.com');
});
</script>
</head>
<body>
<div id="wrapper" class="animate">
<nav class="navbar header-top fixed-top navbar-expand-lg navbar-light bg-white">
<span class="navbar-toggler-icon leftmenutrigger"></span>
<a class="navbar-brand" href="#"><img src="https://www.urbansplash.co.uk/images/urbansplash-logo-black.svg"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav animate side-nav">
<div class="container">
<div class="row">
<div class="col-sm">
<h1>Main menu</h1>
<li class="nav-item">
<a class="nav-link" href="#">About us <img src="./images/arrow-right-black.svg" class="c-main-menu__arrow"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services <img src="./images/arrow-right-black.svg" class="c-main-menu__arrow"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Work <img src="./images/arrow-right-black.svg" class="c-main-menu__arrow"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Careers <img src="./images/arrow-right-black.svg" class="c-main-menu__arrow"></a>
</li>
</div>
<div class="col-sm">
<h1>Contact</h1>
<p>
Timber Wharf<br />
16-22 Worsley Street<br />
Castlefield<br />
Manchester M15 4LD<br />
<b>+44 (0) 161 839 2999</b><br />
enquiries@urbansplash.co.uk
</p>
<p>
<a href="#" class="hover_enquiry">General Enquiry</a></p>
</div>
</div>
</div>
</ul>
<ul class="navbar-nav d-md-flex">
<li class="nav-item">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Careers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<ul class="navbar-nav ml-md-auto d-md-flex" style="margin-top: -15px;margin-bottom:-9px;margin-right:-20px;">
<li class="nav-item">
<a class="nav-link navlinkblue" href="#">ASK FOR OFFER</a>
</li>
</ul>
</div>
</nav>
<div class="blocker"></div>
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Try Other</h5>
<h6 class="card-subtitle mb-2 text-muted">Bootstrap 4.0.0 Snippet by pradeep330</h6>
<p class="card-text">You can also try different version of Bootstrap V4 side menu. Click below link to view all Bootstrap Menu versions.</p>
<a href="https://bootsnipp.com/pradeep330" class="card-link">link</a>
<a href="http://websitedesigntamilnadu.com" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Try Other</h5>
<h6 class="card-subtitle mb-2 text-muted">Bootstrap 4.0.0 Snippet by pradeep330</h6>
<p class="card-text">You can also try different version of Bootstrap V4 side menu. Click below link to view all Bootstrap Menu versions.</p>
<a href="https://bootsnipp.com/pradeep330" class="card-link">link</a>
<a href="http://websitedesigntamilnadu.com" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Try Other</h5>
<h6 class="card-subtitle mb-2 text-muted">Bootstrap 4.0.0 Snippet by pradeep330</h6>
<p class="card-text">You can also try different version of Bootstrap V4 side menu. Click below link to view all Bootstrap Menu versions.</p>
<a href="https://bootsnipp.com/pradeep330" class="card-link">link</a>
<a href="http://websitedesigntamilnadu.com" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Try Other</h5>
<h6 class="card-subtitle mb-2 text-muted">Bootstrap 4.0.0 Snippet by pradeep330</h6>
<p class="card-text">You can also try different version of Bootstrap V4 side menu. Click below link to view all Bootstrap Menu versions.</p>
<a href="https://bootsnipp.com/pradeep330" class="card-link">link</a>
<a href="http://websitedesigntamilnadu.com" class="card-link">Another link</a>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Try Other</h5>
<h6 class="card-subtitle mb-2 text-muted">Bootstrap 4.0.0 Snippet by pradeep330</h6>
<p class="card-text">You can also try different version of Bootstrap V4 side menu. Click below link to view all Bootstrap Menu versions.</p>
<a href="https://bootsnipp.com/pradeep330" class="card-link">link</a>
<a href="http://websitedesigntamilnadu.com" class="card-link">Another link</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Try Other</h5>
<h6 class="card-subtitle mb-2 text-muted">Bootstrap 4.0.0 Snippet by pradeep330</h6>
<p class="card-text">You can also try different version of Bootstrap V4 side menu. Click below link to view all Bootstrap Menu versions.</p>
<a href="https://bootsnipp.com/pradeep330" class="card-link">link</a>
<a href="http://websitedesigntamilnadu.com" class="card-link">Another link</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div> <script type="text/javascript">
$( document ).ready(function() {
$('.leftmenutrigger').on('click', function(e) {
$('.side-nav').toggleClass("open");
$('.blocker').toggleClass("open");
e.preventDefault();
});
}); </script>
</body>
</html>
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
Revelation
Потребител
Потребител

Регистриран на: 24/03/2013 3:23 pm

Support: 54
Bonus: 108
Мнения: 699
Мнение 28/11/2018 12:09 am      Отговорете с цитат


По-лесно е да пускаш кода в codepen или jsfiddle вместо тук. По-бързо ще ти се обърне внимание и ще има готов код, който да се тества.
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
Покажи мнения от преди:    
Създайте нова тема   Напишете отговор    web-tourist.net Форуми -> HTML / Javascript / CSS Часовете са според зоната GMT + 2 Часа
Страница 1 от 1


 
Идете на:  
Не Можете да пускате нови теми
Не Можете да отговаряте на темите
Не Можете да променяте съобщенията си
Не Можете да изтривате съобщенията си
Не Можете да гласувате в анкети