Good day!
I'm trying to implement drop down menu from examples on my site. But it is not work (drop down menu is not showing at all). I included all necessary js and css files, markup is the same as in the docs.
Can you see what I'm doing wrong?
<link type="text/css" href="{{ STATIC_URL }}css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/bootstrap.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/bootstrap-dropdown.js"></script>
...
<body>
<div class="navbar .navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="/">
Brand
</a>
<ul class="nav">
<li class="dropdown">
<a href="#fat-menu" class="dropdown-toggle" data-toggle="dropdown">
Аккаунт
<b class="caret"></b>
</a>
<ul class="dropdown-menu" id="fat-menu">
<li><a>SubLink</a></li>
<li class="divider"></li>
<li><a>SubLink</a></li>
</ul>
</li>
</ul>
...
</div>
</div>
</div>
Many thanks.
The problem was in missing js block in html file, required for a specific feature.
The missing code bit was:
$('.dropdown-toggle').dropdown()
You're not properly binding your main nav link to your dropdown, try this:
<ul class="nav">
<li class="dropdown" id="fat-menu"> /* notice the reference to your dropdown link #fat-menu */
<a href="#fat-menu" class="dropdown-toggle" data-toggle="dropdown">
Аккаунт
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a>SubLink</a></li>
<li class="divider"></li>
<li><a>SubLink</a></li>
</ul>
</li>
</ul>
Demo: http://jsfiddle.net/u5vhS/1/
I usually used to forget of one of these:
proper html
linking to jquery.js and bootstrap-dropdown.js
checking if i linked it properly (it seems redundant but it certainly helped me)
calling the dropdown: $('.dropdown-toggle').dropdown()
I know this may seem silly, but when you view the source (via right-click), are the addresses of the JavaScript files correct? It's possible that {{ STATIC_URL }} isn't correct. Try copy and pasting the addresses from the source into the address bar. Make sure you actually see the content of the JavaScript files.
I was facing the same problem. Commenting the link for bootstrap-dropdown.js resolved it. I only needed bootstrap.min.js
That will happen if you override li somewhere in your css. For example, if you have an other stylesheet with content:
li {
list-style: none;
margin-bottom: 20px;
overflow: hidden;
padding-bottom: 25px;
position: relative;
}
It will not work. Make sure there is no conflict.
Try to upgrade your jQuery library, it solved the same problem for me.
Had the same issue on a .net project (drop down menu not showing at all), however offcial bootstrap samples worked fine. Upgrading jQuery library on my project from 1.6.1 to 1.8.2 solved the problem.
Related
I want to deepen my knowledge about accessibility. So I appreciate any feedback. Please check this code whether it fulfills (hopefully high) standards of accessibility for a responsive menu. I think that there may be some issues with keyboard navigation – but I don’t know.
First the HTML. Pls. notice the comments inside the HTML:
For convenience I list them here too:
Wrap navigation in nav tag. Don't use <div class="navigation">
Give navigation a role="navigation"
Don't wrap button in a tag or div. Instead use button
Give screenreader a hint, whether menu is expanded or hidden with area-expanded="Boolean". Add hint dynamically with JS.
So the complete HTML is:
<header class="header">
<!-- role=navigation to ensure better support, since not all browsers/screen readers will recognize the <nav> element. -->
<nav role="navigation" class="navbar">
companyLogo
<ul class="nav-menu">
<li class="nav-item"><a class="nav-link" href="#">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">nav</a></li>
</ul>
<!-- By using aria-expanded attribute, the user will be able to know that the button content is expanded or collapsed. At first, we will add the attribute by default and then JavaScript will help changing the value.
https://www.a11ymatters.com/pattern/mobile-nav/ -->
<button class="hamburger" aria-expanded="false">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</button>
</nav>
</header>
I reduce the CSS part to this:
.hamburger {
display: none;
}
Is it appropriate to hide the .hamburger in the DOM? (I also gave it an area-expanded – does it make sense?)
The JS: Here I am primarily interested whether the if statement changing the area-expanded dynamically works as intended.
const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");
hamburger.addEventListener("click", openMenu);
function openMenu() {
hamburger.classList.toggle("active");
navMenu.classList.toggle("active");
// Not sure whether, this is correct
if (navMenu.classList.contains("active")) {
hamburger.setAttribute("aria-expanded", "true");
} else {
hamburger.setAttribute("aria-expanded", "false");
}
}
It would be great, if:
you could provide feedback, which makes this menu more accessible.
you could give me an idea how to optimize the keyboard input.
you comment whether it is approppriate to hide the the hamburger with display: none
you could tell me whether the JS which dynamically changes the Boolean in area-expanded is correct.
Thank you for your time.
I'm new with css completely, thanks god there have many articles on the net, just like "CSS for IBM Notes and Domino XPages Developers", but I'm still confused with it, now go to the problem I meet, I didn't use my own create theme but the native bootstrap4 theme
here is my code (part of)
<xe:applicationLayout id="applicationLayout1">
<xp:callback facetName="facetMiddle" id="facetMiddle">
</xp:callback>
<xp:this.facets>
<xe:navigator id="navigator1" xp:key="LeftColumn">
<xe:this.treeNodes>
<xe:pageTreeNode page="/View.xsp">
</xe:pageTreeNode>
<xe:pageTreeNode page="/View_ip.xsp" imageHeight="27px" imageWidth="27px">
<xe:this.image>
<![CDATA[#{javascript:var nr=2 ; nr> 0 ? (Math.min(nr, 10) + '.gif') : '';}]]>
</xe:this.image>
</xe:pageTreeNode>
</xe:this.treeNodes>
</xe:navigator>
</xe:this.treeNodes>
</xe:navigator>
</xp:this.facets>
<xe:this.configuration>
<xe:simpleResponsiveConfiguration collapseLeftColumn="true" collapseLeftTarget=".applayout-column-left"
collapsedLeftMenuLabel="Menu" navbar="false" pageWidth="fluid" invertedNavbar="true">
</xe:simpleResponsiveConfiguration>
</xe:this.configuration>
</xe:applicationLayout>
yes...i used Knut's idea about the badge,thanks for that~ Knut
html code(part of):
<div class="applayout-main" id="view:_id1:_id2:applicationLayout1">
<div role="main" class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 hidden-sm-down applayout-column-left sidebar">
<ul role="tree" id="view:_id1:_id2:navigator1" class="nav nav-pills nav-stacked xspNavigator">
<li class="nav-item">
<a role="treeitem" href="/OA/VVUS.nsf/View.xsp" class="nav-link">
All Documents
</a>
</li>
<li class="nav-item">
<a role="treeitem" href="/OA/VVUS.nsf/View_ip.xsp" class="active nav-link">
<img src="/OA/VVUS.nsf/2.gif" height="27px" width="27px">
In Process
</a>
</li>
</ul>
and this is what I want to show to user:
basically, I need this image float right always, that means I need add css myself, as I said beginning I have no idea with it although I read many people's article, and try this on my code, the interesting thing is it worked with below css...
<style type="text/css" media="print">
#applicationLayout1 {
background-color:blue;
}
.xspNavigator .nav-item img {
float:right;
}
</style>
2018/01/06 update....yes, that's the media="print" thing...I used this css file before, but never try to remove it....How am I so stupid...thanks you guys help...and one more thing for me to do....reinstall my system....
<style type ="text/css">
.xspNavigator .nav-item img {
float:right;
}
</style>
2018/01/10:final update, I think I found the problem is...I removed not only media="print",but also tags...and everything go to the peace....
.xspNavigator .nav-item img {
float:right;
}
I know it works because ".xspNavigator .nav-item img", the strange thing is if I remove the #applicationLayout1 , it will be back like this, just no effect with css anymore...I really really can't understand why....
so...what's my css file problem? thanks
Remove media="print" from the STYLE tag.
Remove the media="print" part because it tells the browser to only use the CSS when printing.
I am trying to make a menu with images only. Can anyone tell me how I should markup this in the most semantic way possible? My best guess would be like this:
HTML
<ul>
<li></li>
</ul>
CSS
.menu {width: 40px; height: 40px}
#home {background: url('...')
EDIT: The query is because Ineed to use empty <a> tags or alternatively I can put the <img> tag within the <a> tags.
First, if you are willing to respect HTML5 semantics, your menu should be wraped in a <nav> tag.
Second, the alt="" should be replaced by a title="" attribute on the <a> tag (MDN for more info)
Third, you should use the <img> tag with the alt="" attribute so you can add more semantic context.
Your menu could look like this:
<nav>
<ul>
<li><img src="" alt="" /></li>
... OTHER LINKS ...
</ul>
</nav>
You can use Font-Awesome icons instead of images.
They are light and easy to load while image taking time to load and you can apply CSS on those icon same as text.
http://fortawesome.github.io/Font-Awesome/icons/
for e.g.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<ul>
<li><i class="fa fa-home"></i></li>
</ul>
But for using font-awsome icons you have to include font-awsome CSS and fonts to your directory.
I would like to create a image and text menu in Sliverstripe as shown here:
I was thinking to have jquery select an individual ID and replace the background image. How ever Silverstripe gives me the menu as you see below. How can I go about setting up this menu?
Output
<ul>
<li class="current">
<a title="video" href="/cfl/index.php/">Home</a>
</li>
<li class="link">
<a title="alarm" href="/cfl/index.php/about-us/">About Us</a>
</li>
<li class="link">
<a title="auto" href="/cfl/index.php/contact-us/">Contact Us</a>
</li>
</ul>
Template File
<nav class="primary">
<span class="nav-open-button">²</span>
<ul>
<% loop $Menu(1) %>
<li class="$LinkingMode">$MenuTitle.XML</li>
<% end_loop %>
</ul>
</nav>
Thanks.
this should be pretty easy, in SilverStripe templates you can do anything you can do in normal HTML. With additional variables and features of course.
so, you can simply give the items a ID or a css class.
let me show you an example:
<nav class="primary">
<span class="nav-open-button">²</span>
<ul>
<% loop $Menu(1) %>
<li class="$LinkingMode position-$Pos" id="$URLSegment">$MenuTitle.XML</li>
<% end_loop %>
</ul>
</nav>
you see, I added position-$Pos which will become position-1, position-2, and so on.
also, I added an ID, in this case, it will be the URLSegment of that page.
so now you can use CSS or javascript to get that item, eg here some CSS to set a background:
.position-1 { background: green; }
.position-2 { background: yellow; }
.position-3 { background: blue; }
// we can also use the ID to style the element:
#home {
display: block;
width: 100px;
height: 100px;
background-image: url(http://placehold.it/100x100);
}
in in any javascript code you can of course do the same (in your case the framework jquery):
jQuery(document).ready(function($) {
$('.position-1').hover(function() {
alert('you moved over the first item');
});
});
however, I strongly urge you to use CSS, there is no reason for using javascript to do a simple task like setting a background image.
I'm trying to find out how to change the icon of a JStree node using only css?
There are a lot of posts explaining on doing it with javascript but i prefer to use css only.
Here's my code so far:
$("#treeview").jstree().on('loaded.jstree', function()
{
$("#treeview").jstree('open_all');
});
And the Html:
<div id="treeview">
<ul>
<li>
abcdefghijkl
<ul>
<li>
<a href="#" onclick="goTo('index.php?module=klimaat&pagina=dashboard&id=6',false);">
Beneden</a>
</li>
<li>
<a href="#" onclick="goTo('index.php?module=klimaat&pagina=dashboard&id=7',false);">
Boven</a>
</li>
</ul>
</li>
</ul>
</div>
For CSS i'm using the default style sheet delivered by jstree. The documentation provided by jstree is really crappy. So stackoverflow is a big help, but i couldn't find this one on the website.
If you need more code or information, please ask. Thanks
You just have to include this in the CSS:
a .jstree-icon
{
background-image: url("yourimage.png")!important;
background-position: 0!important;
}
This is a fiddle working correctly (updated 2016):