I have created a navigation menu at my Home Page's header. I've set up the links in the navigation, but I want the links to be opened in a new tab. How can I achieve that?
<div class="sticky-nav">
<nav id="menu">
<ul id="menu-nav">
<li class="current">Home</li>
<li>About Us</li>
<li>Contact us</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Services <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Manicures and Pedicures</li>
<li>Hair</li>
<li>Make Up</li>
<li>Hair Removal</li>
<li>Skincare</li>
<li>Hamam Maghrabi</li>
</ul>
</li>
</ul>
</nav>
</div>
More about a-target attribute at: W3Schools
Use: <a href="#" target="_blank".
<div class="sticky-nav">
<nav id="menu">
<ul id="menu-nav">
<li class="current">Home</li>
<li>About Us</li>
<li>Contact us</li>
<li class="dropdown"><a class="dropdown-toggle" target="_blank" data-toggle="dropdown" href="#">Services <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Manicures and Pedicures</li>
<li>Hair</li>
<li>Make Up</li>
<li>Hair Removal</li>
<li>Skincare</li>
<li>Hamam Maghrabi</li>
</ul>
</li>
</ul>
</nav>
</div>
Use target="_blank" in all your anchor tag
DEMO
Related
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<li>Home</li>
<li>About us</li>
<li class="active">Projects</li>
<li>Testimonials</li>
<li>Contacts</li>
</a>
</li>
</ul>
Hey there, I have this navbar code on my HTML project. However, when i insert my .html into validator.w3.org, i get the issue. Can someone please help me check? I'm pretty sure I closed it already..
You have to wrap those li tags inside anchor tag with ul.
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<ul>
<li>Home</li>
<li>About us</li>
<li class="active">Projects</li>
<li>Testimonials</li>
<li>Contacts</li>
</ul>
</a>
</li>
</ul>
this will solve first warning in validator.
I need a dropdown like this inside a tab like this, I want the dropdown as tab using Materialize. How can I do this?
HTML:
<nav class="nav-extended">
<div class="nav-wrapper">
<div class="top-nav">
<i class="material-icons">menu</i>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<li>JavaScript</li>
</ul>
</div>
<ul class="side-nav" id="mobile-demo">
<li>Sass</li>
<li>Components</li>
<li>JavaScript</li>
</ul>
<ul class="drop-tab">
<li>
<!--Disabled Tab-->
</li>
</ul>
<ul materialize="tabs" class="tabs tabs-transparent">
<li class="tab space-tab"><a class="active" href="#test2">Test 2</a></li>
<li class="tab">Disabled Tab</li>
<li class="tab">Test 4</li>
<li class="tab">Test 2</li>
<li class="tab">Disabled Tab</li>
<li class="tab"><a materialize="dropdown" href="#" class="dropdown-button" data-activates="dropdown1">Dropdown</a></li>
</ul>
</div>
</nav>
<div>something</div>
<ul id="dropdown1" class="dropdown-content black white-text">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
CSS:
.tabs {
overflow-x: visible !important;
overflow-y: initial !important;
}
JS
$(document).ready(function() {
$('.dropdown-button').dropdown();
});
Dropdown in nav-extended what you want is an open issue for more information you can see the following link - github issues #3920
I need to make the filter button aligned to the menu and modify its css using bootstrap. I am new to bootstrap so cant figure it out. i have tried padding the result but it didnt work. Thank you in advance :)
<ul class="nav navbar-nav container col-md-6">
<li class="dropdown col-md-2">
School <b class="caret"></b>
<ul class="dropdown-menu scrollable-menu">
<li><a href="about_us.php" >About Us</a></li>
<li>Advertise</li>
<li>Team</li>
<li>Art Curator</li>
</ul>
</li>
<li class="dropdown col-md-2">
Category <b class="caret"></b>
<ul class="dropdown-menu scrollable-menu">
<li><a href="about_us.php" >About Us</a></li>
<li>Advertise</li>
<li>Team</li>
<li>Art Curator</li>
<li>Jobs & Internships</li>
</ul>
</li>
<li class="dropdown col-md-2">
Course <b class="caret"></b>
<ul class="dropdown-menu scrollable-menu">
<li><a href="about_us.php" >About Us</a></li>
<li>Advertise</li>
<li>Team</li>
<li>Art Curator</li>
</ul>
</li>
<li class="dropdown col-md-2">
Degree <b class="caret"></b>
<ul class="dropdown-menu scrollable-menu">
<li><a href="about_us.php" >About Us</a></li>
<li>Advertise</li>
<li>Team</li>
<li>Art Curator</li>
</ul>
</li>
<li class="dropdown col-md-2">
Degree <b class="caret"></b>
<ul class="dropdown-menu scrollable-menu">
<li><a href="about_us.php" >About Us</a></li>
<li>Advertise</li>
<li>Team</li>
<li>Art Curator</li>
</ul>
</li>
<li class="col-md-2">
<button type="submit" class="btn btn-mine" >Filter Results</button>
</li>
</ul>
Add the id btnFilter to your "Filter Results" button and add the following css to your stylesheet
#btnFilter {
margin:9px 0 0;
}
.cat > b.caret {
position:absolute;
top:50%;
}
The caret on the category dropdown was falling down so I have adjusted that as well by adding class cat and absolutely positioning the caret.
I have created a pen using html you provided. http://codepen.io/shreya1289/pen/KMKOLg
For that you need to some customization for set the control location in your page like as per below it will helpful to you.
<style type="text/css">
.caret{
margin-left:62px !important;
}
a.dropdown-toggle {
line-height: 0px !important;
}
</style>
here you are not added full html code so may be you need some alteration in above styles.
I have this in my HTML , I am using bootstrap 3 classes to make a drop down with in another drop down.
<div class="subnav">
<ul class="nav-pills">
<li class="dropdown" style="float: right;">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" >
<span id="spnUsrName">Welcome, {{usrName}}</span>
</a>
<ul class="dropdown-menu pull-right">
<li class="disabled" >Disabled link 1</li>
<li class="disabled" >Disabled link 2</li>
<li class="divider"></li>
<li class="dropdown-submenu">Settings
<ul class="dropdown-menu">
<li>Change Password</li></ul>
</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
However, the 'ul' inside the first dropdown-meu is not showing up. The "Settings" option is displayed, but change password option is not displayed. Where have I gone wrong.
I am having a little problem with the navigation list items going a little below the top-bar when I resize the browser. When I remove the image it seems to be working perfectly fine on all screen resolutions but inserting the logo has had an affect on this. Is there any way I can solve this. Can't seem to find out what the problem is.
HTML:
<!-- HEADER START -->
<div id="header">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>
<a href="index.html"><img src="img/flogo.svg" class="logo" alt="Logo">
Sharp <span>Media </span>
</a>
</h1>
</li>
</li>
<li class="toggle-topbar menu-icon"><span>menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="divider"></li>
<li class="has-dropdown">
<li>Home</li>
<ul class="dropdown">
</ul>
</li>
<li class="divider"></li>
<li>FAQs</li>
<li class="divider"></li>
<li class="has-dropdown">
<li>Contact Us</li>
<ul class="dropdown">
<li class="divider"></li>
</ul>
</li>
</ul>
</section>
</nav>