I am doing myself a website but while on developing I got on my first problem.
Links are not working for some reason.
None of them are working.
<nav class="cd-3d-nav js-cd-3d-nav" id="cd-3d-nav">
<ul class="cd-3d-nav__list">
<li class="cd-3d-nav__item cd-3d-nav__item--selected">
<a href="pocetna.html">
<svg aria-hidden="true" class="icon icon--md">
<i class="lni-emoji-happy"></i>
</svg>
<span>O meni</span >
</a>
</li>
<li class="cd-3d-nav__item">
<a href="kontakt.html">
<svg aria-hidden="true" class="icon icon--md">
<i class="lni-briefcase"></i>
</svg>
<span>Projekti</span>
</a>
</li>
<li class="cd-3d-nav__item">
<a href="#2">
<svg aria-hidden="true" class="icon icon--md">
<i class="lni-seo-monitoring"></i>
</svg>
<span>Usluge</span>
</a>
</li>
<li class="cd-3d-nav__item">
<a href="kontakt.html">
<svg aria-hidden="true" class="icon icon--md">
<i class="lni-phone-handset"></i>
</svg>
<span>Kontakt</span>
</a>
</li>
</ul>
<span class="cd-3d-nav__marker cd-3d-nav__marker--col-1" aria-hidden="true"></span>
</nav>
You just need to put the html files in the same directory as the index.html file. They will work like a charm. Good luck.
Related
I have a navbar inside the component of Angular project. The navbar that is used is responsive and has a toggle button which appears after you reduce the size of the browser window. The purpose of the button is to display or hide the menus when clicked.
What I need is that when Click anywhere instead of the button, it should close the menus that were displaying.
This is in the component of Angular Project.
<div class="row my-row">
<div class="col my-col-1 ">
<input type="checkbox" id="menu" />
<label for="menu" class="menu">
<span></span>
<span></span>
<span></span>
</label>
<nav class="nav text-white">
<ul>
<li><a routerLink=""><i class="bi bi-house my-fas"></i> <span class="my-span text-white"> Home</span></a></li>
<li><a (click)="onClick('feature')" ><i class="bi bi-play my-fas"></i> <span class="my-span"> Featured Games</span></a></li>
<li><a (click)="onClick('quickPlay')"><i class="bi bi-play my-fas"></i> <span class="my-span"> Most Played Games</span> </a></li>
<ng-template [ngIf]="permission">
<!-- <li ><i class="fas fa-user my-fas"></i> <span class="my-span"> Profile</span></li> -->
<li (click)="onLogout()"><i class="bi bi-power my-fas"></i> <span class="my-span text-white"> Logout</span></li>
<li (click)="onLogout()"><i class="bi bi-person-x my-fas"></i> <span class="my-span text-white"> Unsubscribe</span></li>
</ng-template>
</ul>
</nav>
</div>
<div class="col my-col-2">
<div *ngIf="allow ; else loggedOut">
<span class="user-name">{{userName}}</span>
<img src="../../../assets/Avatar/1.png" alt="Avatar" class="avatar">
<div class="dropdown dropleft">
<span type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="drop-down" > <i style="color: white;" class="ml-4 bi bi-caret-down"></i></span>
<div class="dropdown-menu " style="margin-right: -50px;margin-top:40px;border-radius: 8px;" aria-labelledby="dropdownMenuButton">
<!-- <a class="dropdown-item" href="#"><i class="fas fa-user my-fas"></i> <span class="my-span"> Profile</span></a> -->
<a class="dropdown-item" href="http://gamenow.noeticworld.com/unsub-portal"><i class="bi bi-person-x my-fas"></i> <span class="my-span"> Unsubscribe</span></a>
<a (click)="onLogout()" class="dropdown-item" href="#"><i class="bi bi-power my-fas"></i> <span class="my-span"> Logout</span></a>
</div>
</div>
</div>
<ng-template #loggedOut>
<button style="outline: none;" (click)="onClick('login')" class="my-button">
Login
</button>
<button style="outline: none;" (click)="onClick('login')" class="my-button">
Join Now
</button>
</ng-template>
</div>
</div>
You can achieve that functionality by using Host listeners for example within the menu component like this:
#HostListener('document:click')
clickout() {
// toggle the menu by using its reference
}
I have 3 div's and 3 buttons each button on click reveals one div but what im trying to achieve is to set div-nr1 to be by default displayed
this is the angular code that im using...
var app = angular.module('app',[]);
app.controller('Test',function($scope){
$scope.show = 1;
});
this are buttons
<ul>
<li class="has-subnav" ng-click="show = 1">
<a routerLink="/dashboard">
<i class="fa fa-home fa-2x"></i>
</a>
</li>
<li class="has-subnav" ng-click="show = 2">
<a routerLink="/projects">
<i class="fa fa-laptop fa-2x"></i>
</a>
</li>
<li class="has-subnav"ng-click="show = 3" >
<a routerLink="/teams" >
<i class="fa fa-users" aria-hidden="true"></i>
</a>
</li>
</ul>
and this is one of the div's
<div class="information-boxes" ng-show="show==1">
<ul class="box-docs" >
<li>
<div class="docImages">
<img src="../assets/images/lp.png" alt="">
</div>
Couldn't you just init the show variable in the markup like below?
<div ng-controller="MyController" ng-init="show=1">
Consider the following component sidebar.component.html:
<div class="sidebar">
<ul>
<li class="tooltipped" data-position="right" data-delay="50" data-tooltip="Go to the dashboard">
<a href="#">
<i class="material-icons">home</i>
<span>Home</span>
</a>
</li>
<li class="tooltipped" data-position="right" data-delay="50" data-tooltip="Manage your times">
<a href="#">
<i class="material-icons">watch_later</i>
<span>Times</span>
</a>
</li>
<li class="tooltipped" data-position="right" data-delay="50" data-tooltip="Go to settings">
<a href="#">
<i class="material-icons">settings</i>
</a>
</li>
</ul>
</div>
In app.component.html, I use the sidebar using its tags (<sidebar>). However, now I want to make it so that the <li> elements are given inside the <sidebar> tags so that they are no longer inside sidebar.component.html to make the component re-usable.
I'm not sure what this is called and I am having trouble finding it.
Thanks in advance.
Create a sidebar component with an <ng-content> where the passed children should be displayed
#Component({
selector: 'sidebar',
template: '<ul><ng-content></ng-content></ul>'
})
export class SidebarComponent {
}
and use it like
<sidebar>
<li class="tooltipped" data-position="right" data-delay="50" data-tooltip="Go to the dashboard">
<a href="#">
<i class="material-icons">home</i>
<span>Home</span>
</a>
</li>
<li class="tooltipped" data-position="right" data-delay="50" data-tooltip="Manage your times">
<a href="#">
<i class="material-icons">watch_later</i>
<span>Times</span>
</a>
</li>
<li class="tooltipped" data-position="right" data-delay="50" data-tooltip="Go to settings">
<a href="#">
<i class="material-icons">settings</i>
</a>
</li>
</sidebar>
Here is my HTML code
.wrapper.mini-menu .sidebar-nav li > span{
display: none;
}
<div class="wrapper mini-menu">
<div class="header"></div>
<div class="sidebar">
<ul class="sidebar-nav">
<li>
<a href="#">
<i class="fa fa-home"></i>
<span>Hide Item1</span>
<i class="fa arrow pull-right"></i>
</a>
<ul class="sub-menu">
<li>
<a href="">
<i class="fa fa-user-plus"></i>
<span>Show Item 1</span>
</a>
</li>
<li>
<a href="">
<i class="fa fa-user-plus"></i>
<span>Show Item 2</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#item1">
<i class="fa fa-dashboard"></i>
<span>Hide Item2</span>
</a>
</li>
<li>
<a href="#item1">
<i class="fa fa-cogs"></i>
<span>Hide Item3</span>
</a>
</li>
</ul>
</div>
</div>
I want to hide hide item1, hide item2 and hide item3. But I don't want to hide show items. If I don't use > selector it hides all span elements. How to select only those item by CSS > selector?
What your current CSS selector is saying is:
Hide all spans that are children of li that are descendants of .sidebar-nav. If you only want to target first level li elements do this instead:
.wrapper.mini-menu .sidebar-nav > li > a > span {
display: none;
}
Look:
.wrapper.mini-menu .sidebar-nav > li > a{
display: none;
}
<div class="wrapper mini-menu">
<div class="header"></div>
<div class="sidebar">
<ul class="sidebar-nav">
<li>
<a href="#">
<i class="fa fa-home"></i>
<span>Hide Item1</span>
<i class="fa arrow pull-right"></i>
</a>
<ul class="sub-menu">
<li>
<a href="">
<i class="fa fa-user-plus"></i>
<span>Show Item 1</span>
</a>
</li>
<li>
<a href="">
<i class="fa fa-user-plus"></i>
<span>Show Item 2</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#item1">
<i class="fa fa-dashboard"></i>
<span>Hide Item2</span>
</a>
</li>
<li>
<a href="#item1">
<i class="fa fa-cogs"></i>
<span>Hide Item3</span>
</a>
</li>
</ul>
</div>
You select a span standing right after the .fa-user-plus icon with the + selector , but not so sure this what you look for ?
#import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
span {
display:none;
}
.fa.fa-user-plus + span{
display: inline-block;
}
<div class="wrapper mini-menu">
<div class="header"></div>
<div class="sidebar">
<ul class="sidebar-nav">
<li>
<a href="#">
<i class="fa fa-home"></i>
<span>Hide Item1</span>
<i class="fa arrow pull-right"></i>
</a>
<ul class="sub-menu">
<li>
<a href="">
<i class="fa fa-user-plus"></i>
<span>Show Item 1</span>
</a>
</li>
<li>
<a href="">
<i class="fa fa-user-plus"></i>
<span>Show Item 2</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#item1">
<i class="fa fa-dashboard"></i>
<span>Hide Item2</span>
</a>
</li>
<li>
<a href="#item1">
<i class="fa fa-cogs"></i>
<span>Hide Item3</span>
</a>
</li>
</ul>
</div>
</div>
Here is my jsfiddle link: http://s30.postimg.org/44jynnz35/Untitled_2.png
Now it shows like this http://s30.postimg.org/44jynnz35/Untitled_2.png
I need vertically align one-by-one.
<div id="social-bar">
<a href="https://www.facebook.com/pages/Open-Source-Hacker/181710458567630">
<i class="icon icon-facebook"></i>
<span>Facebook</span>
</a>
<a href="https://twitter.com/moo9000">
<i class="icon icon-twitter"></i>
<span>Twitter</span>
</a>
<a href="https://plus.google.com/103323677227728078543/">
<i class="icon icon-google-plus"></i>
<span>Google Plus</span>
</a>
<a href="http://opensourcehacker.com/">
<i class="icon icon-rss"></i>
<span>Blog</span>
</a>
</div>
May i know, What is the exact css property to fix this?
Thanks in advance.
Anchors are, by default, inline. Use this in your CSS:
#social-bar a {
display:block;
}