My menu is not showing items when I click on the setup menu item. Before using the kendo splitter it worked fine. Now the menu doesn't pop up even after setting a higher z-index on the menu element.
This is my menu bar
<nav class="top-bar bottomnav" data-topbar>
<section class="top-bar-section">
<ul class="right">
<li class="has-content-dropdown"><a href="#" data-dropdown="setuplist" title="Setup">
<img src="/Content/Images/setup-16x16.png" alt="Setup" /> Setup</a>
<div id="setuplist" data-dropdown-content class="medium f-dropdown iconlist">
#{
link="#";
}
{ link="/Classification/ClassificationLabel"; }
<div class="iconlink">
<a href='#link' title="Classification Label" onclick="OnclickPrem(this)">
<img src="/Content/Images/labels-72x72.png" /><div>Classification Label</div>
</a>
</div>
#{
link="#";
}
{ link="/Classification/Index"; }
<div class="iconlink">
<a href='#link' title="Classification" onclick="OnclickRPrem(this)">
<img src="/Content/Images/Classification-72x72.png" /><div>Classification</div>
</a>
</div>
</li>
</ul>
</section>
below this menu an using kendo splitter
#(Html.Kendo().Splitter()
.Name("vertical")
.Orientation(SplitterOrientation.Vertical)
.HtmlAttributes(new { style = "height: 70%;height:78.3vh;" })
.Panes(verticalPanes =>
{
verticalPanes.Add()
.HtmlAttributes(new { id = "top-pane" })
.Scrollable(false)
.Collapsible(false)
.Content(
Html.Kendo().Splitter()
.Name("horizontal")
.HtmlAttributes(new { style = "height: 100%;" })
.Panes(horizontalPanes =>
{
horizontalPanes.Add()
.HtmlAttributes(new { id = "left-pane" })
.MaxSize("300px")
.MinSize("250px")
.Size("300px")
.Collapsible(true)
.Collapsed(true)
.Content(Html.Action("Tasks").ToString());
horizontalPanes.Add()
.HtmlAttributes(new { id = "center-pane"})
.Content(#<div class="renderbodydiv" style="padding-top: 8px">
#RenderBody()
</div>);
}).ToHtmlString()
);
})
)
Splitter panes hide the overflow, so if your menu is in a position so it would show outside of the pane it is in, you need to override the CSS responsible for that; you can try with:
.k-splitter .k-pane {
overflow: visible !important;
}
Related
I have a navigation that is horizontal. Under every choice I have a div that opens up on click. But the problem is that it binds it's position to the parent navigation button. I want every div that opens on the exact same spot. I want every child div that opens to open from the first element in the navigation bar.
So in this case i want the white open div to bind to "Nyheter" instead. I really can't solve it, I tried set a div element before the navigation that all div that opens binds to in css but it not seems to work.
<div class="Container">
<nav class="NavHorizontal Grid Grid--alignMiddle">
#Navigation.RenderNavigation("master/navigationDesignHeader.cshtml", navigationSettings)
</nav>
</div>
//NavigationDesignheader.cshtml under this line
var elementId = 1;
foreach (var node in nodes)
{
var idElement = "megaMenu" + elementId;
<div class="NavHorizontal-item Grid-cell u-sizeFit" id="#idElement">
<a class="Button Button--tab navigationHeaderLink u-pointer" onclick="toggleMenu('#elementId')">
#node.Name
</a>
#RenderMegaMenu(node.Nodes, node.Link, node.Name)
</div>
elementId++;
}
Megamenu:
<div>
<div id="megaMenuDropdown" class="Container megaMenuDropdown-content displayNone">
<div class="Grid Grid--withGutter">
<div class="Grid-cell u-sizefull u-mt-10">
#nodeName
<div class="megaMenuToggle-closeBars u-pointer" style="float:right">
<span class="megaMenuToggle-closeBar"></span>
<span class="megaMenuToggle-closeBar"></span>
</div>
</div>
</div>
<hr class="colorBlue" />
<div class="Grid Grid--withGutter">
<div class="Grid-cell u-size12of12 u-md-size6of12 u-lg-size6of12">
<ul>
#foreach (var node in firstColumn)
{
<li class="u-mb-10 linkHover">
<a class="userLink colorBlue" href="#node.Link">#node.Name</a>
</li>
}
</ul>
</div>
#if (moreThanTen)
{
<div class="Grid-cell u-size12of12 u-md-size6of12 u-lg-size6of12">
<ul>
#foreach (var node in secondColumn)
{
<li class="u-mb-10 linkHover">
<a class="userLink colorBlue" href="#node.Link">#node.Name</a>
</li>
}
</ul>
</div>
}
</div>
</div>
</div>
Any suggestions?
I made a hamburger menu, and when I click on the links it closes it. Also has a logo which disappears when I click on the hamburger button.
The webpage has a mobile and a desktop computer version that doesn't have a hamburger menu.
But I have a problem. On the Desktop version, if I click on the links the Logo disappears as well.
I know that it does it because the hamburger-close-after-click event triggers it.
But I don't know how I could change it to make it work well.
jQuery Code
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
const links = document.querySelectorAll('.nav-links li');
var mylogo = document.getElementById("myLogo");
hamburger.addEventListener('click', () => {
navLinks.classList.toggle('open');
links.forEach(link =>{
link.classList.toggle("fade");
});
});
//logo-toggle
$(document).ready(function(){
$('.hamburger').click(function() {
$('.logo-container').toggle().delay( 800 );
});
});
// hamburger-close-after-click event
$( '.nav-links li a' ).on("click", function(){
$('#hamburgerID').click();
});
HTML Code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<nav>
<div class="hamburger" id="hamburgerID">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</nav>
<header class="header" id="myHeader">
<div class="logo-container" id="myLogo">
<img src="./img/logo.png" alt="logo"/>
</div>
<nav>
<ul class="nav-links">
<li><a class="nav-link" href="#details">DETAILS</a></li>
<li><a class="nav-link" href="#description">DESCRIPTION</a></li>
<li><a class="nav-link" href="#aboutus">ABOUT US</a></li>
</ul>
</nav>
The problem with pictures
[
You can use JQuery.toggleClass() to add and remove CSS classes, instead of using JQuery.toggle(), e.g.:
$('.hamburger').click(function() {
$('.logo-container').toggleClass('open');
})
And then, in the CSS file, define the visibility depending on the screen size, e.g.:
.logo-container { display: 'none' }
.logo-container.open { display: 'block' }
#media (min-width: 1025px) {
.logo-container { display: 'block' }
}
(Note: You will want to decide yourself how to identify the appropriate size to hide and show the elements. See also e.g.: how-to-target-desktop-tablet-and-mobile)
I am using the mustard css framework but I am having an issue when resizing my browser. The navigation bar is supposed to drop into a hamburger, the appears but when i click it nothing appears within it. I copied and pasted the mustard exact nav bar but still doesn't work. Am i missing something else I have to link.
My Navigation Bar
<nav class="mynav">
<div class="nav-container">
<div class="nav-logo">
<div>
<img class="mylogo" src="imgs/abs.png" alt="">
</div>
<a class="myfont" href="index.php">Abs'olute Fitness</a>
</div>
<a class="mobile-menu-toggle"></a>
<ul class="mobile-menu menu">
<li>About</li>
<li>Contact</li>
<li>Login</li>
</ul>
</div>
</nav>
Mustard Navigation Bar
<nav>
<div class="nav-container">
<div class="nav-logo">
mustard
</div>
<ul class="nav-links">
<li><a class="active" href="/docs/installation">Docs</a></li>
<li>GitHub</li>
<li>Support</li>
</ul>
<a class="mobile-menu-toggle"></a>
<ul class="mobile-menu menu">
<li>Docs</li>
<li>GitHub</li>
<li>Support</li>
</ul>
</div>
</nav>
You need some javascript to toggle appearance. There's jquery example in repository, I'm using vanilla JS for that:
const hide = ((elem) => {
elem.style.display = 'none';
});
const show = ((elem) => {
elem.style.display = 'block';
});
const toggle = document.querySelector('.mobile-menu-toggle');
const menu = document.querySelector('.mobile-menu');
toggle.addEventListener('click', ((e) => {
if (menu.style.display !== 'block') {
e.preventDefault();
e.stopPropagation();
show(menu);
}
}));
document.body.addEventListener('click', ((e) => {
if (menu.style.display === 'block') {
e.preventDefault();
e.stopPropagation();
hide(menu);
}
}));
how to make responsive sticky navbar working in desktop using uikit
here is what i have tried
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; bottom: #transparent-sticky-navbar" style="background-color: rgba(0,0,0,.4)">
<nav class="uk-navbar-container uk-navbar-transparent uk-height-match" uk-navbar style="position: relative; z-index: 980;height: 77px;">
<div class="uk-navbar-center">
<ul class="uk-navbar-nav">
<li class="uk-active">Active</li>
<li>
Parent
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active">Active</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
</li>
<li>Item</li>
</ul>
</div>
</nav>
</div>
the navbar is working on all display views but i don't want it to work on tablet & mobile view
how can i achieve that ?
You can make a listener for window resize and when the window width is as a mobile size, hide your navbar, I made it once like this in your parent component :
data: function() {
return {
windowWidth: 0,
}
},
mounted() {
this.$nextTick(function() {
window.addEventListener('resize', this.getWindowWidth);
//Init
this.getWindowWidth()
})
},
methods: {
getWindowWidth(event) {
this.windowWidth = document.documentElement.clientWidth;
},
},
beforeDestroy() {
window.removeEventListener('resize', this.getWindowWidth);
}
And in your template for example (pseudo code):
<template>
<navbar v-if="windowWidth > 800px"></navbar>
</template>
Hope it helps
Here is my code:
a) I have a row of buttons at the top formatted horizontally as such:
HTML:
<ul class="nav">
Work
Volunteer
Education
Skills
References
Images
</ul>
b) I have div blocks each displaying a paragraph:
<div class="jobs">
<h2>text</h2>
<h3>text</h3>
<h4>text</h4>
</div>
c) I want the CSS to not display the jobs div yet:
.jobs {
display: none;
}
d) Now that I hover over the first button I want the jobs div to display:
.button1:hover+.jobs {
display: block
}
e) Repeat for all other div sections
.volunteer {
display: none;
}
.button2:hover+.volunteer {
display:block
}
You will need to markup HTML differently.
.jobs, .volunteer {
display: none;
}
.button1:hover+.jobs, .button2:hover+.volunteer {
display: block;
/* position the divs under the navigation links */
position: absolute;
top: 120px;
}
<ul class="nav">
<li>
Work
<div class="jobs">
<h2>h2 jobs</h2>
<h3>h3 jobs</h3>
<h4>h4 jobs</h4>
</div>
</li>
<li>
Volunteer
<div class="volunteer">
<h2>h2 volunteer</h2>
<h3>h3 volunteer</h3>
<h4>h4 volunteer</h4>
</div>
</li>
<li> Education</li>
<li> Skills</li>
<li> References</li>
<li> Images</li>
</ul>
This is impossible, as described, with your current HTML, with only HTML and CSS (though only perhaps until the reference and :matches() pseudo-selectors arrive). However, if, rather than :hover you'd be willing to work with clicks on the list-elements, it can be done (without JavaScript). Given the corrected HTML:
<ul class="nav">
<li>Work
</li>
<li> Volunteer
</li>
<!-- and so on... -->
</ul>
<div id="details">
<div id="jobs"></div>
<div id="volunteer"></div>
<!-- and so on... -->
</div>
The following CSS will show the relevant div element once the <a> element has been clicked on (note that the use of an id is essential for this to work):
#details > div {
/* to hide the eleemnt(s) initially: */
display: none;
}
#details > div:target {
/* to show the relevant element once the relevant link is clicked: */
display: block;
}
#details > div[id]::after {
content: attr(id);
}
#details > div {
display: none;
}
#details > div:target {
display: block;
}
<ul class="nav">
<li>Work
</li>
<li> Volunteer
</li>
<li> Education
</li>
<li> Skills
</li>
<li> References
</li>
<li> Images
</li>
</ul>
<div id="details">
<div id="jobs"></div>
<div id="volunteer"></div>
<div id="education"></div>
<div id="skills"></div>
<div id="references"></div>
<div id="images"></div>
</div>
With plain JavaScript, on the other hand, it can be achieved with:
// the 'e' argument is automatically to the function by addEventListener():
function toggleRelevant (e) {
// caching the 'this' element:
var self = this,
// finding the div element with a class equal to the href of the 'a' element
// (though we're stripping off the leading '#':
relevantElement = document.querySelector('div.' + self.getAttribute('href').substring(1) );
// if the event we're responding to is 'mouseover' we set the display of the
// found div to 'block', otherwise we set it to 'none':
relevantElement.style.display = e.type === 'mouseover' ? 'block' : 'none';
}
// finding all the a elements that are in li elements:
var links = document.querySelectorAll('li a');
// iterating over those a elements, using Array.prototype.forEach:
[].forEach.call(links, function(linkElem){
// adding the same event-handler for both mouseover and mouseout:
linkElem.addEventListener('mouseover', toggleRelevant);
linkElem.addEventListener('mouseout', toggleRelevant);
});
function toggleRelevant(e) {
var self = this,
relevantElement = document.querySelector('div.' + self.getAttribute('href').substring(1));
relevantElement.style.display = e.type === 'mouseover' ? 'block' : 'none';
}
var links = document.querySelectorAll('li a');
[].forEach.call(links, function(linkElem) {
linkElem.addEventListener('mouseover', toggleRelevant);
linkElem.addEventListener('mouseout', toggleRelevant);
});
div[class] {
display: none;
}
div[class]::before {
content: attr(class);
color: #f00;
border: 1px solid #f00;
padding: 0.2em;
}
<ul class="nav">
<li>Work
</li>
<li> Volunteer
</li>
<!-- and so on... -->
</ul>
<div class="jobs">
<h2>text</h2>
<h3>text</h3>
<h4>text</h4>
</div>
<div class="volunteer">
<h2>text</h2>
<h3>text</h3>
<h4>text</h4>
</div>
<!-- and so on... -->
I don't think this is do able in css since display blocks (job, volonteer, ...) and button are not parent. But in jQuery this is fairly simple :
$('.buttonX').hover(
function() {
// Styles to show the box
$('.boxX').css(...);
},
function () {
// Styles to hide the box
$('.boxX').css(...);
}
);
It sounds like you're trying to do some kind of a tab menu where pressing a specific button shows a different content. Here's a SO page that describes how it's done: How to make UL Tabs with only HTML CSS