I'm currently creating a navigation menu and I want my sub sections such as "typography" to stay open in the menu once they have been clicked and the new page has been loaded.
How would I best best to complete this task
Here is my HTML code for the navigation menu.
<div class="sidenav">
<a class="current3" href="index.html">Home</a>
Journal
<button class="dropdown-btn">Davids Work
<i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
<div class="dropdown-container">
<a class="dropdowntext2" href="three-designed-objects-homepage.html">Designed Objects</a>
<!--
Link 2
Link 3
-->
</div>
<button class="dropdown-btn">Priscas Work
<i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
<div class="dropdown-container">
<a class="dropdowntext2" href="Typography-arrangement.html">Typography</a>
<a class="dropdowntext2" href="lithome.html">Literature</a>
<!-- Link 3 -->
</div>
<a class="submenu"href="oldwebsites.html">Archived Websites</a>
<a class="nav-menu" href="about.html">About</a>
<button class="openBtn" onclick="openSearch()">Search</button>
</div>
Related
I have a side navbar and I'm trying to make it active according to page click.
This is my sidenav.nav which is a component.
<template>
<aside class="col-md-3">
<nav class="list-group">
<a href="/" class="list-group-item" exact>
Account overview
</a>
<a class="list-group-item" href="/profile/address"> My Address </a>
<a class="list-group-item" href="/profile/orders"> My Orders </a>
<a class="list-group-item" href="/profile/wishlist"> My wishlist </a>
<a class="list-group-item" href="/profile/settings"> Settings </a>
<a class="list-group-item" href=""> Log out </a>
</nav>
</aside>
</template>
Below is my code for address page, other pages are similar to this.
<template>
<section class="section-content padding-y">
<div class="container">
<div class="row">
<sidenav />
<!-- col.// -->
<main class="col-md-9">
<a href="#" class="btn btn-light mb-3">
<i class="fa fa-plus"></i> Add new address
</a>
<div class="row">
<div class="col-md-6">
<article class="box mb-4">
<h6>London, United Kingdom</h6>
<p>
Building: Nestone <br />
Floor: 22, Aprt: 12
</p>
<a href="#" class="btn btn-light disabled">
<i class="fa fa-check"></i> Default</a
>
<a href="#" class="btn btn-light">
<i class="fa fa-pen"></i>
</a>
<a href="#" class="btn btn-light">
<i class="text-danger fa fa-trash"></i>
</a>
</article>
</div>
<!-- col.// -->
<div class="col-md-6">
<article class="box mb-4">
<h6>Tashkent, Uzbekistan</h6>
<p>
Building one <br />
Floor: 2, Aprt: 32
</p>
Make default
<a href="#" class="btn btn-light">
<i class="fa fa-pen"></i>
</a>
<a href="#" class="btn btn-light">
<i class="text-danger fa fa-trash"></i>
</a>
</article>
</div>
<!-- col.// -->
<div class="col-md-6">
<article class="box mb-4">
<h6>Moscow, Russia</h6>
<p>
Lenin street <br />
Building A, Floor: 3, Aprt: 32
</p>
Make default
<a href="#" class="btn btn-light">
<i class="fa fa-pen"></i>
</a>
<a href="#" class="btn btn-light">
<i class="text-danger fa fa-trash"></i>
</a>
</article>
</div>
<!-- col.// -->
</div>
<!-- row.// -->
</main>
</div>
</div>
</section>
</template>
<script>
import sidenav from "~/components/profile-sidenav";
export default {
components: {
sidenav,
},
};
</script>
I have set account overview as the active page, when i go to address page i need 'My address' tab to be active. How do i do that? I tried but that didn't work.
Instead of using <a> tags, use <nuxt-link>. Then, in your css, style the .nuxt-link-exact-active class— for example:
.nuxt-link-exact-active {
font-weight: bold;
}
Now if you have <nuxt-link to=“/address”>My Address</nuxt-link> and the user is on the /address page, the class is added to the nuxt-link element.
I'm struggling with a problem for several days now and I couldn't find a solution yet, even though I've tried myself with different approaches, searched google and the mighty stackoverlow for hours.
The set-up:
I've got a panel with two list-groups next to each other, where relations can be managed. On the left are the linked items, on the right all available items that are not linked yet (featuring a pagination and all). The js-logic is working flawless. Clicking on a question-mark does display details for the item. Clicking on a plus moves an item to the left list, clicking on an "x" moves it back to the right. Of course the icons are properly switched, too.
The problem:
The items are user-generated and the form is used both on big and small screens (used bootstrap for that reason).
Some of the items do have a rather long name, limiting the users to keep it short is not an option here. If the text is too long, it just breaks out of the layout.
What I tried so far:
Since the input-groups work with simulating table-elements, I've tried several approaches with table-layout:fixed;, but that doesn't seem to work if it's not really a table. Then I tried several approaches with containing different elements in div-containers and giving them percentual sizes.
It never worked.
Now I'm experimenting with cutting the text server-side, but that looks stupid if the screen is wide enough and the text is cut anyway.
Does someone smarter than me have a solution that makes overflow:hidden; and text-overflow:ellipis; work on those elements?
Here is a (very cleaned-up) fiddle to work with:
https://jsfiddle.net/Fanmade/9vf8xvuL/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<ul class="list-group" id="left">
<li class="list-group-item">
<h4 class="text-center">Header Left</h4>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 1
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-times fa-lg"></i>
</a>
</div>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 2
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-times fa-lg"></i>
</a>
</div>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 3
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-times fa-lg"></i>
</a>
</div>
</li>
</ul>
</div>
<div class="col-md-6">
<ul class="list-group" id="left">
<li class="list-group-item">
<h4 class="text-center">Header Right</h4>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-plus fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 4
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
</div>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-plus fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 5 just has a really long text and I don't want to cut it when there is enough space on wide screens
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
</div>
</li>
<li class="list-group-item">
<div class="input-group">
<a href="#" class="btn input-group-addon info-button">
<i class="fa fa-plus fa-lg"></i>
</a>
<button class="btn btn-default form-control" type=button>
Element 6
</button>
<a href="#" class="btn switch btn-remove input-group-addon">
<i class="fa fa-question-circle-o fa-lg"></i>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
Edit after the answers:
Thank you both so much for the answer!
I'm feeling so stupid right now. Of course the answer had to be so simple and I was just searching in the wrong direction.
The working fiddle is
https://jsfiddle.net/sesn/y98pz4hj/1/
Here is your answer
button { white-space: normal !important; height: auto !important; }
It will work :
button {
white-space: normal !important;
height: auto !important;
}
I want to have this bootstrap menu I'm creating and will use for many shows on our website to be a plain nav-tabs menu with the Social and info links on the right side. But I can't figure out the code. I'm wondering if someone can help us with the code and change it so it uses the nav-tabs instead of the normal nav & looks clean instead of the gray block it's in currently...
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
</a>
<a class="brand" href="#">Name Of Show</a>
<div class="nav-collapse">
<ul class="nav">
<li>Cast</li>
<li>Episodes</li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<div class="btn-group">
<a class="btn btn-default" style="color:#3b5998;margin-top:-2px;" href="#">
<i class="fa fa-facebook fa-2x" title="Facebook"></i>
</a>
<a class="btn btn-default" style="color:#00aced;margin-top:-2px;" href="#">
<i class="fa fa-twitter fa-2x" title="Twitter"></i>
</a>
<button type="button" style="height:39px;margin-top:-2px;" class="btn btn-inverse">TV-14</button>
<button type="button" style="height:39px;margin-top:-2px;" class="btn btn-default disabled">1 Season | HD | 2011</button>
</div>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div><!-- /navbar-inner -->
</div>
Thank you in advance to anyone who helps me with this. I've been stuck for days...
With Protostar Template (one of default templates in Joomla!) you could use the nav-tabs instead of nav-pills or others Bootstrap classes opening the administration panel > module > menu > advanced > Menu Class Suffix; and inside the field write simply nav-tabs after a space.
If you want substitute the entire HTML code of menu you have to build a new Joomla! module or try to modify the php files here: joomla root/modules/mod_menu/tmpl
I really like the current style of the navigation bar in twitter Bootstrap v3.3.6 and I'm wondering how to wrap angularJS buttons inside them?
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#/"> Jenny Tech </a>
</div>
<ul class="nav navbar-nav navbar-right">
<!--<button ng-click="Home()">Home</button>-->
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
Putting in <button ng-click="Home()">Home</button> simply puts a button that is in a different style and size in the upper right part of the nav bar.
Would appreciate some help on this.
try this May be it will help:
<button type="button" class="btn btn-primary" ng-click="Home()">Home</button>
I am using SB Admin to create a website, but I have a problem in that the side navigation link to the root directory always shows as selected.
Here is a screenshot:
Here is the code:
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li>
<i class="fa fa-dashboard fa-fw"></i> Dashboard
</li>
<li>
<i class="fa fa-bar-chart-o fa-fw"></i> Charts
</li>
<li>
<i class="fa fa-file-o fa-fw"></i> Quotes
</li>
<li>
<i class="fa fa-shopping-cart fa-fw"></i> Orders
</li>
How can I prevent the side navigation link to the root directory (Dashboard) being shown as selected when it isn't actually selected? I guess this issue is created because it is linked to /.