public/front
3
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Files
e54f6110bcea7d1631d622fa02c5bcd58d672327
front/src/snippets/navbar-right-aligned.html
dzieko e54f6110bc front v4.1
2021-12-28 13:34:18 +01:00

364 lines
21 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required Meta Tags Always Come First -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Title -->
<title>Right Aligned Navbar - Snippets | Front - Multipurpose Responsive Template</title>
<!-- Favicon -->
<link rel="shortcut icon" href="@@autopath/favicon.ico">
<!-- Font -->
<link href="@@vars.themeFont" rel="stylesheet">
<!-- CSS Implementing Plugins -->
<!-- bundlecss:vendor [@@autopath] -->
<link rel="stylesheet" href="@@autopath/node_modules/bootstrap-icons/font/bootstrap-icons.css">
<link rel="stylesheet" href="@@autopath/assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.css">
<!-- CSS Front Template -->
<!-- bundlecss:theme [@@autopath] @@vars.version -->
<link rel="stylesheet" href="@@autopath/assets/css/theme.css">
<link rel="stylesheet" href="@@autopath/assets/css/snippets.css">
</head>
<body>
<!-- ========== HEADER ========== -->
@@include("@@autopath/partials/navbar/main.html", {
"category": "",
"link": ""
})
<!-- ========== END HEADER ========== -->
<!-- ========== MAIN CONTENT ========== -->
<main id="content" role="main">
<!-- Hero Section -->
<div class="bg-img-start" style="background-image: url(@@autopath/assets/svg/components/card-11.svg);">
<div class="container text-center content-space-3">
<h1 class="display-4">Right Aligned Navbar</h1>
</div>
</div>
<!-- End Hero Section -->
<div class="container content-space-2">
<!-- Card -->
<div class="card card-nav-tab-content-height">
<!-- Header -->
<div class="card-header">
<!-- Nav -->
<ul class="nav nav-segment" id="navTab1" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="nav-htmlTab1" href="#nav-html1" data-bs-toggle="pill" data-bs-target="#nav-html1" role="tab" aria-controls="nav-html1" aria-selected="false">HTML</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-cssTab1" href="#nav-css1" data-bs-toggle="pill" data-bs-target="#nav-css1" role="tab" aria-controls="nav-css1" aria-selected="false">CSS</a>
</li>
<li class="nav-item">
<a class="nav-link" id="nav-jsTab1" href="#nav-js1" data-bs-toggle="pill" data-bs-target="#nav-js1" role="tab" aria-controls="nav-js1" aria-selected="false">JS</a>
</li>
</ul>
<!-- End Nav -->
</div>
<!-- End Header -->
<!-- Tab Content -->
<div class="tab-content" id="navTabContent1">
<div class="tab-pane fade show active" id="nav-html1" role="tabpanel" aria-labelledby="nav-htmlTab1">
<pre>
<code class="language-markup" data-lang="html">
&lt;!-- ========== HEADER ========== --&gt;
&lt;header id="header" class="navbar navbar-expand-lg navbar-end navbar-light bg-white"&gt;
&lt;div class="container"&gt;
&lt;nav class="js-mega-menu navbar-nav-wrap"&gt;
&lt;!-- Default Logo --&gt;
&lt;a class="navbar-brand" href="../index.html" aria-label="Front"&gt;
&lt;img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo"&gt;
&lt;/a&gt;
&lt;!-- End Default Logo --&gt;
&lt;!-- Toggler --&gt;
&lt;button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"&gt;
&lt;span class="navbar-toggler-default"&gt;
&lt;i class="bi-list"&gt;&lt;/i&gt;
&lt;/span&gt;
&lt;span class="navbar-toggler-toggled"&gt;
&lt;i class="bi-x"&gt;&lt;/i&gt;
&lt;/span&gt;
&lt;/button&gt;
&lt;!-- End Toggler --&gt;
&lt;!-- Collapse --&gt;
&lt;div class="collapse navbar-collapse" id="navbarNavDropdown"&gt;
&lt;ul class="navbar-nav"&gt;
&lt;!-- Landings --&gt;
&lt;li class="hs-has-mega-menu nav-item"&gt;
&lt;a id="landingsMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle" aria-current="page" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Landings&lt;/a&gt;
&lt;!-- Mega Menu --&gt;
&lt;div class="hs-mega-menu dropdown-menu w-100" aria-labelledby="landingsMegaMenu" style="min-width: 30rem;"&gt;
&lt;div class="row"&gt;
&lt;div class="col-lg-6 d-none d-lg-block"&gt;
&lt;!-- Banner Image --&gt;
&lt;div class="navbar-dropdown-menu-banner" style="background-image: url(../assets/svg/components/shape-3.svg);"&gt;
&lt;div class="navbar-dropdown-menu-banner-content"&gt;
&lt;div class="mb-4"&gt;
&lt;span class="h2 d-block"&gt;Branding Works&lt;/span&gt;
&lt;p&gt;Experience a level of our quality in both design &amp; customization works.&lt;/p&gt;
&lt;/div&gt;
&lt;a class="btn btn-primary btn-transition" href="#"&gt;Learn more &lt;i class="bi-chevron-right small"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- End Banner Image --&gt;
&lt;/div&gt;
&lt;!-- End Col --&gt;
&lt;div class="col-lg-6"&gt;
&lt;div class="navbar-dropdown-menu-inner"&gt;
&lt;div class="row"&gt;
&lt;div class="col-sm mb-3 mb-sm-0"&gt;
&lt;span class="dropdown-header"&gt;Classic&lt;/span&gt;
&lt;a class="dropdown-item" href="#"&gt;Corporate&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Analytics &lt;span class="badge bg-primary rounded-pill ms-1"&gt;Hot&lt;/span&gt;&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Studio&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Marketing&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Advertisement&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Consulting&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Portfolio&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Software&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Business&lt;/a&gt;
&lt;/div&gt;
&lt;!-- End Col --&gt;
&lt;div class="col-sm"&gt;
&lt;div class="mb-3"&gt;
&lt;span class="dropdown-header"&gt;App&lt;/span&gt;
&lt;a class="dropdown-item" href="#"&gt;UI Kit&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;SaaS&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Workflow&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Payment&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Tool&lt;/a&gt;
&lt;/div&gt;
&lt;span class="dropdown-header"&gt;Onepage&lt;/span&gt;
&lt;a class="dropdown-item" href="#"&gt;Corporate&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;SaaS &lt;span class="badge bg-primary rounded-pill ms-1"&gt;Hot&lt;/span&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;!-- End Col --&gt;
&lt;/div&gt;
&lt;!-- End Row --&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- End Col --&gt;
&lt;/div&gt;
&lt;!-- End Row --&gt;
&lt;/div&gt;
&lt;!-- End Mega Menu --&gt;
&lt;/li&gt;
&lt;!-- End Landings --&gt;
&lt;!-- Company --&gt;
&lt;li class="hs-has-sub-menu nav-item"&gt;
&lt;a id="companyMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Company&lt;/a&gt;
&lt;!-- Mega Menu --&gt;
&lt;div class="hs-sub-menu dropdown-menu" aria-labelledby="companyMegaMenu" style="min-width: 14rem;"&gt;
&lt;a class="dropdown-item" href="#"&gt;About&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Services&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Customer Stories&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Customer Story&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Careers&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Careers Overview&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Hire Us&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Pricing&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Contacts: Agency&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Contacts: Startup&lt;/a&gt;
&lt;/div&gt;
&lt;!-- End Mega Menu --&gt;
&lt;/li&gt;
&lt;!-- End Company --&gt;
&lt;!-- Account --&gt;
&lt;li class="hs-has-sub-menu nav-item"&gt;
&lt;a id="accountMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Account&lt;/a&gt;
&lt;!-- Mega Menu --&gt;
&lt;div class="hs-sub-menu dropdown-menu" aria-labelledby="accountMegaMenu" style="min-width: 14rem;"&gt;
&lt;!-- Authentication --&gt;
&lt;div class="hs-has-sub-menu nav-item"&gt;
&lt;a id="authenticationMegaMenu" class="hs-mega-menu-invoker dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Authentication&lt;/a&gt;
&lt;div class="hs-sub-menu dropdown-menu" aria-labelledby="authenticationMegaMenu" style="min-width: 14rem;"&gt;
&lt;a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#signupModal"&gt;Signup Modal&lt;/a&gt;
&lt;div class="dropdown-divider"&gt;&lt;/div&gt;
&lt;a class="dropdown-item" href="#"&gt;Login&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Signup&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Reset Password&lt;/a&gt;
&lt;div class="dropdown-divider"&gt;&lt;/div&gt;
&lt;a class="dropdown-item" href="#"&gt;Login Simple&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Signup Simple&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Reset Password Simple&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- End Authentication --&gt;
&lt;a class="dropdown-item" href="#"&gt;Personal Info&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Security&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Notifications&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Preferences&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Orders&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Wishlist&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Payments&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Address&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Teams&lt;/a&gt;
&lt;/div&gt;
&lt;!-- End Mega Menu --&gt;
&lt;/li&gt;
&lt;!-- End Account --&gt;
&lt;!-- Pages --&gt;
&lt;li class="hs-has-sub-menu nav-item"&gt;
&lt;a id="pagesMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Pages&lt;/a&gt;
&lt;!-- Mega Menu --&gt;
&lt;div class="hs-sub-menu dropdown-menu" aria-labelledby="pagesMegaMenu" style="min-width: 14rem;"&gt;
&lt;a class="dropdown-item" href="#"&gt;FAQ&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Terms &amp; Conditions&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Privacy &amp; Policy&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Coming Soon&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Maintenance Mode&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Status&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Invoice&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Error 404&lt;/a&gt;
&lt;/div&gt;
&lt;!-- End Mega Menu --&gt;
&lt;/li&gt;
&lt;!-- End Pages --&gt;
&lt;!-- Blog --&gt;
&lt;li class="hs-has-sub-menu nav-item"&gt;
&lt;a id="blogMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Blog&lt;/a&gt;
&lt;!-- Mega Menu --&gt;
&lt;div class="hs-sub-menu dropdown-menu" aria-labelledby="blogMegaMenu" style="min-width: 14rem;"&gt;
&lt;a class="dropdown-item" href="#"&gt;Journal&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Metro&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Newsroom&lt;/a&gt;
&lt;div class="dropdown-divider"&gt;&lt;/div&gt;
&lt;a class="dropdown-item" href="#"&gt;Article&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Author Profile&lt;/a&gt;
&lt;/div&gt;
&lt;!-- End Mega Menu --&gt;
&lt;/li&gt;
&lt;!-- End Blog --&gt;
&lt;!-- Portfolio --&gt;
&lt;li class="hs-has-sub-menu nav-item"&gt;
&lt;a id="portfolioMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"&gt;Portfolio&lt;/a&gt;
&lt;!-- Mega Menu --&gt;
&lt;div class="hs-sub-menu dropdown-menu" aria-labelledby="portfolioMegaMenu" style="min-width: 14rem;"&gt;
&lt;a class="dropdown-item" href="#"&gt;Grid&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Product Article&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Case Studies: Branding&lt;/a&gt;
&lt;a class="dropdown-item" href="#"&gt;Case Studies: Product&lt;/a&gt;
&lt;/div&gt;
&lt;!-- End Mega Menu --&gt;
&lt;/li&gt;
&lt;!-- End Portfolio --&gt;
&lt;!-- Button --&gt;
&lt;li class="nav-item"&gt;
&lt;a class="btn btn-primary btn-transition" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/" target="_blank"&gt;Buy now&lt;/a&gt;
&lt;/li&gt;
&lt;!-- End Button --&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;!-- End Collapse --&gt;
&lt;/nav&gt;
&lt;/div&gt;
&lt;/header&gt;
&lt;!-- ========== END HEADER ========== --&gt;
</code>
</pre>
</div>
<div class="tab-pane fade" id="nav-css1" role="tabpanel" aria-labelledby="nav-cssTab1">
<pre>
<code class="language-markup" data-lang="html">
&lt;!-- CSS Implementing Plugins --&gt;
&lt;link rel="stylesheet" href="@@autopath/assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.css"&gt;
</code>
</pre>
</div>
<div class="tab-pane fade" id="nav-js1" role="tabpanel" aria-labelledby="nav-jsTab1">
<pre>
<code class="language-markup" data-lang="html">
&lt;!-- JS Implementing Plugins --&gt;
&lt;script src="@@autopath/assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js"&gt;&lt;/script&gt;
&lt;!-- JS Plugins Init. --&gt;
&lt;script&gt;
(function() {
// INITIALIZATION OF MEGA MENU
// =======================================================
new HSMegaMenu('.js-mega-menu', {
desktop: {
position: 'left'
}
})
})()
&lt;/script&gt;
</code>
</pre>
</div>
</div>
<!-- End Tab Content -->
</div>
<!-- End Card -->
</div>
</main>
<!-- ========== END MAIN CONTENT ========== -->
<!-- ========== SECONDARY CONTENTS ========== -->
<!-- Go To -->
@@include("@@autopath/partials/layouts-components/go-to.html")
<!-- ========== END SECONDARY CONTENTS ========== -->
<!-- JS Global Compulsory @@deleteLine:build -->
<script src="@@autopath/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- JS Implementing Plugins -->
<!-- bundlejs:vendor [@@autopath] -->
<script src="@@autopath/assets/vendor/hs-go-to/dist/hs-go-to.min.js"></script>
<script src="@@autopath/assets/vendor/prism/prism.js"></script>
<script src="@@autopath/assets/vendor/hs-show-animation/dist/hs-show-animation.min.js"></script>
<script src="@@autopath/assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js"></script>
<!-- JS Front -->
<!-- bundlejs:theme [@@autopath] -->
<script src="@@autopath/assets/js/hs.core.js"></script>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF GO TO
// =======================================================
new HSGoTo('.js-go-to')
// INITIALIZATION OF MEGA MENU
// =======================================================
new HSMegaMenu('.js-mega-menu', {
desktop: {
position: 'left'
}
})
})()
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink