Are there any css hacks to make come up with this image below with bootstrap nav-tab markup? Having the rounded corners with shadows in it?
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active">ABOUT OUR SEASONINGS</li>
<li>GET RECIPE IDEAS</li>
<li>INGREDIENTS & NUTRITION INFO</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
</div>
<div class="tab-pane" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
</div>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
I'm thinking of making it
Here I provide the complete example to create bootstrap tab panel with a rounded border.
$(function(){
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
});
html{
margin: 20px 10px auto;
font-family: arial,sans-serif;
}
.nav:after,
.nav:before {
content:"";
display: table;
}
.nav:after {
clear:both;
overflow:hidden;
}
.nav {
zoom: 1;
margin-left: 20px;
padding-bottom: 3px;
}
.nav li {
list-style: none outside none;
float: left;
position: relative;
}
.nav .active {
z-index: 3;
}
.nav li:before,
.nav li:after,
.nav a:before,
.nav a:after {
content:"";
position: absolute;
bottom:0;
}
.nav a {
float: left;
padding: 10px 40px;
text-decoration: none;
color: #fff;
background: rgb(97, 142, 70);
border-radius: 5px 5px 0 0;
-webkit-transform: perspective(30) rotateX(10deg);
}
.nav .active a {
background: #F66599;
color:#BE3569;
-webkit-transform: perspective(30) rotateX(10deg);
}
.nav a:before {
left:-20px;
}
.nav a:after {
right: -20px;
}
.nav .active:before,
.nav .active:after {
z-index: 1;
background: #F66599;
}
.nav li:first-child a:before,
.nav li:last-child a:after {
background-color: #fff;
}
.tab-content {
background: rgba(60, 118, 61, 0.17);;
color:#444444;
padding: 20px;
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-tabs" id="myTab">
<li class="active">Home</li>
<li>Portfolio</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">Home page</div>
<div class="tab-pane" id="portfolio">Portfolio page</div>
<div class="tab-pane" id="messages">Messages page</div>
<div class="tab-pane" id="settings">Setting page</div>
</div>
To Add CSS shadows use following css
.tab-content { -webkit-box-shadow: 0px -5px 14px 1px rgba(0,0,0,0.75); -moz-box-shadow: 0px -5px 14px 1px rgba(0,0,0,0.75); box-shadow: 0px -5px 14px 1px rgba(0,0,0,0.75); }
jsfiddle : jsfiddle link
Ref: w3codeschool.com
Try something like this
CSS:
.nav-tabs{
box-shadow: 0px 0px 10px #777;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus{
-webkit-transform: perspective(30) rotateX(10deg);
}
Related
Alright, so here's what I'm trying to do. I have a dashboard with a list of items (Dashboard 1, Dashboard 2,..., etc.). I'm trying to make them each have a dropdown bar come down whenever I click on one of them. Here's what I got:
Here is a.html
<html>
<head>
<title>Database</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<link rel="stylesheet" type="text/css" href="dashboard.css"/>
<script src="scripts/jquery-1.12.0.min.js"></script>
<script src="scripts/general.js"></script>
</head>
<body>
<div id="header">
<div class="logo">
<img src="/images/whatever.png"/>
</div>
</div>
<div id="container">
<div class="sidebar">
<ul id="nav">
<li><a class=selected href="#">Dashboard</a></li>
<li>Dashboard 1</li>
<li>Dashboard 2</li>
<li>Dashboard 3</li>
<li>Dashboard 4</li>
</ul>
</div>
<div class="content">
some content yay
<div id="box">
<div class="box-top">News</div>
<div class="box-panel"> This is simple news lalal</div>
</div>
</div>
</div>
</body>
</html>
Here is dashboard.css (note, styles.css isn't really important in this and is mainly meant for different pages, so I'm not including it):
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div#dbheader {
width: 100%;
height: 50px;
background-color: #010101;
margin: 0 auto;
}
.logo a {
margin-left: 5px;
}
div#container {
width: 100%;
margin: 0 auto;
}
.sidebar {
width: 250px;
height: 100%;
background-color: #171717;
float: left;
}
.content {
width: auto;
height: 100%;
margin-left: 250px;
background-color: #222;
padding: 15px;
}
ul#nav li{
}
ul#nav li a{
text-decoration: none;
color: #aaa;
display: block;
padding: 10px;
font-size: 0.8em;
border-bottom: 1px solid;
border-color: #111;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
ul#nav li a:hover,
ul#nav li a:active{
background-color:#030303;
color: #fff;
padding-left: 20px;
/* margin-left: 5px;*/
}
ul#nav li a.selected {
background-color: #030303;
color: #fff;
}
div#box {
margin-top: 15px;
}
div#box .box-top {
color: #fff;
text-shadow: 0px 0px 1px #000;
padding: 5px;
padding-left: 15px;
background-color: #2980b9;
font-weight: 300;
}
div#box .box-panel {
padding: 15px;
background-color: #fff;
color: #999;
}
and finally, here's my general.js file:
$(document).ready(function(){
$("ul#nav li a.selected").click(function(){
$("ul#nav li").slideToggle('fast');
});
});
What happens is that I want to click on the a.selected part of my sidebar menu, and then I want the sidebar I already have (just to see if it works) to slide down fast. What happens though is that when I click on a.selected (aka Dashboard 1), the whole sidebar retracts back into Dashboard 1 and the dashboard side bar just disappears. So it essentially did the opposite of what I wanted.
Does anyone know how I can fix this?
If I understood your intent correctly, this code should do the job:
$(document).ready(function(){
$("ul#nav li a.selected").click(function(){
$("ul#nav li:not(:first-child)").slideToggle('fast');
});
});
I'm trying to make a small jQuery function to hide & show content when a radio button is checked. The script works but when the radio button is checked the content is not showing right. It's possible to make effect to slide out then slide in the other content?
HTML:
<!-- Section class pricing -->
<section class="pricing">
<div class="container">
<hr class="hr">
<!-- Price table switcher -->
<div class="table-switcher" id="btn">
<p class="fieldset">
<input type="radio" checked="checked" name="duration" value="account-1" id="account-1">
<label for="account-1">1</label>
<input type="radio" name="duration" value="account-2" id="account-2">
<label for="account-2">2</label>
<span class="btn-switch"></span>
</p>
</div>
<!-- Price table switcher end -->
<div class="clearfix"></div>
<!-- Info box -->
<div class="clearfix"></div>
<div class="accounts container">
<div class="price-table">
<!-- Account Plus -->
<div class="col-md-12">
<!-- Table -->
<div class="account-1 account-box">
<ul class="list-unstyled col-md-6">
<li class="plan">Basic</li>
<li class="plan-cost">$99k</li>
<li class="plan-duration">Per Month</li>
<li>Use on One Site</li>
<li>Feature Two</li>
<li>Another Great Feature</li>
<li class="plan-button">Get Started »</li>
</ul>
<!-- Table end -->
<!-- Table -->
<ul class="list-unstyled col-md-6">
<li class="plan">Basic</li>
<li class="plan-cost">$99</li>
<li class="plan-duration">Per Month</li>
<li>Use on One Site</li>
<li>Feature Two</li>
<li>Another Great Feature</li>
<li class="plan-button">Get Started »</li>
</ul>
<!-- Table end -->
</div>
</div>
<!-- Account Plus end -->
<!-- Account O€ -->
<div class="account-2 account-box">
<!-- Table -->
<div class="col-md-6">
<ul class="list-unstyled">
<li class="plan">Basic</li>
<li class="plan-cost">$99</li>
<li class="plan-duration">Per Month</li>
<li>Use on One Site</li>
<li>Feature Two</li>
<li>Another Great Feature</li>
<li class="plan-button">Get Started »</li>
</ul>
</div>
<!-- Table end -->
<!-- Table -->
<div class="col-md-6">
<ul class="list-unstyled">
<li class="plan">Basic</li>
<li class="plan-cost">$99</li>
<li class="plan-duration">Per Month</li>
<li>Use on One Site</li>
<li>Feature Two</li>
<li>Another Great Feature</li>
<li class="plan-button">Get Started »</li>
</ul>
</div>
<!-- Table end -->
</div>
<!-- Account 0€ -->
</div>
</div>
</div>
</section>
CSS:
// Prebuild colors
#white : #ffffff;
#dark : #4a4a4a;
#blue : #4e94c9;
#blue-dark : #2279bc;
#blue-font : #276db3;
#purple : #805ca2;
#purple-dark: #5b308d;
#gray-light : #a8a8a8;
#gray-font : #797979;
#pink : #bf4194;
#pink-light : #F04;
// Other
#letter-spacing:(2px);
.bold { font-weight: 700}
.hr {
max-width: 100px;
height: 4px;
background: url("../images/hr.gif") no-repeat center;
margin: 20px auto;
}
// Pricing section -3
.pricing {
padding: 100px 0;
h2 {
letter-spacing: #letter-spacing;
font-size: 30px;
font-weight: 400;
text-transform: uppercase;
text-align: center;
color: #blue-font;
.bold {
color: #purple-dark;
}
}
// Price table switcher
.table-switcher {
text-align: center;
input[type="radio"]:checked + label + .btn-switch,
input[type="radio"]:checked + label:nth-of-type(n) + .cd-switch{
/* Safary bug fix selector */
-webkit-transform: translateX(120px);
-moz-transform: translateX(120px);
-ms-transform: translateX(120px);
-o-transform: translateX(120px);
transform: translateX(120px);
background: #blue-font;
}
.fieldset {
margin-top: 15px;
margin-bottom: 30px;
display: inline-block;
position: relative;
padding: 0px 2px;
border-radius: 50em;
border: 1px solid #gray-light;
input[type="radio"]:checked + label {
color: #white;
transition: all 0.5s;
}
}
input[type="radio"] {
position: absolute;
opacity: 0;
}
label {
position: relative;
z-index: 1;
display: inline-block;
float: left;
width: 120px;
height: 39px;
line-height: 45px;
cursor: pointer;
font-size: 1.4rem;
}
.btn-switch {
position: absolute;
top: 2px;
left: 2px;
height: 40px;
width: 120px;
background-color: #purple-dark;
border-radius: 50em;
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
transition: transform 0.5s;
}
}
.no-js .table-switcher {
display: none;
}
// Table info
// Popover box
.arrow_box {
position: relative;
background: #purple;
border: 3px solid #purple-dark;
padding: 15px;
color: #white;
}
.arrow_box{
&:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
&:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
}
.arrow_box {
&:before{
border-color: rgba(136, 183, 213, 0);
border-top-color: #purple-dark;
border-width: 10px;
margin-left: -10px;
}
&:after {
border-color: rgba(136, 183, 213, 0);
border-top-color: #purple-dark;
border-width: 10px;
margin-left: -10px;
}
}
// Accounts
.accounts {
position: relative;
transition: all 0.5s;
}
.top-tooltip{
background-color: #26c07d;
font-size: 12px;
font-weight: 400;
margin:-87px auto 68px;
padding: 6px;
color:#fff;
width:80px;
}
.price-table {
width: 100%;
.account-1 {
.col-md-6 {
padding: 0;
left: 0;
}
}
}
.best-value{
padding: 87px 0 72px !important;
}
.small-boxes {
margin-top: 40px;
padding-top: 72px;
padding-bottom: 68px;
text-transform: uppercase;
text-align: center;
background-color: #fff;
width: 100%;
}
.plan {
font-size: 24px;
color: #79a5b3;
line-height:30px;
border: none !important;
}
.plan-cost {
font-size:60px !important;
color:#000 !important;
line-height:90px !important;
border: none !important;
}
.plan-duration {
line-height: 30px !important;
margin-bottom:35px;
border: none !important;
}
.plan-button {
border: none !important;
margin-top: 30px;
}
.plan-button-big {
border: none !important;
margin-top: 45px;
}
.price-table ul li {
color: #a2a4a6;
font-size: 16px;
border-bottom: #f2f4f5 1px solid;
border-top: #f2f4f5 1px solid;
line-height: 47px;
}
.price-table ul li a{
background-color:#FFF;
border: #d4d7d9 1px solid;
padding: 15px 30px;
font-size: 20px;
color:#27b0d8;
font-weight:400;
text-decoration:none;
border-radius: 4px;
}
.price-table ul li a:hover{
background-color:#44bbdd;
border: #44bbdd 1px solid;
color:#fff;
}
.price-table ul li a.big{
background-color:#ec4f4f;
border: #ec4f4f 1px solid;
padding: 15px 30px;
font-size: 24px;
color:#fff;
font-weight:400;
text-decoration:none;
border-radius: 4px;
}
.price-table ul li a.big:hover{
background-color:#293340;
border: #293340 1px solid;
color:#fff;
}
}
JS:
$('.account-2').hide();
$(document).ready(function () {
$('input[name="duration"]').click(function () {
$('.account-1').fadeOut('slow');
$('.account-2').fadeIn('slow');
});
$('input[name="duration"]').click(function () {
$('.account-2').fadeOut('slow');
$('.account-1').fadeIn('slow');
});
});
Demo
Try this script... codepen
$('.account-2').hide();
$(document).ready(function () {
var flagcheck= false;
$('input[name="duration"]').click(function () {
if(flagcheck==false){
$('.account-1').fadeOut('slow');
$('.account-2').fadeIn('slow');
flagcheck=true;
}else{
$('.account-2').fadeOut('slow');
$('.account-1').fadeIn('slow');
flagcheck= false;
}
});
});
It is not working as you are using same trigger to do the same thing. Use
this.val()
to target your content that you want to display.
UPDATED:
$(document).ready(function () {
$('input[name="duration"]').click(function () {
$objToHide = "";
$('.account-box').each(function(){//find out which obj is visible here
if ($(this).css("display") == "block"){
$objToHide = $(this);
}
});
var content = $(this).val()
$objToHide.fadeOut('slow', function(){
$("."+content).fadeIn('slow')
});
});
});
Try above now, with this one you will find the visible element first and fade it out, when the fadeOut event will be done the other element will fade in.
I have been trying to over write the built in Bootstarp style on navbar dropdowns to no avail. I have some javascript trying to force it but I cant seem to get this to work. The native bootstrap javascript overwrites mine and it snaps back to being 228px height. Here is my code:
// CLOSE NAV BARS NO OVERLAPPING
$('.navbar button').click(function(){
var $target = $($(this).data('target'));
if(!$target.hasClass('in')){
$('.navbar .in').removeClass('in').height(0);
}
});
//DROPDOWN MODE SELECTOR LOGIN
// Force 100% height mobile navigation
$('#navbar-collapse-1, #navbar-collapse-2').css('height', $(window).height());
$(".dropdown-menu li a").click(function(){
var selText = $(this).text();
$(this).parents('.modeSelector').find('.dropdown-toggle').html(selText+' <span class="modeSelect menu_toggleable glyphicon glyphicon-menu-down pull-right"></span>');
});
$('#myMode-glyphicon-mobile, #myMode-glyphicon').on('show.bs.dropdown', function () {
$(".modeSelect").removeClass("glyphicon-menu-down").addClass("glyphicon-menu-up");
});
$('#myMode-glyphicon-mobile, #myMode-glyphicon').on('hidden.bs.dropdown', function () {
$(".modeSelect").removeClass("glyphicon-menu-up").addClass("glyphicon-menu-down");
});
// FLIP ALL THE GLYPHICONS NAVBAR
$('#navbar-collapse-1').on('shown.bs.collapse', function () {
$(".myMenu-glyphicon").removeClass("glyphicon-menu-down");
$(".myMenu-glyphicon").addClass("glyphicon-menu-up");
$(this).addClass("dropdown-open").removeClass("dropdown-closed");
if( $('#navbar-collapse-2').hasClass('dropdown-open') ){
$(".myLogin-glyphicon").removeClass("glyphicon-menu-up");
$(".myLogin-glyphicon").addClass("glyphicon-menu-down");
$("#navbar-collapse-2").removeClass("dropdown-open");
$("#navbar-collapse-2").addClass("dropdown-closed");
}
});
$('#navbar-collapse-1').on('hidden.bs.collapse', function () {
$(".myMenu-glyphicon").removeClass("glyphicon-menu-up");
$(".myMenu-glyphicon").addClass("glyphicon-menu-down");
$(this).removeClass("dropdown-open").addClass("dropdown-closed");
});
$('#navbar-collapse-2').on('shown.bs.collapse', function () {
$(".myLogin-glyphicon").removeClass("glyphicon-menu-down");
$(".myLogin-glyphicon").addClass("glyphicon-menu-up");
$(this).addClass("dropdown-open").removeClass("dropdown-closed");
if( $('#navbar-collapse-1').hasClass('dropdown-open') ){
$(".myMenu-glyphicon").removeClass("glyphicon-menu-up");
$(".myMenu-glyphicon").addClass("glyphicon-menu-down");
$("#navbar-collapse-1").removeClass("dropdown-open");
$("#navbar-collapse-1").addClass("dropdown-closed");
}
});
$('#navbar-collapse-2').on('hidden.bs.collapse', function () {
$(".myLogin-glyphicon").removeClass("glyphicon-menu-up");
$(".myLogin-glyphicon").addClass("glyphicon-menu-down");
$(this).removeClass("dropdown-open").addClass("dropdown-closed");
if( $('#navbar-collapse-1').hasClass('dropdown-open') ){
$(".myMenu-glyphicon").removeClass("glyphicon-menu-up");
$(".myMenu-glyphicon").addClass("glyphicon-menu-down");
}
});
HTML
<div class="header">
<!-- BEGIN SEARCH AND LOGIN -->
<div class="container">
<div class="col-sm-4 logo hidden-xs"><img class="img-responsive" title="TMC Logo" src="images/tmcLogo.png" alt=""></div>
<div class="col-sm-4 login-wrapper hidden-xs">
<ul class="list-inline header-list">
<li>Login to Navisphere</li>
<li id="myMode-glyphicon" class="pull-right list-unstyled dropdown modeSelector">
Shippers <span class="modeSelect glyphicon glyphicon-menu-down"></span>
<ul class="modes list-unstyled dropdown-menu" role="menu">
<li>Navisphere</li>
<li>CHRWTrucks</li>
<li>CHREUTransport</li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
<form class="login-form" role="login">
<div class="form-group">
<input type="text" class="user-input form-control" placeholder="Username">
<input type="text" class="pass-input form-control" placeholder="Password">
<button type="submit" title="Login" class="btn btn-default"><i class="glyphicon glyphicon-arrow-right"></i></button>
</div>
</form>
</div>
<div class="col-sm-4 search-wrapper hidden-xs">
<form class="search-form" role="search">
<div class="form-group">
<input type="text" class="search-input form-control" placeholder="Search">
<button type="submit" title="Search TMC" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
</div>
</form>
</div>
</div>
<div class="row mobileNav">
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand hidden-md hidden-xl hidden-sm hidden-lg" href="#"><img class="img-responsive" title="TMC Logo" src="images/tmcLogo.png" alt=""></a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" id="autocollapse" data-target="#navbar-collapse-1">
<span class="menu-toggle-text">MENU <i class="myMenu-glyphicon glyphicon glyphicon-menu-down"></i></span>
</button>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-2">
<span class="menu-toggle-text">LOGIN <i class="myLogin-glyphicon glyphicon glyphicon-menu-down"></i></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse dropdown-closed" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<form class="search-form mobileSearch-form hidden-sm hidden-md hidden-xl hidden-lg" role="search">
<div class="form-group">
<input type="text" class="search-input form-control" placeholder="Search">
<button type="submit" title="Search TMC" class="btn btn-default mobileSearch-btn"><i class="glyphicon glyphicon-search"></i></button>
</div>
</form>
<li class="active dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">SERVICES <span class="sr-only">(current)</span></a>
<div class="dropdown-menu hover-dropdown hidden-xs mainDropdown">
<div class="dividerNav"></div>
<ul class="list-inline hidden-xs">
<li>TMS Technology</li>
<li>Process Management</li>
<li>Consulting</li>
<li>Small Business Technology</li>
<li>Global Control Tower</li>
</ul>
</div>
</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">RESULTS</a>
<div class="dropdown-menu hover-dropdown hidden-xs mainDropdown">
<div class="dividerNav"></div>
<ul class="list-inline hidden-xs">
<li>Manufacturing</li>
<li>Automotive</li>
<li>Food</li>
<li>Produce</li>
<li>Retail</li>
<li>Paper/Packaging</li>
<li>Beverage</li>
</ul>
</div>
</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">RESOURCES</a>
<div class="dropdown-menu hover-dropdown hidden-xs mainDropdown">
<div class="dividerNav"></div>
<ul class="list-inline hidden-xs">
<li>Videos</li>
<li>White Papers</li>
<li>Case Studies</li>
<li>Blog</li>
</ul>
</div>
</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">ABOUT</a>
<div class="dropdown-menu hover-dropdown hidden-xs mainDropdown">
<div class="dividerNav"></div>
<ul class="list-inline hidden-xs">
<li>Our Story</li>
<li>Values</li>
<li>Leadership</li>
<li>Careers</li>
<li>News</li>
<li>Charitble Giving</li>
</ul>
</div>
</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">CONTACT</a>
<div class="dropdown-menu hover-dropdown hidden-xs mainDropdown">
<div class="dividerNav"></div>
<ul class="list-inline hidden-xs">
<li>Locations</li>
<li>Connect with an Expert</li>
<li>Email News</li>
<li>Update Preferences</li>
</ul>
</div>
</li>
</ul>
</div><!-- /.navbar-collapse -->
<div class="collapse navbar-collapse dropdown-closed" id="navbar-collapse-2">
<ul class="nav navbar-nav hidden-md hidden-xl hidden-sm hidden-lg mobileLogin">
<li>
<ul class="header-list list-unstyled">
<li class="list-unstyled mobile">Login to Navisphere</li>
<li id="myMode-glyphicon-mobile" class="list-unstyled dropdown modeSelector">
Shippers <span class="modeSelect glyphicon glyphicon-menu-down pull-right"></span>
<ul class="mobileList list-unstyled dropdown-menu mobile" role="menu">
<li>Navisphere</li>
<li>CHRWTrucks</li>
<li>CHREUTransport</li>
</ul>
</li>
</ul>
</li>
<div class="clearfix"></div>
<form class="login-form" role="login">
<div class="form-group">
<input type="text" class="user-input form-control longin-control" placeholder="Username">
<input type="text" class="pass-input form-control login-control" placeholder="Password">
<button type="submit" title="Login" class="btn btn-default mobileSearch-btn pull-right"><i class="glyphicon glyphicon-arrow-right"></i></button>
</div>
</form>
</ul>
</div>
</div><!-- /.container -->
</nav>
</div>
</div>
<!-- END HEADER -->
CSS
CSS
/************* BASIC STYLES **************/
a {
color:#tmcLightblue;
text-decoration:none;
}
a:hover {
text-decoration:none;
}
p {
margin: 10px 0;
}
body{
font-family:"Lato";
overflow-x:hidden;
}
html,body {
height: 100%;
min-height: 100%;
}
/********* NAV STYLES *********/
.dividerNav{
height:4px;
background-color:#fff;
}
.navbar.navbar-default > .container{
border-bottom:1px solid #tmcDarkblue
}
.menu-toggle-text{
color:#4fb4e1;
}
.navbar-toggle{
border:none;
padding:9px 1px;
}
.navbar-toggle:hover .navbar-toggle:focus{
background-color:none;
}
.hover-dropdown{
background-color:transparent;
}
.hover-dropdown ul{
border: medium none;
border-radius:0px;
background-color: rgba(0,58,99,0.80);
padding: 25px 0;
}
.navbar .hover-dropdown li a{
color:#fff;
margin: 0 18px;
}
.header-list{
margin-bottom:4px;
margin-top:15px;
}
.navbar-brand{
text-indent:-999px;
max-width:234px;
width:100%;
height:auto;
}
.nav > li {
display: block;
position: static;
margin: 0 25px 0 0;
}
.subscribe-input, .form-control:focus{
box-shadow:none;
border-color:#tmcDarkblue;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar {
text-align: center;
margin-bottom:8px;
border-bottom:none;
border-top:0px;
border-radius:0px;
border-left:0px;
border-right:0px;
border-top:0px;
}
.mobileNav{
margin-left: 0px;
margin-right: 0px;
display:block;
height:100%;
}
.modeSelector{
right:57px;
}
.dropdown a{
text-decoration:none;
}
.navbar .hover-dropdown li a:hover {
text-decoration:none;
color:#tmcLightblue;
}
.dropdown-menu{
width:100%;
text-align:center;
box-shadow:none;
border:none;
border-radius:0;
}
.mainDropdown{
margin-top:-1px !important;
}
.modes{
border:1px solid #tmcDarkblue;
border-radius:0px;
text-align:left;
}
.modes li a{
color:#tmcDarkblue;
}
.modes li a:hover{
color:#tmcLightblue;
}
.user-input, .pass-input{
width:41.5%;
float:left;
}
.search-input{
width:82%;
}
.subscribe-input, .form-control{
border-radius:0px;
border-color:#tmcDarkblue;
color:#tmcDarkgrey;
float:left;
margin-right:4px;
}
.glyphicon-arrow-right{
color:#c05d1a;
}
.glyphicon-search{
color:#c05d1a;
}
.logo, .search-wrapper {
padding-top:39px
}
#navbar-collapse-2, #navbar-collapse-1{
position: static;
width: 100%;
z-index: 2147483647;
}
.nav > li.dropdown{
/*border-bottom:2px solid #fff;*/
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{
color:#tmcLightblue;
background-color:none;
background:none;
border-bottom:2px solid #tmcDarkblue;
font-weight:bold;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
background-color: transparent;
color:#tmcLightblue;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
background-color: transparent !important;
color: #tmcLightblue;
}
.navbar-nav > li > a{
border-bottom:2px solid #fff;
}
.btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
background-color: #fff;
border-color: #tmcOrange;
color: #fff;
}
.glyphicon .glyphicon-search:hover {
color: #fff;
}
/********* HEADLINES *********/
.headlineBorder{
display:inline;
text-transform:uppercase;
font-size:20px;
/*border-bottom:3px solid #tmcGreen;*/
}
.headlineBorderblue{
display:inline;
text-transform:uppercase;
/*border-bottom:3px solid #tmcDarkblue;*/
}
.headlineBorderwhite{
display:inline;
text-transform:uppercase;
/*border-bottom:3px solid #fff;*/
color:#fff;
}
.headlineBorderwhite_small {
font-size: 22px;
margin: 0 0 5px;
}
.headlineList{
margin-bottom:15px;
}
.btn-blue{
border-color:#tmcLightblue;
}
.btn-blue:hover, .btn-blue:active, .btn-blue:focus{
background-color:#tmcDarkblue;
border-color:#fff;
}
.glyphicon-menu-right:hover{
color:#fff !important;
}
.headlineGlyph:hover{
color:#tmcLightblue !important;
}
.btn-mobile-right {
border:none;
}
.btn-mobile-right:hover, .btn-mobile-right:focus, .btn-mobile-right.focus, .btn-mobile-right:active, .btn-mobile-right.active, .open > .dropdown-toggle.btn-default {
background-color: transparent;
}
.glyphicon-menu-right, .glyphicon-menu-left{
/*color:#tmcLightblue;*/
}
.glyphicon-menu-right:hover, .glyphicon-menu-left:hover{
color:#fff;
}
.fourXfour{
margin-bottom: 50px;
}
/********** SIDEBAR STYLES ***********/
.sidebarImg{
margin:15px;
}
.sidebarImg > a {
display: block;
}
.caption{
margin-top:30px;
padding-left:15px;
padding-right:15px;
}
.caption > h4{
font-weight:bold;
line-height:12px;
}
/*********** CONTACT PAGE STYLES ***********/
.pageIntroheadline > ul.contactList li a{
color:#fff;
}
.fourXfour > ul.contactList li a{
color:#tmcLightblue;
}
.contactList{
margin-top:15px;
}
#myMap{
background:url('../images/worldMap.jpg');
background-repeat: no-repeat;
background-size:contain;
width: 100%;
height: 0;
padding-top: 66.64%; /* (img-height / img-width * width) */
/* (853 / 1280 * 100) */
}
.mapDescriptionwrapper{
display:block;
margin:-5px 0 0;
z-index:1;
}
.mapTitle{
background:#tmcLightblue;
padding:5px 8px;
border:1px solid #fff;
display:inline-block;
width:auto;
text-align:center;
color:#fff;
z-index:10;
}
.mapTitle:hover{
display:block;
background:orange;
display:inline-block;
}
.mapDescription{
display:none;
}
#description-box{
background-color: #tmcLightblue;
border: 1px solid white;
}
/********* INSIDE PAGE HERO IMAGE ************/
.insidePagehero {
display: block;
height: auto;
max-width: 960px;
min-height: 232px;
min-width: 392px;
width: 100%;
}
.halfHero{
padding:0;
}
.insideHerocolorPicker-orange{
background:#tmcOrange;
}
.insideHerocolorPicker-darkBlue{
background:#tmcDarkblue;
}
.insideHerocolorPicker-lightBlue{
background:#tmcLightblue;
}
.insideHerocolorPicker-green{
background:#tmcGreen;
}
.pageIntroheadline{
display: block;
color:#fff;
margin-top:5%;
margin-bottom:0;
}
.pageHero {
padding:0 15px 0 0;
}
/********* HOMEPAGE MARKETING AREA *********/
.marketing-wrapper{
margin-top:50px;
margin-bottom:50px;
}
.mareting-section{
padding:0;
}
/************************* FLIPPING STYLES *******************/
.marketing-wrapper h2{
margin-bottom:20px;
}
.flipperWrap{
padding:0;
}
.card {
width:100%;
max-width: 750.666px;
height: 348px;
margin: 0px;
display: inline-block;
clear:both;
}
.flip {
width:100%;
max-width: 750.666px;
height: 396px;
margin: 0px;
display: inline-block;
clear:both;
margin-bottom:30px;
}
.front, .back {
padding: 0px;
}
.front {
background-color: transparent;
}
.back {
background-color: transparent;
}
.arrowFront{
height:230px !important;
}
.arrowBack{
height:230px !important;
background:#c05d1a url(../images/triangle.jpg) no-repeat bottom right;
}
.blogInside, .tmsInside, .globalInside{
height: 50%;
margin: 2.5% auto;
width: 78%;
}
.flipBack{
color:#fff;
padding: 0px;
}
.flipOrange{
background-color:#tmcOrange;
}
.flipDarkblue{
background-color:#tmcDarkblue;
}
.flipLightblue{
background-color:#tmcLightblue;
}
.flipGreen{
background-color:#tmcGreen;
}
.flipDarkgrey{
background-color:#tmcDarkgrey;
}
.flipLightgrey{
background-color:#tmcLightgrey;
}
.blogIcon{
background:url("../images/blogIcon.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
display: inline-block;
height: 38px;
width: 46px;
float:left;
margin:0 22px 0 0;
}
.tmsIcon{
background:url('../images/tmsIcon.png') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
display: inline-block;
height: 38px;
width: 46px;
float:left;
margin:0 22px 0 0;
}
.globalIcon{
background:url('../images/globalIcon.png') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
display: inline-block;
height: 38px;
width: 38px;
float:left;
margin:0 22px 0 0;
}
/**************** LEADERSHIP SLIDER STYLES *****************/
.leadershipSlider{
margin-top:30px;
margin-bottom:30px;
}
.leadershipCol {
float: left;
margin-right:15px;
}
.leadershipName, .slider{
color:#fff;
height:auto;
width:82%;
max-width:138px;
background-color:#tmcOrange;
padding:10px;
margin:-85px 0 0 38%;
border:1px solid #fff;
display:block;
float:left;
}
.leadershipName .glyphicon.glyphicon-menu-right.pull-right{
color:#fff;
margin:-8px 0;
}
.leadershipImg{
display:block;
float:left
}
/**************** Client Results Page *******************/
.introText{
padding:0;
}
.clientResultsGrid{
margin-top:30px;
margin-bottom:30px;
}
.panel-default{
padding:0;
border:none;
}
.panel-default > .panel-heading{
border:none;
color:#tmcDarkblue;
background:#fff;
}
.panel{
box-shadow:none;
}
.panel-body{
background:#tmcLightgrey;
padding: 15px 0;
}
.panelResults{
margin-bottom:15px;
}
.panel-heading{
padding: 0;
background:#tmcLightblue;
border-radius:0px;
margin-bottom:5px;
}
.panel-title{
color:#fff;
padding: 15px 0;
font-weight: bold;
text-transform: uppercase;
}
.accordionResults{
padding: 0;
}
.accordionIcon{
color: #fff;
display: inline-block;
font-size: 33px;
min-width: 50px;
padding: 7.5px 0;
text-align: center;
}
.resultsIcon{
padding: 0 0.5%;
width:auto;
border-right:2px solid #fff;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.resultsTitle{}
.glyphBox{
background: none repeat scroll 0 0 #c0c920;
display: inline-block;
height: auto;
margin: 15px 0 25px;
min-height: 32px;
min-width: 42px;
padding: 4px;
text-align: center;
}
a.glyphBox:hover, a.glyphBox:focus{
color:#tmcGreen;
text-decoration:none;
outline:nonne;
outline-offset:0px;
}
.glyphBox .indicator{
color:#fff;
vertical-align:middle;
}
.preResultsaccordion {
padding:0;
}
.preResultsaccordion > .inside{
padding:0;
margin:15px 0;
}
#collapseOne, #collapseTwo, #collapseThree, #collapseFour{
padding:0;
}
#media (max-width:#screen-lg) {
}
#media (max-width:#screen-md) {
.navbar-nav > li > a {
border-bottom: 0px solid #fff;
}
.modeSelector{
right:0px;
}
.search-input{
width:78%;
}
.user-input, .pass-input{
width:37%;
}
}
#media (max-width:#screen-sm) {
/*FEEDSLIDER*/
.headlineWrapper, .headlineWrapper-green, .headlineWrapper-white{
width:80%;
}
.mobile{
color:#fff;
}
.headlineHero{
font-size:medium;
}
.secondaryNavigation-wrapper{
background:#tmcDarkblue;
padding: 15px 0 0;
}
.secondaryNavigation-mobile{
color:#fff;
list-style:none;
padding-bottom: 0px;
padding-left:0;
padding-right:0;
margin: 0 auto;
width:47%;
}
.secondaryNavigation-mobile a{
color:#fff;
}
.secondaryNavigation-mobile a:hover{
color:#tmcLightblue;
}
ul.secondaryNavigation-mobile li{
list-style:none;
width:47%;
display:inline-block;
margin-bottom:0px;
margin-right:3px;
padding-bottom:0;
padding-left:0;
padding-right:0;
vertical-align: top;
padding-bottom:15px;
}
.navbar-toggle{
font-size:medium;
}
.navbar-collapse{
background-color: rgba(0,58,99,0.80);
}
.navbar-nav{
margin:15px -15px;
}
.nav > li > a{
text-align:left;
padding-left:0px;
padding-right:0px;
color:#fff !important;
}
.nav > li > a:hover{
color:#tmcLightblue !important;
}
.nav > li{
margin:0px;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{
border-bottom:0px solid transparent;
color:#tmcLightblue !important;
}
.navbar-brand{
max-width:125px;
margin:0 0 0 5px;
}
#navbar-collapse-2, #navbar-collapse-1{
position: absolute;
width: 100%;
z-index: 2147483647;
}
.subscribe-input{
border-radius:0px;
border-color:#tmcDarkblue;
color:#tmcDarkgrey;
float:left;
margin-right:4px;
}
.search-form{
background-color:transparent !important;
color:#fff;
}
.mobileSearch-btn{
border-color: #fff;
background-color:transparent;
}
.mobileSearch-btn:hover{
border-color: #fff;
background-color:transparent;
}
.glyphicon-search {
color: #fff;
}
.glyphicon-arrow-right{
color: #fff;
}
.mobileLogin{
text-align:left;
}
.login-control{
float:none;
}
.user-input, .pass-input{
margin:0 0 5px 0;
width:100%;
float:none;
}
.dropdown-menu{
text-align:left;
}
.mobileDropdown{
background-color: transparent !important;
border: 1px solid #fff !important;
color: #fff;
margin: 5px 0 0;
padding: 6px 13px;
display: block;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
background-color: #fff;
padding: 5px 0;
}
.mobileList{
background-color: #fff !important;
border-radius: 0;
padding: 0;
}
.navbar-nav .open .mobileList{
position:absolute;
width:100%;
}
.mobileList li{
padding:4px 14px;
border-bottom:1px solid #tmcDarkblue;
}
.mobileNav{
margin-left: 0px;
margin-right: 0px;
}
}
What you want is the .dropdown-menu and .sub-menu classes.
To change the height of the menu try this:
.dropdown-menu
{
max-height: 400px;
}
I am trying to add a dropdown navigation on my navigation links so far it has been great but the only issue now which I can't work out the contact is not staying next to the Community instead it's going down one line how can i force it to stay inline with everything else?
and the drop is floating to the left for some reason so how can I bring that under the dropdown (I plan to add multiple drop downs)
<style>
body {
padding: 0; /* Gets rid of the automatic padding */
margin: 0; /* on HTML documents */
font-family: Lucida Grande, Helvetica, Arial, sans-serif;
font-size: 12px;
}
#navigation {
position: fixed;
float:right;
z-index:1;
top: 0;
width: 100%;
color: #ffffff;
height: 35px;
text-align: center;
padding-top: 15px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}
#navigation a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}
#navigation a:hover {
color: grey;
}
</style>
<style type="text/css">
ul {
list-style: none;padding: 0px;margin: 0px;
}
ul li {
display: block;position: relative;float: left;border:1px solid #000
}
li ul {
display: none;
}
ul li a {
display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
white-space: nowrap;color: #fff;
}
ul li a:hover {
background: #f00;
}
li:hover ul {
display: block; position: absolute;
}
li:hover li {
float: none;
}
li:hover a {
background: #f00;
}
li:hover li a:hover {
background: #000;
}
#drop-nav li ul li {
border-top: 0px;
}
</style>
<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<title>Static Navigation</title>
</head>
<body>
<div id="navigation">
Home
About
Social
Community
<li>Contact
<ul>
<li>General Inquiries</li>
<li>Ask me a Question</li>
</ul>
</li>
</div>
</body>
I added everything on one page so you can easily look at it and help with the problem
Thanks ;)
Add display: inline-block to your <li>.
JSfiddle Example
Well, if you are sure about width of navigation then dont go with "width:100%; " try to give width exactly where it supposed to be fit. Ex. Width: 900px;
You should put the all navigation links inside li tags,
<body>
<div id="navigation">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Social
</li>
<li>Community
</li>
<li>Contact
<ul>
<li>General Inquiries
</li>
<li>Ask me a Question
</li>
</ul>
</li>
</ul>
</div>
</body>
JSFiddle Example
I got this snippet http://unslider.com/. I did everything asked there to get it working. But somehow it doesn't seem to load the next image in the queue and in return gives a blank space... You can see it here. easycounseling.org/new.html .. Here's the code:
<script>
$(function() {
$('.ss-area').unslider();
});
</script>
<div class="ss-area clearfix">
<ul class="img-sli">
<li class="fimg">
<div class="contents clearfix">
<div class="info-box">
<h2>DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo </h2>
<div class="con-us-btn-wr">
<button ONCLICK="window.location.href='contact.html'" class="con-us-mer-pg btn con-us">Contact us Now!</button>
</div>
<p>
to signup and avail of our limited period promotional offer!
</p>
</div>
</div>
<div class="mer-usp-wr">
<ul class="mer-usp clearfix" style="font-size:18px;">
<li>DEmo DEmo </li>
<li>DEmo DEmo DEmo </li>
<li>DEmo e</li>
<li>DEmo DEmo </li>
<li>DEmo DEmo </li>
</ul>
</div>
</li>
<li class="simg">
<div class="contents clearfix">
<div class="info-box">
<h2>DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo DEmo </h2>
<div class="con-us-btn-wr">
<button ONCLICK="window.location.href='contact.html'" class="con-us-mer-pg btn con-us">Contact us Now!</button>
</div>
<p>
to signup and avail of our limited period promotional offer!
</p>
</div>
</div>
<div class="mer-usp-wr">
<ul class="mer-usp clearfix" style="font-size:18px;">
<li>DEmo DEmo </li>
<li>DEmo DEmo DEmo </li>
<li>DEmo e</li>
<li>DEmo DEmo </li>
<li>DEmo DEmo </li>
</ul>
</div>
</li>
</ul>
</div>
The plugin is based on jQuery library
So you need to include jQuery and the plugin script file to make it work. The order in which they are loaded is important
---> jQuery
---> unslider plugin
Put this in the section where you have included the other script files. You can always test this by inspecting the console in Developer tools of the browser. It clearly shows the error.
Hi check this my unslider.com help file:
<!-- The HTML -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unslider.com example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://unslider.com/unslider.min.js"type="text/javascript"></script>
<!-- JavaScript -->
<script type="text/javascript">
$(function() {
$('.banner').unslider({
speed: 500, // The speed to animate each slide (in milliseconds)
delay: 3000, // The delay between slide animations (in milliseconds)
complete: function() {}, // A function that gets called after every slide animation
keys: true, // Enable keyboard (left, right) arrow shortcuts
dots: true, // Display dot navigation
fluid: false // Support responsive design. May break non-responsive designs
});
var unslider = $('.banner').unslider();
$('.prev').click(function() {
unslider.data('unslider').prev();
});
$('.next').click(function() {
unslider.data('unslider').next();
});
return false;
});
</script>
<!-- CSS -->
<style type="text/css">
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
}
.banner {
position: relative;
width: 100%;
overflow: auto;
top: 50px;
/*z-index: -1;*/
font-size: 18px;
line-height: 24px;
text-align: center;
color: #FFFFFF;
text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3);
background: #FFFFFF;
box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.banner ul {
list-style: none;
width: 300%;
}
.banner ul li {
display: block;
float: left;
min-height: 500px;
-o-background-size: 100% 100%;
-ms-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
box-shadow: inset 0 -3px 6px rgba(0,0,0,.1);
}
.banner .inner {
padding: 360px 0 110px;
float: left;
vertical-align:-100px;
}
.banner h1, .banner h2 {
font-size: 40px;
line-height: 52px;
color: #fff;
}
.banner .btn {
display: inline-block;
margin: 25px 0 0;
padding: 9px 22px 7px;
clear: both;
color: #fff;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
border : rgba(255, 255, 255, 0.4) solid 2px;
border-radius: 5px;
}
.banner .btn:hover {
background : rgba(255, 255, 255, 0.05);
}
.banner .btn:active {
-webkit-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
-moz-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
-ms-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
-o-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
}
.banner .btn, .banner .dot {
-webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
-moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
-ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
-o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
.banner .dots {
position: absolute;
left: 0;
right: 0;
bottom: 20px;
width: 100%;
}
.banner .dots li {
display: inline-block;
width: 10px;
height: 10px;
line-height: 10px;
margin: 0 4px;
text-indent: -999em;
border: 2px solid #fff;
border-radius: 6px;
cursor: pointer;
opacity: .4;
-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;
}
.banner .dots li.active {
background: #fff;
opacity: 1;
}
.unslider-arrow {
font-family: Expressway;
font-size: 50px;
text-decoration: none;
color: #3d3d3d;
background: rgba(255,255,255,0.7);
padding: 0 20px 5px 20px;
}
.next {
position: absolute;
top: 65%;
right: 0
}
.prev {
position: absolute;
top: 65%;
right: 90 /* change to left:0; if u wanna have arrow on left side */
}
</style>
</head>
<!-- Body of HTML document -->
<body>
<div class="slider">
<div class="banner">
<ul>
<li style="background-image: url('http://lorempixel.com/1200/600/');">
<div class="inner">
<h1>Some h1 text</h1>
<p>smaller p text</p>
<a class="btn" href="http://www.yourlink.com">Hyperlink</a>
</div>
</li>
<li style="background-image: url('http://lorempixel.com/1200/600/');">
<div class="inner">
<h1>Some h1 text</h1>
<p>smaller p text</p>
<a class="btn" href="http://www.yourlink.com">Hyperlink</a>
</div>
</li>
<li style="background-image: url('http://lorempixel.com/1200/600/');">
<div class="inner">
<h1>Some h1 text</h1>
<p>smaller p text</p>
<a class="btn" href="http://www.yourlink.com">Hyperlink</a>
</div>
</li>
<li style="background-image: url('http://lorempixel.com/1200/600/');">
<div class="inner">
<h1>Some h1 text</h1>
<p>smaller p text</p>
<a class="btn" href="http://www.yourlink.com">Hyperlink</a>
</div>
</li>
</ul>
</div>
←
→
</div>
</body>
</html>