links on the page
Hi!
The above picture is the links on the page I want to build (T&C is the active link and has its own content below it), wherein whenever someone clicks on another link, for instance, FAQ, the text should move from right to left smoothly and occupy t&C current position and display its own content.
I was trying this via bootstrap tabs but no luck, is there any different approach to it?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tabs With Dropdown Menu</h3>
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Submenu 1-1</li>
<li>Submenu 1-2</li>
<li>Submenu 1-3</li>
</ul>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
</body>
</html>
(I can't comment yet, so I put it in an answer)
Please add the HTML and CSS (and maybe JS) source code to get help.
Related
I am trying to use MaterializeCSS Icon to work on the navbar. In the code posted, arrow-drop_down doesn't seem to work. Instead, it shows just a text. Icons render on other pages except in the app.component.html file.
I tried to import the below code directly in the index.html file. Still the same result. Am I missing something here? Also, I cannot figure out a reason why Icons display in any other component apart from app.component.html
Any help would be much appreciated. Thank you. Let me know if more details are required.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>UiCommunity</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<header>
<nav class="white">
<div class="container nav-wrapper">
Community
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>
<a routerLink="/" routerLinkActive="active">HOME</a>
</li>
<li>
<a routerLink="/event" routerLinkActive="active">EVENTS</a>
</li>
<li *ngIf="!authenticated()">
<a routerLink="/login" routerLinkActive="active">LOGIN</a>
</li>
<li *ngIf=!authenticated()>
<a routerLink="/register" routerLinkActive="active">SIGNUP</a>
</li>
<li *ngIf=authenticated()>
<a routerLink="/logout" class="black-text">LOGOUT</a>
</li>
<li *ngIf=authenticated()>
<a routerLink="/profile" class="dropdown-trigger black-text" data-target="dropdown1">PROFILE<i class="material-icons right">arrow_drop_down</i></a>
</li>
<li>
<a class="btn waves-effect waves-lime lime darken-4 white-text">Donate</a>
</li>
</ul>
</div>
</nav>
<ul id='dropdown1' class='dropdown-content'>
<li>one</li>
<li>two</li>
<li class="divider" tabindex="-1"></li>
<li>three</li>
<li><i class="material-icons">view_module</i>four</li>
<li><i class="material-icons">cloud</i>five</li>
</ul>
</header>
<main>
<router-outlet></router-outlet>
</main>
<footer></footer>
This is my style.css
/* You can add global styles to this file, and also import other style files */
#import "../node_modules/materialize-css/dist/css/materialize.css";
#import url('https://fonts.googleapis.com/css?family=Philosopher');
#import url('https://fonts.googleapis.com/icon?family=Material+Icons');
Can you try to import your styles file directly on your app component ts/js file? If you got all the dependencies installed and it works on other pages, it is probably an importing or wrong path issue.
Hello fellow developers.. I have a problem with the foundation dropdown menu, and after quite a while of tackling the problem I search for your help, foundation gurus.
I am using foundation 6.2.4-full. I've created a dropdown menu but I noticed an issue, the problem lies when using the menu with mobile devices (try on iphone 4). It's submenu items aren't clickable. For example, click on the Map option, and then try to click on Pokemons sub-option. The code is embedded below.
I can't find the problem, I am quite new to foundation, perhaps I'm missing an important option?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="device-width=width, initial-scale=1">
<link rel="stylesheet" href="/css/foundation/foundation.min.css">
<script src="/js/jquery_2.2.4.min.js"></script>
<script src="/js/foundation/what-input.js"></script>
<script src="/js/foundation/foundation.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
$(document).foundation();
});
</script>
<nav class="top-bar">
<ul class="dropdown vertical medium-horizontal menu" data-dropdown-menu>
<li>Home</li>
<li class="has-submenu">
Map
<ul class="menu submenu vertical nested" data-submenu>
<li>Pokemons</li>
<li>Poke Gyms</li>
<li>Poke Stops</li>
</ul>
</li>
<li>news</li>
<li class="has-submenu">
<a>Guides</a>
<ul class="menu submenu vertical nested" data-submenu>
<li>
Game guides
</li>
<li>
Site guides
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
This seems to work, give it a go on mobile, I think Foundation will detect mobile and turn the hover into a click, all events are in their documentation here: https://foundation.zurb.com/sites/docs/dropdown-menu.html.
Here's my example that works:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="device-width=width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet"/>
</head>
<body>
<nav class="top-bar">
<ul class="dropdown vertical medium-horizontal menu" data-dropdown-menu>
<li>Home</li>
<li class="has-submenu">
Map
<ul class="menu submenu vertical nested" data-submenu>
<li>Pokemons</li>
<li>Poke Gyms</li>
<li>Poke Stops</li>
</ul>
</li>
<li>news</li>
<li class="has-submenu">
<a>Guides</a>
<ul class="menu submenu vertical nested" data-submenu>
<li>
Game guides
</li>
<li>
Site guides
</li>
</ul>
</li>
</ul>
</nav>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script>
<script>
$(document).ready(function() {
$(document).foundation();
});
</script>
</body>
</html>
I want to have a dropdown menu on my site. I got it working fine when storing the files on my server. However, I'd like to load them from a CDN. What happens when I try this though is that the CSS aspects work fine, but the JavaScript aspects don't, which means that the following HTML:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/foundation/6.2.3/foundation.min.css">
</head>
<body>
<div class="top-bar">
<div class="top-bar-right">
<ul class="dropdown menu" data-dropdown-menu>
<li>
Dropdown menu
<ul class="menu vertical">
<li>
First dropdown link
</li>
<li>
Second dropdown link
</li>
</ul>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/foundation/6.2.3/foundation.min.js"></script>
<script type="text/javascript">
$(document).foundation();
</script>
</body>
</html>
just produces this:
Any ideas what's wrong with this code?
A quick check at https://github.com/zurb/foundation-sites/blob/v6.3/bower.json shows that Foundation 6 supports jquery version ~ 2.2.0 so changing your JQuery version should solve your issue
$(document).foundation();
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.js"></script>
<div class="top-bar">
<div class="top-bar-right">
<ul class="dropdown menu" data-dropdown-menu>
<li>
Dropdown menu
<ul class="menu vertical">
<li>
First dropdown link
</li>
<li>
Second dropdown link
</li>
</ul>
</li>
</ul>
</div>
</div>
I am working on JQuery. Bootstrap and HTML5 in an asp.net application. I am trying to implement a simple menu in the master page. My code is like below:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu
1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Submenu 1-1</li>
<li>Submenu 1-2</li>
<li>Submenu 1-3</li>
</ul>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
<div class="container body-content">
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</body>
</html>
It is working fine when I am calling the "jquery.min.js" and "bootstrap.min.js" file directly from internet server as you can see in the code. But when I include the files from local machine like:
<link href="Styles/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.9.0.js" type="text/javasript"></script>
<script src="Scripts/bootstrap.min.js" type="text/javascript"></script>
sub menu is not showing.
I am not sure what is actually going on.
Any help will be thankfully accepted.
I think your problem is related to the version of jquery, so copy this
https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
and put it in URL then right click save as ... you should save it as javascript file, and then add it to your project in the correct place
So, I want to have the same default bootstrap navbar on every page on my website. If I change the name of one page (eg: Page 1), I want to have it changed across all my pages. From what I understand, I can just use jQuery to load the header separately. However, this doesn't seem to pull the "active" class for the page which is currently active. How would I have the "active" class only on the page which is currently active.
FYI, I'm using the AngularJS framework.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li> <!-- Change this ".active" class-->
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
EDIT: Also, the links to the other pages would change. For example, if I were on page1, the link to home would be "../", link to page2 would be "../page2", link to itself would be "".
I don't know AngularJS, but I use this javascript for my web site:
$('.navbar').find('a').each(function()
{
if (window.location.href.indexOf($(this).attr('href')) > -1)
{
$(this).parent().addClass('active');
}
});