I would like to style a language select button for my website. This is the design of what it should look like:
I am using Bootstrap 3.
How can I achieve that? Any help is appreciated!
EDIT
Solved it by creating a custom dropdown using css+jquery, see the result below.
There were many useless comments and downvotes. Useless comments should have downvote option as well.
At least giving some advice would have been helpful.
But anyway, got my problem sorted.
<!DOCTYPE html>
<html>
<head>
<title>Custom dropdown</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled Bootstrap JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Google font -->
<link href="https://fonts.googleapis.com/css?family=Raleway|Rancho" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
/* Custom dropdown */
.custom-sel a {
text-decoration: none;
text-transform: uppercase;
margin: 0;
padding: 10px;
text-align: left;
font-family: Raleway;
color: #546e7a;
font-size: 15px;
font-weight: 700;
line-height: 24px;
display: block;
}
.custom-sel a:hover {
text-decoration: none;
background-color: #EDF0F2;
color: #ffffff;
}
.custom-sel a.selected {
background-color: transparent;
}
.custom-sel a.selected:hover {
background-color: transparent;
color: #546e7a;
}
.hidden {
display: none;
}
.lightblue {
color:#03a9f4;
margin-left: -4px;
}
.show-sel {
background-color: #ffffff;
box-shadow: -5px 0px 65px 0px rgba(0, 0, 0, 0.18);
}
.custom-sel {
margin: 30px;
display: inline-block;
}
/* Custom dropdown */
</style>
<script type="text/javascript">
$(document).ready(function () {
// Show dropdown
$('.selected').click(function () {
$('.custom-sel').addClass('show-sel');
$('.custom-sel a').removeClass('hidden');
});
// Hide dropdown when not focused
$('.custom-sel').focusout(function () {
$('.custom-sel').removeClass('show-sel');
$('.custom-sel a:not(:first)').addClass('hidden');
}).blur(function () {
$('.custom-sel').removeClass('show-sel');
$('.custom-sel a:not(:first)').addClass('hidden');
});
});
</script>
</head>
<body>
<div class="container">
<!-- Custom dropdown -->
<div class="custom-sel">
<a class="selected" href="#">ENG <i class="fa fa-caret-down lightblue" aria-hidden="true"></i></a>
<a class="hidden" href="#">EST</a>
<a class="hidden" href="#">RUS</a>
<a class="hidden" href="#">FIN</a>
</div>
</div>
</body>
</html>
Here's the result I'm currently happy with:
https://jsfiddle.net/manb0hzh/
Related
I am trying to create a search function for a FAQ that I am assembling.
I am very new to HTML, CSS, JS, etc., so please, I need help here! :-)
I created an HTML Code, grabbing from here and there from the Internet, until I managed to do something decent visually.
I don't know how to make searchable out my code, or I am not sure what to change, in order to use a JS file to be able to search and show me the Question and the Answer, of what's being searched on.
Here is my HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FAQ PAGE</title>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./accordion.css">
<link rel="stylesheet" href="./files/bootstrap.min.css">
</head>
<body>
<main>
<h1 class="faq-heading">FAQ'S</h1>
<div id="accordion_search_bar_container">
<input type="search" id="accordion_search_bar" placeholder="Search"/>
</div>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="faq-one">
<!-- faq question -->
<h1 class="faq-page">What is an FAQ Page?</h1>
<!-- faq answer -->
<div class="faq-body">
<p>This is a FAQ test question</p>
</div>
</div>
<hr class="hr-line">
<div class="faq-two">
<!-- faq question -->
<h1 class="faq-page">Why do you need an FAQ page?</h1>
<!-- faq answer -->
<div class="faq-body">
<p>You need a FAQ to help your users</p>
</div>
</div>
<hr class="hr-line">
<div class="faq-three">
<!-- faq question -->
<h1 class="faq-page">Does it improves the user experience of a website?</h1>
<!-- faq answer -->
<div class="faq-body">
<p>It helps your users on a 24/7 basis</p>
</div>
</div>
</div>
</main>
<script src="./main.js"></script>
<script src="./script.js"></script>
<script src="./files/jquery.min.js"></script>
<script src="./files/bootstrap.min.js"></script>
</body>
</html>
This is my CSS
body{
font-family: 'Work Sans', sans-serif;
}
.faq-heading{
border-bottom: #777;
padding: 20px 60px;
}
.faq-container{
display: flex;
justify-content: center;
flex-direction: column;
}
.hr-line{
width: 60%;
margin: auto;
}
/* Style the buttons that are used to open and close the faq-page body */
.faq-page {
/* background-color: #eee; */
color: #444;
font-size: 20px;
cursor: pointer;
padding: 10px 20px;
width: 60%;
border: none;
outline: none;
transition: 0.4s;
margin: auto;
}
.faq-body{
margin: auto;
/* text-align: center; */
width: 57%;
padding: auto;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.faq-page:hover {
background-color: #F9F9F9;
}
/* Style the faq-page panel. Note: hidden by default */
.faq-body {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}
.faq-page:after {
content: '\02795';
/* Unicode character for "plus" sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2796";
/* Unicode character for "minus" sign (-) */
}
And this is a JS I found for search, but I cannot make it to work for my HTML code :'(
(function(){
var searchTerm, panelContainerId;
// Create a new contains that is case insensitive
$.expr[':'].containsCaseInsensitive = function (n, i, m) {
return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
$('#accordion_search_bar').on('change keyup paste click', function () {
searchTerm = $(this).val();
$('#accordion > .panel').each(function () {
panelContainerId = '#' + $(this).attr('id');
$(panelContainerId + ':not(:containsCaseInsensitive(' + searchTerm + '))').hide();
$(panelContainerId + ':containsCaseInsensitive(' + searchTerm + ')').show();
});
});
}());
Any help will be greatly appreciated.
Thanks a lot!
I'm trying to import an markdown file into an HTML.
I've used the iframe tag to do so but it is shortening the content inside a box.
As I'm using markdown to write the text thats going inside the main tag, so my intention is that it keeps the height of the text in markdow.
I also used the lib https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.min.js but it didn't worked.
And a common import, and it didnt work it either.
The codes are the following:
HTML
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<!-- CSS styles -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/fontawesome.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/solid.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/brands.min.css"/>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<!-- Javascript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.min.js" integrity="sha512-dnvR4Aebv5bAtJxDunq3eE8puKAJrY9GBJYl9GC6lTOEC76s1dbDfJFcL9GyzpaDW4vlI/UjR8sKbc1j6Ynx6w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Lightweight client-side loader that feature-detects and load polyfills only when necessary -->
<script src="https://cdn.jsdelivr.net/npm/#webcomponents/webcomponentsjs#2/webcomponents-loader.min.js"></script>
<!-- Load the element definition -->
<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md#1/src/zero-md.min.js"></script>
<script type="module" src="javascript.js"></script>
<!-- Simply set the `src` attribute to your MD file and win -->
<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.2.0/markdown-it.js"></script>
<title></title>
</head>
<body>
<header>Header</header>
<aside>
<div id="mySidenav" class="sidenav">
<p>nav bar</p>
</div>
<aside>
<main>
<!-- include my markdown file here -->
<!-- try 1 -->
<link href="mkd.md" rel="import" />
<!-- try 2 -->
<pre class="hljs"><code>
<link class="hljs rel="import" href="mkd.md">
</code></pre>
<!-- try 3-->
<div w3-include-html="mkd.md"></div>
</main>
<footer>Footer</footer>
</body>
</html>
CSS:
header{
background-color: #000000;
padding-left: 4%;
padding-top: 1%;
padding-bottom: 1%;
margin-top: -0.001%;
}
main{
padding-left: 4%;
max-width: 86%; // set maximum width of the container
white-space: wrap; // do not let text wrap
overflow: hidden; // do not let overflow out of container
text-overflow: ellipsis; // shorten all overflowing text
}
body, html,main {
height:100%;
width:100%;
}
iframe {
height:100%;
width:100%;
background:cyan;}
#mySidenav a {
position: fixed;
left: -230px;
transition: 0.3s;
padding: 15px;
width: 270px;
text-decoration: none;
font-size: 20px;
color: white;
border-radius: 0 5px 5px 0;
margin:0;
padding-top: 0;
padding-bottom: 0;
}
And I used a markdown available at https://markdown-it.github.io/
All the solutions I've found it I had to install a package, is there a way to do it just importing it ?
Edited:
There is a scroll bar and if I remove it doesn't show the whole content, and the markdown is plain, it not enhanced, as it should be since I'm using <script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.2.0/markdown-it.js"></script>
Thanks you all guys!
I am using bootstrap 4 to style my html pages. And i am using font awesome to add social media icons on the webpage too.
<!DOCTYPE html>
<html lang = 'en'>
<head>
<meta charset = 'utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>
Page Title
</title>
<style>
body {background-color: lightcyan}
.fa {
padding: 20px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa:hover {
opacity: 0.6;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
.fa-youtube {
background: #bb0000;
color: white;
}
</style>
</head>
<body>
<div class = 'container'>
<div class = 'row'>
<div class = 'col text-center'>
</div>
</div>
</div>
</body>
</html>
But when i import the bootstrap4 library, the social media icons shape distorts.
<!DOCTYPE html>
<html lang = 'en'>
<head>
<meta charset = 'utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>
Action Page
</title>
<style>
body {background-color: lightcyan}
.fa {
padding: 20px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa:hover {
opacity: 0.6;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
.fa-youtube {
background: #bb0000;
color: white;
}
</style>
</head>
<body>
<div class = 'container'>
<div class = 'row'>
<div class = 'col text-center'>
</div>
</div>
</div>
</body>
</html>
I dont understand what the problem here is.
Can somebody please help me solving this problem...
Thanks in advance ! :)
If you use chrome inspect tools and play around with switching off css and changing the values for display or position etc.. You will see which rule is breaking it. I found changing these fixed it:
.fa-linkedin, .fa-youtube {
display: inline;
}
(hint: in the dev tools it also tells you which css file is causing the changes, i think it was font-awesome here)
I am trying to get the `cover' template to work. All I did was copy both of the files (HTML and CSS) from the folder with all the templates from getbootstrap.com and it isn't displaying like they have it on the website.
This is what mine looks like.
This is what it looks like on bootstrap website.
HTML:
/*
* Globals
*/
/* Links */
a,
a:focus,
a:hover {
color: #fff;
}
/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
color: #333;
text-shadow: none; /* Prevent inheritance from `body` */
background-color: #fff;
border: 1px solid #fff;
}
/*
* Base structure
*/
html,
body {
height: 100%;
background-color: #333;
}
body {
color: #fff;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
.site-wrapper-inner {
display: table-cell;
vertical-align: top;
}
.cover-container {
margin-right: auto;
margin-left: auto;
}
/* Padding for spacing */
.inner {
padding: 30px;
}
/*
* Header
*/
.masthead-brand {
margin-top: 10px;
margin-bottom: 10px;
}
.masthead-nav > li {
display: inline-block;
}
.masthead-nav > li + li {
margin-left: 20px;
}
.masthead-nav > li > a {
padding-right: 0;
padding-left: 0;
font-size: 16px;
font-weight: bold;
color: #fff; /* IE8 proofing */
color: rgba(255,255,255,.75);
border-bottom: 2px solid transparent;
}
.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
background-color: transparent;
border-bottom-color: #a9a9a9;
border-bottom-color: rgba(255,255,255,.25);
}
.masthead-nav > .active > a,
.masthead-nav > .active > a:hover,
.masthead-nav > .active > a:focus {
color: #fff;
border-bottom-color: #fff;
}
#media (min-width: 768px) {
.masthead-brand {
float: left;
}
.masthead-nav {
float: right;
}
}
/*
* Cover
*/
.cover {
padding: 0 20px;
}
.cover .btn-lg {
padding: 10px 20px;
font-weight: bold;
}
/*
* Footer
*/
.mastfoot {
color: #999; /* IE8 proofing */
color: rgba(255,255,255,.5);
}
/*
* Affix and center
*/
#media (min-width: 768px) {
/* Pull out the header and footer */
.masthead {
position: fixed;
top: 0;
}
.mastfoot {
position: fixed;
bottom: 0;
}
/* Start the vertical centering */
.site-wrapper-inner {
vertical-align: middle;
}
/* Handle the widths */
.masthead,
.mastfoot,
.cover-container {
width: 100%; /* Must be percentage or pixels for horizontal alignment */
}
}
#media (min-width: 992px) {
.masthead,
.mastfoot,
.cover-container {
width: 700px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Cover Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="cover.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">Cover</h3>
<nav>
<ul class="nav masthead-nav">
<li class="active">Home</li>
<li>Features</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
<div class="inner cover">
<h1 class="cover-heading">Cover your page.</h1>
<p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
<p class="lead">
Learn more
</p>
</div>
<div class="mastfoot">
<div class="inner">
<p>Cover template for Bootstrap, by #mdo.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
Thanks!
Remove your linked files and replace them with the ones seen here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Cover Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link rel="stylesheet" href="http://getbootstrap.com/assets/css/ie10-viewport-bug-workaround.css">
<!-- Custom styles for this template -->
<link href="http://getbootstrap.com/examples/cover/cover.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<link rel="stylesheet" href="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">Cover</h3>
<nav>
<ul class="nav masthead-nav">
<li class="active">Home</li>
<li>Features</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
<div class="inner cover">
<h1 class="cover-heading">Cover your page.</h1>
<p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
<p class="lead">
Learn more
</p>
</div>
<div class="mastfoot">
<div class="inner">
<p>Cover template for Bootstrap, by #mdo.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
I'm trying to create a navbar that will appear on every page, by using ng-include to reference it. The navbar works by itself, but for some reason it isn't showing up on the page(s) that I am trying to ng-include it on (for example, the dashboard). I am not using bootstrap because I'm trying to do it from scratch, for learning purposes. I feel like I'm possibly not understanding how AngularJS works?
Here is the code I have so far:
dashboard.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel='stylesheet' href='dashboard.css'>
<title>Dashboard</title>
</head>
<body ng-app='MyApp'>
<nav class="navbar"><div ng-include src="'navbar.html'"></div><p>Hi!</p></nav>
<div class='dashboard'>
Here be contents
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>
navbar.html:
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<link rel='stylesheet' href="navbar.css">
</head>
<body ng-app='MyApp'>
<nav class='navbar'>
<ul>
<li>Home</li>
<li>Temp</li>
</ul>
</nav>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>
navbar.css:
.navbar {
font-family: Arial, sans-serif;
font-size: .9em;
}
.navbar ul {
list-style-type: none;
overflow: hidden;
margin: 0;
padding: 0;
background-color: lightslategray;
position: fixed;
top: 0;
width: 100%;
}
.navbar li {
float: left;
}
.navbar a {
display: block;
text-decoration: none;
cursor: pointer;
padding: 14px 16px;
text-align: center;
background-color:lightslategray;
color: white;
}
.navbar a:hover {
background-color: darkslategrey;
}
.active {
}
Your navbar template shouldn't be an entirely new HTML page. You are just injecting markup, so that file should include code as it would be written.
navbar.html should ONLY consist of
<nav class='navbar'>
<ul>
<li>Home</li>
<li>Temp</li>
</ul>
</nav>
Try removing the single quotes around navbar.html and also make sure that navbar.html exists in the same directory as dashboard.html. If it's in a different directory, you must specify.
First, ng-include must only have the code you need in that part, for example just <nav> </nav> tag.
Second, because you didn't add navbar.css on dashboard.html that is the reason why the navbar doesn't show.