What it has to look like: Page button with dropdown menu should be opened with hover effect. You mouseover the "Page" button, dropdown menu will appear, the button should be with a dark background, exactly like other buttons "Product " and "Blog" (these two buttons work well in any case). While you are choosing something in the dropdown menu, "Page" button still have the same style (dark background like the last two buttons during hover). Only when the cursor will leave dropdown menu or button, dropdown menu should disappear and "Page" button should be with white background.
Text above describe how the button should work with JavaScript code. JS code makes hover effect, but do something wrong with styles.
Now with JS code "Page" button (while cursor situated at this button and dropdown menu) looks like the active button "Home" with white background. We need to fix this and make the button like in the description above.
Please check out JSFiddle to see what I'm talking about.
Sorry for my English if you'll find some mistakes :)
jsfiddle
HTML
<div class="menu">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active uppercase" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle uppercase outline" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">Pages</a>
<div class="dropdown-menu dropdown-menu-right">
<div class="wrapperForDropdomnUpArrow">
<div class="dropdownUpArrow">
</div>
</div>
<a class="dropdown-item uppercase aboutUs" href="#">About us</a>
<a class="dropdown-item uppercase" href="#">Company</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link uppercase outline" href="#">Product</a>
</li>
<li class="nav-item">
<a class="nav-link uppercase outline" href="#">Blog</a>
</li>
</ul>
</div>
CSS
.menu a:hover {
color: #fff;
background: #000;
border-radius: 3px;
transition: 0.4s;
}
.menu a {
font-size: 12px;
font-family: montserrat;
color: #afb0b1;
text-align: center;
padding: 16px 19px;
line-height: 12px;
margin: 0px -5px;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
background-color: #f3f6f9;
color: #000;
}
.dropdown-menu {
background-color: #000;
padding: 0px;
border: 0;
margin: 1px 0px 0px 0px;
}
.dropdown-menu a {
text-align: left;
padding: 12.5px 69px 12.5px 22px;
line-height: 12px;
margin: 0;
}
.dropdown-menu .aboutUs {
text-align: left;
padding: 20px 69px 12.5px 22px;
line-height: 12px;
}
.dropdown-menu .FAQ {
text-align: left;
padding: 12.5px 69px 20px 22px;
line-height: 12px;
}
a.nav-link.dropdown-toggle:focus {
color: #fff;
background: #000;
border-radius: 3px;
}
jQuery
$(".dropdown-menu").css('margin-top', 0);
$(".dropdown")
.mouseover(function () {
$(this).addClass('show').attr('aria-expanded', "true");
$(this).find('.dropdown-menu').addClass('show');
})
.mouseout(function () {
$(this).removeClass('show').attr('aria-expanded', "false");
$(this).find('.dropdown-menu').removeClass('show');
});
Also I found out that removing of this line
$( this ).addClass('show').attr('aria-expanded',"true");
do some changes, but removing this line is not the full solving
Before. We need to fix it
After
Looks like your problem is with bootstrap and its css.
Take a look at this post and try setting up the bootstrap for you desired colors.
Bootstrap Button active color change
I hope that helps!
I'm looking for a way with Jquery or JS to make it so that when I mouseover one of these divs, the text and icon disappears and "Read More" appears. I've seen some guides but they don't really seem to be accomplishing the whole job, it removes one line of text rather than clearing the entire div, and replacing it with a centered "Read More" text on mouseover, then going back to the normal text when the mouse exits hover. Does anyone have any suggestions?
The divs are horizontal on the actual page, not sure why it's showing up as vertical here.
.feature-container {
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 9;
width: 100%;
display: inline-block;
}
.feature-box {
background: #fff;
text-align: center;
padding: 40px 30px;
position: relative;
width: 25%;
}
.feature-box i {
font-size: 50px;
margin-bottom: 15px;
cursor: pointer;
}
.feature-box:hover {
background: #208541 !important;
color: #f6f6f6;
}
.feature-box.dark {
background: #f6f6f6;
}
<div class="feature-container">
<div class="feature-box-container feature-slider">
<div class="feature-box">
<i class="ion-ios-list-outline"></i>
<h4>Content</h4>
<p>Effective learning methodology that focuses on concepts and understanding of AICPA blueprints.</p>
</div>
<div class="feature-box dark">
<i class="ion-ios-cog-outline"></i>
<h4>Customization</h4>
<p>Adaptive content for a custom learning experience and individualized delivery through AdaptaPASS.</p>
</div>
<div class="feature-box">
<i class="ion-help"></i>
<h4>Support</h4>
<p>Direct access to our instructors and CPAs, by phone, email, or via our student-only message board.</p>
</div>
<div class="feature-box dark">
<i class="ion-social-usd-outline"></i>
<h4>Value</h4>
<p>Everything you need -- for less. Our course bundle costs hundreds less than competitors.</p>
</div>
</div>
</div>
This should help you to get started.. I'm using .css('visibility', 'hidden'); to hide text only because I didn't wanted to change or alter box height..
Ofcourse if that is not the case that you need (you can only use some css to fix the height) then you can use .hide() and .show() to show and hide text on mouse events
$('.feature-box').on('mouseenter', function(){
$(this).find('i, h4:not(.rm), p').css('visibility', 'hidden');
$(this).find('h4.rm').css('visibility', 'visible');
});
$('.feature-box').on('mouseleave', function(){
$(this).find('i, h4:not(.rm), p').css('visibility', 'visible');
$(this).find('h4.rm').css('visibility', 'hidden');
});
.feature-container {
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 9;
width: 100%;
display: inline-block;
}
h4.rm{ visibility: hidden; }
.feature-box {
background: #fff;
text-align: center;
padding: 40px 30px;
position: relative;
width: 25%;
}
.feature-box i {
font-size: 50px;
margin-bottom: 15px;
cursor: pointer;
}
.feature-box:hover {
background: #208541 !important;
color: #f6f6f6;
}
.feature-box.dark {
background: #f6f6f6;
}
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="feature-container">
<div class="feature-box-container feature-slider">
<div class="feature-box">
<i class="ion-ios-list-outline"></i>
<h4>Content</h4>
<h4 class="rm">Read more</h4>
<p>Effective learning methodology that focuses on concepts and understanding of AICPA blueprints.</p>
</div>
<div class="feature-box dark">
<i class="ion-ios-cog-outline"></i>
<h4>Customization</h4>
<h4 class="rm">Read more</h4>
<p>Adaptive content for a custom learning experience and individualized delivery through AdaptaPASS.</p>
</div>
<div class="feature-box">
<i class="ion-help"></i>
<h4>Support</h4>
<h4 class="rm">Read more</h4>
<p>Direct access to our instructors and CPAs, by phone, email, or via our student-only message board.</p>
</div>
<div class="feature-box dark">
<i class="ion-social-usd-outline"></i>
<h4>Value</h4>
<h4 class="rm">Read more</h4>
<p>Everything you need -- for less. Our course bundle costs hundreds less than competitors.</p>
</div>
</div>
</div>
To accomplish this I suggest you to use CSS only solution.
Add new div, position it absolutely and on feature-box hover just display it.
In order the position to work, feature-box has to have position: relative and new div should have larger z-index, and top: 0; set
You can achieve it with css see below if that is what you require.
.feature-container {
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 9;
width: 100%;
display: inline-block;
}
.feature-box {
background: #fff;
text-align: center;
padding: 40px 30px;
position: relative;
width: 25%;
display: inline-block;
}
span.read-more {
display: none;
font-weight: bold;
position: absolute;
z-index: 10;
top: 0;
}
.feature-box:hover p {
display: none;
}
.feature-box:hover span.read-more {
display: block;
position: relative;
}
.feature-box i {
font-size: 50px;
margin-bottom: 15px;
cursor: pointer;
}
.feature-box:hover {
background: #208541 !important;
color: #f6f6f6;
}
.feature-box.dark {
background: #f6f6f6;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="feature-container">
<div class="feature-box-container feature-slider">
<div class="feature-box">
<i class="ion-ios-list-outline"></i>
<h4>Content</h4>
<p>Effective learning methodology that focuses on concepts and understanding of AICPA blueprints.</p><span class="read-more">read more</span>
</div>
<div class="feature-box dark">
<i class="ion-ios-cog-outline"></i>
<h4>Customization</h4>
<p>Adaptive content for a custom learning experience and individualized delivery through AdaptaPASS.</p><span class="read-more">read more</span>
</div>
<div class="feature-box">
<i class="ion-help"></i>
<h4>Support</h4>
<p>Direct access to our instructors and CPAs, by phone, email, or via our student-only message board.</p><span class="read-more">read more</span>
</div>
<div class="feature-box dark">
<i class="ion-social-usd-outline"></i>
<h4>Value</h4>
<p>Everything you need -- for less. Our course bundle costs hundreds less than competitors.</p>
<span class="read-more">read more</span>
</div>
</div>
</div>
If you dont have to dynamically manipulate de 'boxes', you could do it using a couple of extra tag and css like this:
.feature-container{ box-shadow:0 1px 6px rgba(0,0,0,0.1); position:relative; z-index:9; width:100%; display:inline-block;}
.feature-box{background:#fff; text-align:center; padding:40px 30px; position:relative; width:25%;display:inline-block;}
.feature-box i{font-size:50px; margin-bottom:15px; cursor:pointer;}
.feature-box:hover{background:#208541 !important; color:#f6f6f6;}
.feature-box.dark{background:#f6f6f6;}
.feature-box .mask{display:none;}
.feature-box:hover .mask{background-color:#333;color:white;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;text-align:center;display:block;}
.feature-box:hover .mask span{position: relative;float: left;top: 50%;left: 50%;transform: translate(-50%, -50%);}
<div class="feature-container" >
<div class="feature-box-container feature-slider">
<div class="feature-box">
<i class="ion-ios-list-outline"></i>
<h4>Content</h4>
<p>Effective learning methodology that focuses on concepts and understanding of AICPA blueprints.</p>
<a class="mask" href="#"><span>read more</span></a>
</div>
<div class="feature-box dark">
<i class="ion-ios-cog-outline"></i>
<h4>Customization</h4>
<p>Adaptive content for a custom learning experience and individualized delivery through AdaptaPASS.</p>
<a class="mask" href="#"><span>read more</span></a>
</div>
<div class="feature-box">
<i class="ion-help"></i>
<h4>Support</h4>
<p>Direct access to our instructors and CPAs, by phone, email, or via our student-only message board.</p>
<a class="mask" href="#"><span>read more</span></a>
</div>
<div class="feature-box dark">
<i class="ion-social-usd-outline"></i>
<h4>Value</h4>
<p>Everything you need -- for less. Our course bundle costs hundreds less than competitors.</p>
<a class="mask" href="#"><span>read more</span></a>
</div>
</div>
</div>
if you dont need any fancy styles for the "read more" text, you could use .feature-box:hover::before{} to add the text and center it as i did with .mask span.
I'm using a collapsible bootstrap navigation. I made a few changes to a .css so that navigation links look like tabs. Positioning links at the bottom of header using a margin property did not work, because when zooming in and out navigation was sometimes pushed up or down by a pixel. Instead I set a position property to absolute to place navigation at the bottom of the hader. Now when I click on the navbar button. Navigation is pushed upwards instead of downwards and header is not expanding.
Here's my HTML:
<div class="header-inner clearfix">
<nav class="navigation pull-right" role="navigation">
<div class="navbar pull-right">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
</a>
</div>
<div class="nav-collapse in collapse" style="height: auto;">
<ul class="nav menu nav-pills">
<li>
<a>link1</a>
</li>
<li>
<a>link2</a>
</li>
<li>
<a>link3</a>
</li>
</ul>
</div>
</nav>
</div>
And here is my CSS:
.nav-pills > li > a {
border-width: 2px 2px 0 2px;
border-radius: 5px 5px 0 0;
border-color: #cc0000;
border-style: solid;
padding: 8px 12px 8px 12px;
}
.header-inner {
border-bottom: 2px solid #cc0000;
position: relative
}
.navigation {
position: absolute;
bottom: 0;
}
Im hoping this can be solved setting a margin of navigation using different units than pixels if not, how can I change the .js file.
Thanks I already solved a problem. When a screen width is smaller than 900 px, when instead of navigation bar a navigation button apears I just set a position property to static and now everithing works fine.
Thanks anyway
I can easily create a nav search bar in Bootstrap 3. But I'd like to build something very similar to Google Developers search bar.
I could of course try to look at google's page and factor out the one that pertains to the search box, but with my current css skill that will take me forever.
In particular how would I create a search nav bar in Bootstrap 3 with the following features?
On large screens I need the whole search box to take up whatever remaining width is left (brand and menus on the left, user account button on the right).
On Focus HTML drop down would show similar to Google Developers site.
I'd like the user to have the option to select a filter in the HTML drop down and it would show as a tag in the search bar as shown below:
On smartphone screens the search box will collapse to a search button that when clicked it will expand similar to Google Developers site. (Separate from the collapse of the menus).
I can take care of the JS part (using angular), I just need to have an idea on the css part. I already search this site (http://tympanus.net/codrops/2010/07/14/ui-elements-search-box/), but i'd like to implement this with the bootstrap classes already in place.
Here's what I have so far with a help from Fizzix:
JSFiddle Demo
HTML:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Others <span class="sr-only">(current)</span></li>
<li>Categories</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="search-box">
<input value="Search" type="text" class="form-control" />
<i class="glyphicon glyphicon-search"></i>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
CSS:
body {
margin: 20px;
background: #455a64;
}
.search-box {
position: relative;
}
.search-box .glyphicon {
position: absolute;
padding: 10px;
pointer-events: none;
left: 15px;
top: 0px;
}
.search-box .glyphicon:before {
color: white;
transition: all 0.2s linear;
}
.search-box input {
color: #fff;
padding-left: 60px;
background: #546e7a;
border:0;
outline: none !important;
transition: all 0.2s linear;
}
.search-box input:focus {
background: #fff !important;
outline: 0;
color: #333;
}
.search-box input:focus + .glyphicon:before {
color: #333;
}
.search-box input:hover {
background: #78909c;
}
Your question will most likely be closed since you have not tried to do this yourself first and you're basically asking us to do all the hard work without any attempt
I tried to mimic most of the styles, although the placeholder colour is the tricky part. Instead, I added the value of Search to the input and styled the colour. You can handle the placeholder part through Angular instead.
Unfortunately I'm strapped for time at the moment and am unable to get the dropdown working on focus.
If you would like a full breakdown of the CSS, just let me know and I can go through it step by step with you.
WORKING DEMO
CSS:
.search-box {
position: relative;
}
.search-box .glyphicon {
position: absolute;
padding: 10px;
pointer-events: none;
left: 15px;
top: 0px;
}
.search-box .glyphicon:before {
color: white;
transition: all 0.2s linear;
}
.search-box input {
color: #fff;
padding-left: 60px;
background: #546e7a;
border:0;
outline: none !important;
transition: all 0.2s linear;
}
.search-box input:focus {
background: #fff !important;
outline: 0;
color: #333;
}
.search-box input:focus + .glyphicon:before {
color: #333;
}
.search-box input:hover {
background: #78909c;
}
HTML:
<div class="search-box">
<input value="Search" type="text" class="form-control" />
<i class="glyphicon glyphicon-search"></i>
</div>
I'm having difficulty with the rendering of a jQuery tabs widget. In this Fiddle you will see two images. If you click the Professional Advisers image, a tabs widget is displayed. If you click on the Industry widget, a jQuery modal dialog is rendered.
The problem is how the tabs widget displays - it should open neatly in an area below the images, as does the modal dialog. I'm unsure whether it's a CSS issue (I've tried styling the #tabs element in various ways without success) or whether I need to shuffle my s around (I;'ve tried putting the #tabs div inside the professional advisers div without success).
HTML
<a href="#" id="professional-advisers-image">
<div class="circle hovershadow advisers advisers-box-shadow text">Professional
advisers</div>
</a>
<a href="#" id="industry-image">
<div class="circle hovershadow industry industry-box-shadow">Industry</div>
</a>
<div id="tabs">
<ul>
<li>Law firms
</li>
<li>Accounting and audit firms
</li>
<li>Management consultants and economists
</li>
<li>
<button id="closeTabs">X</button>
</li>
</ul>
<div id="tabs-1">
<p>Law firm text goes here</p>
</div>
<div id="tabs-2">
<p>Accounting and audit firm text goes here</p>
</div>
<div id="tabs-3">
<p>Management consultants and economists text goes here.</p>
</div>
</div>
<div id="industry-dialog" class="dialog" title="Industry">Industry text goes here</div>
Javascript
$("#tabs").tabs().hide();
$("#professional-advisers-image").click(function () {
$("#tabs").toggle();
});
$("#closeTabs").click(function () {
$("#tabs").hide();
});
$("#industry-dialog").dialog({
autoOpen: false
});
$("#industry-image").click(function () {
$("#industry-dialog").dialog("option", "modal", true);
$("#industry-dialog").dialog("option", "height", "auto");
$("#industry-dialog").dialog("option", "width", 600);
$("#industry-dialog").dialog("open");
});
CSS
.circle {
width: 220px;
height: 220px;
border-radius: 50%;
border: 2px solid #fff;
float: left;
display: inline-block;
/* text styling for circles - see also the .text style below */
font-size: 35px;
color: #FFF;
line-height: 220px;
text-align: center;
font-family: Ubuntu, sans-serif;
}
#dialog #tabs {
font-family:'Istok Web', sans-serif;
font-size: 14px;
line-height: 1.8em;
}
.advisers {
background: #5E2750;
margin-left: 28%;
margin-right: 13%;
}
.advisers-box-shadow {
box-shadow: 0px 0px 1px 1px #5E2750
}
.industry {
background: #DD4814;
}
.industry-box-shadow {
box-shadow: 0px 0px 1px 1px #DD4814
}
.hovershadow:hover {
box-shadow: 0px 0px 4px 4px #AEA79F
}
.text {
/* used by professional advisers circle */
line-height: 40px;
padding-top: 70px;
height: 150px
}
Try a clearing div after your circles:
http://jsfiddle.net/JWgRB/2/
<a href="#" id="professional-advisers-image">
<div class="circle hovershadow advisers advisers-box-shadow text">Professional
advisers</div>
</a>
<a href="#" id="industry-image">
<div class="circle hovershadow industry industry-box-shadow">Industry</div>
</a>
<div style="clear: both;"></div>
<div id="tabs">