Reformat the header into a mega dropdown
This commit is contained in:
parent
27f5cd792f
commit
9af61e0c7e
@ -64,3 +64,39 @@ textarea {
|
|||||||
text-decoration: line-through;
|
text-decoration: line-through;
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ----------------------------------------------------------------------------
|
||||||
|
Mega Menu
|
||||||
|
---------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
.mega-menu .dropdown-pane {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto !important;
|
||||||
|
left: 0% !important;
|
||||||
|
right: 0% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mega-menu .menu {
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mega-menu > a {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mega-menu > a::after {
|
||||||
|
display: block;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border: inset 6px;
|
||||||
|
content: '';
|
||||||
|
border-bottom-width: 0;
|
||||||
|
border-top-style: solid;
|
||||||
|
border-color: #1779ba transparent transparent;
|
||||||
|
/* margin-left: calc(100% + .25rem);*/
|
||||||
|
position:absolute;
|
||||||
|
top: 45%;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,72 +1,103 @@
|
|||||||
<h1>Collection CRUD</h1>
|
|
||||||
<div class="top-bar">
|
<div class="top-bar">
|
||||||
<div class="top-bar-left">
|
<div class="top-bar-left">
|
||||||
<ul class="menu">
|
<ul class=" dropdown menu" data-dropdown-menu>
|
||||||
<li class="menu-text">Meta</li>
|
<li class="menu-text">Collection CRUD</li>
|
||||||
<li class="{{ route starts with 'brand_' ? 'is-active' }}">
|
<li class="mega-menu">
|
||||||
<a href="{{ path('brand_index') }}">🕺 Brands</a>
|
<a data-toggle="meta-menu" href="#">Meta</a>
|
||||||
</li>
|
|
||||||
<li class="{{ route starts with 'brand-category_' ? 'is-active' }}">
|
|
||||||
<a href="{{ path('brand-category_index') }}">💃 Brand Categories</a>
|
|
||||||
</li>
|
|
||||||
<li class="{{ route starts with 'gpu-core' ? 'is-active' }}">
|
|
||||||
<a href="{{ path('gpu-core_index') }}">🌀 GPU Cores</a>
|
|
||||||
</li>
|
|
||||||
<li class="{{ route starts with 'socket_' ? 'is-active' }}">
|
|
||||||
<a href="{{ path('socket_index') }}">📍Sockets</a>
|
|
||||||
</li>
|
|
||||||
<li class="not-implemented">
|
|
||||||
<a href="#">🐏 Ram Types</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<ul class="menu">
|
|
||||||
<li class="menu-text">Photography</li>
|
|
||||||
<li class="{{ route starts with 'camera_' ? 'is-active' }}">
|
|
||||||
<a href="{{ path('camera_index') }}">📷 Cameras</a>
|
|
||||||
</li>
|
|
||||||
<li class="{{ route starts with 'flash_' ? 'is-active' }}">
|
|
||||||
<a href="{{ path('flash_index') }}">📸 Flashes</a>
|
|
||||||
</li>
|
|
||||||
<li class="{{ route starts with 'lens_' ? 'is-active' }}">
|
|
||||||
<a href="{{ path('lens_index') }}">🔎 Lenses</a>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li hidden>
|
<div class="dropdown-pane bottom" id="meta-menu" data-dropdown data-options="closeOnClick:true; hover: true; hoverPane: true; vOffset:11">
|
||||||
<ul>
|
<div class="row expanded">
|
||||||
<li class="menu-text">Previously Owned</li>
|
<div class="column">
|
||||||
<li class="{{ route starts with 'previously-owned-camera' ? 'is-active' }}">
|
<ul class="menu">
|
||||||
<a href="{{ path('previously-owned-camera_index') }}">📷 Cameras</a>
|
<li class="menu-text">Computer Related</li>
|
||||||
</li>
|
<li class="{{ route starts with 'brand_' ? 'is-active' }}">
|
||||||
<li class="{{ route starts with 'previously-owned-flash' ? 'is-active' }}">
|
<a href="{{ path('brand_index') }}">🕺 Brands</a>
|
||||||
<a href="{{ path('previously-owned-flash_index') }}">📸 Flashes</a>
|
</li>
|
||||||
</li>
|
<li class="{{ route starts with 'brand-category_' ? 'is-active' }}">
|
||||||
<li class="{{ route starts with 'previously-owned-lens' ? 'is-active' }}">
|
<a href="{{ path('brand-category_index') }}">💃 Brand Categories</a>
|
||||||
<a href="{{ path('previously-owned-lens_index') }}">🔎 Lenses</a>
|
</li>
|
||||||
</li>
|
<li class="{{ route starts with 'gpu-core' ? 'is-active' }}">
|
||||||
</ul>
|
<a href="{{ path('gpu-core_index') }}">🌀 GPU Cores</a>
|
||||||
|
</li>
|
||||||
|
<li class="{{ route starts with 'socket_' ? 'is-active' }}">
|
||||||
|
<a href="{{ path('socket_index') }}">📍Sockets</a>
|
||||||
|
</li>
|
||||||
|
<li class="not-implemented">
|
||||||
|
<a href="#">🐏 Ram Types</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<ul class="menu">
|
||||||
|
<li class="menu-text">Photography Related</li>
|
||||||
|
<li class="{{ route starts with 'film_' ? 'is-active' }}">
|
||||||
|
<a href="{{ path('film_index') }}">🎞️ Film</a>
|
||||||
|
</li>
|
||||||
|
<li class="{{ route starts with 'camera-type_' ? 'is-active' }}">
|
||||||
|
<a href="{{ path('camera-type_index') }}">🎥 Camera Types</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
<li class="mega-menu">
|
||||||
|
<a data-toggle="photo-menu" href="#">Photography</a>
|
||||||
|
|
||||||
<li class="menu-text">Meta</li>
|
<div class="dropdown-pane bottom" id="photo-menu" data-dropdown data-options="closeOnClick:true; hover: true; hoverPane: true; vOffset:11">
|
||||||
<li class="{{ route starts with 'film_' ? 'is-active' }}">
|
<div class="row expanded">
|
||||||
<a href="{{ path('film_index') }}">🎞️ Film</a>
|
<div class="column">
|
||||||
|
<ul class="menu">
|
||||||
|
<li class="menu-text">Currently Owned</li>
|
||||||
|
<li class="{{ route starts with 'camera_' ? 'is-active' }}">
|
||||||
|
<a href="{{ path('camera_index') }}">📷 Cameras</a>
|
||||||
|
</li>
|
||||||
|
<li class="{{ route starts with 'flash_' ? 'is-active' }}">
|
||||||
|
<a href="{{ path('flash_index') }}">📸 Flashes</a>
|
||||||
|
</li>
|
||||||
|
<li class="{{ route starts with 'lens_' ? 'is-active' }}">
|
||||||
|
<a href="{{ path('lens_index') }}">🔎 Lenses</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<ul class="menu">
|
||||||
|
<li class="menu-text">Previously Owned</li>
|
||||||
|
<li class="{{ route starts with 'previously-owned-camera' ? 'is-active' }}">
|
||||||
|
<a href="{{ path('previously-owned-camera_index') }}">📷 Cameras</a>
|
||||||
|
</li>
|
||||||
|
<li class="{{ route starts with 'previously-owned-flash' ? 'is-active' }}">
|
||||||
|
<a href="{{ path('previously-owned-flash_index') }}">📸 Flashes</a>
|
||||||
|
</li>
|
||||||
|
<li class="{{ route starts with 'previously-owned-lens' ? 'is-active' }}">
|
||||||
|
<a href="{{ path('previously-owned-lens_index') }}">🔎 Lenses</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="{{ route starts with 'camera-type_' ? 'is-active' }}">
|
<li class="mega-menu">
|
||||||
<a href="{{ path('camera-type_index') }}">🎥 Camera Types</a>
|
<a data-toggle="computer-menu" href="#">Computer Related</a>
|
||||||
</li>
|
|
||||||
</ul>
|
<div class="dropdown-pane bottom" id="computer-menu" data-dropdown data-options="closeOnClick:true; hover: true; hoverPane: true; vOffset:11">
|
||||||
<ul class="menu">
|
<div class="row expanded">
|
||||||
<li class="menu-text">Computer Components</li>
|
<ul class="menu">
|
||||||
<li class="{{ route starts with 'gpu_' ? 'is-active' }}">
|
<li class="{{ route starts with 'gpu_' ? 'is-active' }}">
|
||||||
<a href="{{ path('gpu_index') }}">🎮 Graphics Cards</a>
|
<a href="{{ path('gpu_index') }}">🎮 Graphics Cards</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="not-implemented {{ route starts with 'cpu_' ? 'is-active' }}">
|
<li class="{{ route starts with 'app_cpu_' ? 'is-active' }}">
|
||||||
<a href="#">🧠 CPUs</a>
|
<a href="{{ path('app_cpu_index') }}">🧠 CPUs</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="{{ route starts with 'fpu_' ? 'is-active' }}">
|
<li class="{{ route starts with 'fpu_' ? 'is-active' }}">
|
||||||
<a href="{{ path('fpu_index') }}">🧮 FPUs</a>
|
<a href="{{ path('fpu_index') }}">🧮 FPUs</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="not-implemented {{ route starts with 'motherboard_' ? 'is-active' }}">
|
<li class="not-implemented {{ route starts with 'motherboard_' ? 'is-active' }}">
|
||||||
<a href="#">🤰 Motherboards</a>
|
<a href="#">🤰 Motherboards</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user