Trying to implement the dropdown on for the first time on this site, and have been having issues with it. Probably something I have missed but I've been looking at it for a while now and can't see what's wrong!
Below is a copy of the code on my page (Which I have copied from here: https://foundation.zurb.com/sites/docs/top-bar.html)
<div class="top-bar">
<div class="top-bar-title">
<span data-responsive-toggle="responsive-menu" data-hide-for="medium" style="display: none;">
<button class="menu-icon dark" type="button" data-toggle=""></button>
</span>
<Strong>Polaris CI Performance Board</Strong>
</div>
<div id="responsive-menu">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li>
One
<ul class="menu vertical">
<li>One</li>
</ul>
</li>
<li role="menuitem">Two</li>
<li role="menuitem">Three</li>
</ul>
</div>
<div class="top-bar-right">
</div>
</div>
</div>
As you can see from the screenshot the dropdown isn't compressing:
The dropdown menu (or any component that uses JavaScript, which you can identify by the data-attributes) requires the Foundation JavaScript to be initialized on the page. Your screenshot looks like this is not running... Make sure at the bottom of your <body> tag you have
<script src="js/vendor/jquery.min.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
See e.g. http://foundation.zurb.com/sites/docs/installation.html#html-starter-template
Related
I am using below bootstrap code for a drop-down button. it's working for dropdown but is not responsive on mobile devices.
how to make it responsive.
<div class=" col-sm-4 col-xs-6">
<div class="guu">
Login
<div class="dropdown">
<button class="dropbtn boxed-btn blank">Register</button>
<div class="dropdown-content">
Left Side
Right Side
</div>
</div>
</div>
</div>
</div>
Thanks in advance.
You should make a list !
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
as written here :
https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp
#waqar, please provide a working snippet so that we can see the issue with responsiveness, please have a look at the below working snippet, see if it helps you :)
Note: follow the documentation of the bootstrap dropdown, that will resolve the issue you are facing,
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Menu
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Choice1</li>
<li>Choice2</li>
<li>Choice3</li>
<li class="divider"></li>
<li>Choice..</li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
I am stuck with a problem with my nav bar. While clicking on the MENU option, nothing happens but if I right click on them and open them in a new tab they work fantastically. The thing is it's working in Mozilla but not in Chrome
What should I do?
Here's the HTML:
<div class="navbar navbar-fixed-top custom-navbar" role="navigation">
<div class="container">
<!-- navbar header -->
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
</button>
New Event
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li> Intro</li>
<li> Overview</li>
<li> Speakers</li>
<li> Programs</li>
<li> Register</li>
<li> Venue</li>
<li> Sponsors</li>
<li> Contact</li>
</ul>
</div>
</div>
</div>
<!-- =========================
INTRO SECTION
============================== -->
<section id="intro" class="parallax-section">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12">
<h3 class="wow bounceIn" data-wow-delay="0.9s">July 22 - 26 in San Francisco, CA</h3>
<h1 class="wow fadeInUp" data-wow-delay="1.6s">Web Design Conference</h1>
LEARN MORE
REGISTER NOW
</div>
</div>
</div>
</section>
I'll just take a wild guess and assume you're using Bootstrap.
Make sure to include the bootstrap.js and jquery.js in the correct order:
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
Make sure to include jquery before your bootstrap.js file, this should do it.
For me, it's working in this fiddle.
Within js/smoothscroll.js, you have two dependencies:
jQuery.scrollTo
jQuery.localScroll
The issue seems to be with these plugins (possibly outdated?). localScroll calls e.preventDefault, however jQuery.scrollTo is not properly scrolling to the element with the corresponding hash (the code is minified, and I can't find the source for those versions).
After updating the dependencies, I verified scrolling worked as intended (at least in Chrome).
Steps to resolve:
Replace jQuery.scrollTo with:
https://raw.githubusercontent.com/flesler/jquery.scrollTo/master/jquery.scrollTo.min.js
And replace jQuery.localScroll with:
https://raw.githubusercontent.com/flesler/jquery.localScroll/master/jquery.localScroll.min.js
I am trying to replicate the following codepen navigation bar although I have a simple logo on the left and two links on the right. The framework used is Zurb Foundation: https://codepen.io/IamManchanda/pen/LymroM?editors=1000
So far I cannot seem to get the menu responsive. When I use a large window, the mobile menu stays put and will not toggle like in the pen. Any ideas how to replicate this?
Template:
<div class="title-bar" data-responsive-toggle="navbar" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle="navbar"></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="navbar">
<div class="top-bar-left">
<ul class="menu">
<li class="menu-text">
<img id="logo" src="./assets/img/logo4white.png" alt="logo">HANYU.CO
</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li id="home"><router-link class="link align-left" to="/">Home</router-link></li>
<li id="logout" v-if="this.$cookies.get('user')" #click="logout"><a>Logout</a></li>
</ul>
</div>
</div>
Thanks in advance!
I realized I was not calling $(document).foundation(); in the JavaScript. Oops!
I'm trying to make a neat little responsive website and I come across consistent problems, and I can't seem to be able to pinpoint the problem.
Whenever I'm making a menu and use or other elements, they turn into plain html e.g.: all list elements will have bullets and be simply plain text, without any background.
Attached is an example image:
My code for this is:
<ul class="menu">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
Here is another example:
And my code is:
<div class="row" style="float: right; display: table-cell;vertical-align: middle;">
<button type="button"
id="voltage_button"
onclick="measureVoltage();">
Voltage
</button>
<button type="button"
id="octiv_current_button"
onclick="measureCurrent();">
Current
</button>
<button type="button"
id="phase_button"
onclick="measurePhase();">
Phase
</button>
</div>
Im not sure what you want exactly, and it's kinda difficult to understand what you want, but as far as I understand, you want the bullet points to disappear and also inlining the menu.
HTML:
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>Web</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
Right Button Dropdown
<ul class="dropdown">
<li>Voltage</li>
<li>Current</li>
<li>Phase</li>
</ul>
</li>
</ul>
</section>
</nav>
JS:
$(document).foundation();
Is it possible to prevent the dropdown menu to dissapear when "clicking in it". Trying to use a dropdown as a container for a textarea.
e.g
<div class="row-fluid">
<div class="span12">
<div class="btn-group">
<a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">
<strong id="revolver">
<i class="icon-envelope"></i> 
<span class="caret"></span>
</strong>
</a>
<ul class="dropdown-menu">
<div class="row-fluid send-message-textarea">
<div class="span12">
<textarea></textarea>
<br>
<button class="btn btn-mini"><strong>Send</strong></button>
</div>
</div>
</ul>
</div>
</div>
</div>
Edit:
I guess a copy paste of the dropdown function inside bootstrap.js and then alter the selector and remove the unwanted functionality could be an option. I took a look at https://github.com/twitter/bootstrap/blob/master/js/bootstrap-dropdown.js but I could not pinpoint exactly where the specific functionality lies. Help would be appritiated.
In your HTML, add an id to the <ul>
<ul class="dropdown-menu" id="test">
add a handler that prevents the dropdownmenu from responding to click
$(document).ready(function() {
$("#test").click(function(e) {
e.stopPropagation();
});
});
you are now able to click and edit in the textarea.