I'm using bootstrap 3, and I found few lines of css, that work great, making the caret to reverse (upside-down) on click.
.navbar-nav .open > a > b.caret {
border-top: none;
border-bottom: 4px solid;
}
For your reference, this is my (pretty standard) dropdown:
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Some Title Text <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Some Submenu text</li>
<li>Some Submenu text</li>
</ul>
</li>
</ul>
Why is this happening? I would like your help to deeply understand it.
Thank you!
Bootstrap caret uses a popular trick to draw triangle in CSS.
You can see it HERE
CSS code for top and bottom arrows (triangles):
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid black;
}
Related
Can someone please take a look at my code and see what I am doing wrong...
I'm a beginner jquery person and
I tried reading all the forum post and implementing them my self and I still get errors... this is taking me two days and I'm about to kill my laptop
thanks so much in advance,
~ grace
$(document).ready(function() {
//parent. on click anchor
$('.tab').on('click', '.clk', function(event) {
event.stopPropagation();
//Find the child by traversing
$(this).closest('.clk').find('.reveal').slideToggle();
//Show the child
});
});
body {
width: 350px;
margin: 0 auto;
}
h1 {
font-size: 1em;
color: #FF7F50;
}
.tbCont {
/* width: 100%;float:left; this works too*/
overflow: hidden;
border: 1px solid red;
text-align: center;
}
ul {
padding-left: 0;
}
li {
list-style: none;
display: inline-block;
zoom: 1;
width: 90%;
}
.cHolder {
display: none;
}
/*hides related content*/
.reveal {
width: 100%;
background-color: pink;
display: inline-block;
zoom: 1;
border-bottom: 2px solid #aaa;
}
.reveal span {
float: left;
width: 40%;
margin: 10px;
}
.reveal img {
float: right;
width: 40%;
height: 40%;
margin: 10px;
background-color: #fff;
}
a {
width: 100%;
text-align: left;
border-style: none;
border-bottom: 2px solid #aaa;
background-color: white;
font-size: 2em;
color: #aaa;
display: block;
text-decoration: none;
}
a:hover {
color: orange;
border-bottom: 2px solid orange;
}
a:active {
color: #7FFFD4;
border-bottom: 2px solid #7FFFD4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<div class="tbCont">
<h1>Title</h1>
<ul class="tab">
<li>
Tab Title
<ul class="cHolder">
<li class="reveal">
<span>copy here Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>
<img/>
</li>
</ul>
</li>
<li>
Tab Title
<ul class="cHolder">
<li class="reveal">
<span>copy here.</span>
<img/>
</li>
</ul>
</li>
<li>
Tab Title
<ul class="cHolder">
<li class="reveal">
<span>copy here</span>
<img/>
</li>
</ul>
</li>
<li>
Tab Title
<ul class="cHolder">
<li class="reveal">
<span>copy here</span>
<img/>
</li>
</ul>
</li>
<li>
Tab Title
<ul class="cHolder">
<li class="reveal">
<span>copy here</span>
<img/>
</li>
</ul>
</li>
</ul>
</div>
<!-- End your code here -->
</body>
</html>
I tried to correct in this fiddle, look if this helps :
http://jsfiddle.net/h9u2g6bu/
Notice display:none should be applied to what you want to toggle, i.e. .cHolder .reveal instead of .cHolder :
.cHolder .reveal {
display: none;
}
Most drop down lists in websites' main menus are powered by Javascript, which usually displays some div element containing the list on click or hover. But non Javascript users just can't see the drop down list!
The only alternative I can think of is to display the drop down list as a HTML select element, but nobody does that. Is there a better solution out there?
Non-JavaScript menus are surprisingly common and are often times just as clean and can be more efficient than their JavaScript counterparts. You can use JavaScript but it's important to have graceful degradation if you want your menu to be accessible and functional for all users.
There are many examples of these online but the basic premise is to have a normal navigation menu (using UL and LI elements), and use CSS to change the look and appearance based on the user interaction (such as a hover).
Here is an example of a basic menu that will work without CSS or JavaScript and still be perfectly usable (some of the code taken from this answer: https://stackoverflow.com/a/12279190/937012)
<div class="wrapper">
<navigation role="navigation" class="primary-nav">
<ul role="menubar">
<li role="presentation">
<a role="menu-item" href="#" title="First Link">First Link</a>
</li>
<li role="presentation" class="sub-container"> <a role="menu-item" aria-haspopup="true" href="#" title="Second Link">Second Link</a>
<ul role="menu">
<li role="presentation"> <a role="menu-item" href="#" title="Sub Menu Item 1">Sub Item 1</a>
</li>
<li role="presentation"> <a role="menu-item" href="#" title="Sub Menu Item 2">Sub Item 2</a>
</li>
<li role="presentation"> <a role="menu-item" href="#" title="Sub Menu Item 3">Sub Item 3</a>
</li>
</ul>
</li>
<li role="presentation">
<a role="menu-item" href="#" title="Third Link">Third Link</a>
</li>
</ul>
</navigation>
</div>
As is, this will create a navigation menu (using some accessibility attributes) that is cross-browser and accessible. You can read more about accessibility best practices here: https://www.webaccessibility.com/best_practices.php
You can then apply whichever CSS you like to change the appearance and give the desired "drop-down" effect.
Here is some CSS for the above markup that produces a horizontal menu that features a sub-menu that appears below the second link when the mouse is moved over the second list item.
A {
text-decoration: none;
}
A:HOVER {
color: blue;
}
.wrapper {
width: 90%;
display: block;
}
.primary-nav {
display: block;
margin: 0px auto;
width: 100%;
padding: 0px;
}
.primary-nav UL {
background-color: #ababcd;
list-style-type: none;
margin-left: 0px;
padding-left: 0px;
text-indent: 0px;
}
.primary-nav > UL {
display: inline;
border: solid 1px #000000;
text-indent: 0px;
float: left;
height: 24px;
margin: 0px;
width: 100%;
list-style-type: none;
border-collapse: collapse;
}
.primary-nav LI {
max-width: 150px;
text-align: center;
}
.primary-nav > UL LI {
display: inline;
float: left;
padding: 0px 3px 0px 3px;
width: 32%;
line-height: 24px;
vertical-align: top;
margin-top: 0px;
text-align: center;
}
.primary-nav > UL LI UL {
display: none;
width: 100%;
}
.primary-nav > UL LI.sub-container:HOVER UL {
display: inline-block;
float: left;
margin-left: 0px;
clear: both;
border: inset 1px #898989;
box-shadow: 2px 2px 4px #000000;
}
.primary-nav > UL LI.sub-container:HOVER UL LI {
margin-top: 2px;
text-align: left;
clear: both;
width: 100%;
padding: 0px;
}
.primary-nav LI A:HOVER {
background-color: #cdcdef;
}
.primary-nav LI A {
display: block;
}
.primary-nav > UL LI.sub-container:HOVER UL LI A {
padding: 1px 3px;
margin: 0px 3px;
}
Here is a fiddle that stitches it all together: http://jsfiddle.net/xDaevax/osu7t9ty/
I have an issue with the right alignment of the caret. Using .pull-right in the span makes it go to the top right corner.
How can I make it vertically centered again ?
I also would like to align the text to the left
http://www.bootply.com/r8x7g5Bw5R
<div class="btn-group cust-dropdown">
<button type="button" class="btn btn-default dropdown-toggle cust-dropdown" data-toggle="dropdown"><span class="caret pull-right"></span><span>test</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>test</li>
<li>tes2</li>
<li>test3</li>
</ul>
</div>
and the CSS
.cust-dropdown {
width: 200px;}
.caret {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 8px solid #fff;
left: 90%;
top: 45%;
position: absolute;
}
Using position absolute and a percentage top and left I was able to right align my caret within the dropdown. Works in Chrome, IE, and FF.
EDIT
Previous code will work but changes the style of the caret. If you just want to reposition it maintaining its style, just extend Bootstrap's .caret class:
.caret {
position: absolute;
left: 90%;
top: 45%;
}
A much simpler solution exists for this problem. This style should look the most natural and be the most responsive to all usages as it does not depend on any predetermined layout (other than default bootstrap styles).
.dropdown > .btn > .caret {
float: right;
margin: 6px 0;
// if you are using Less, the you can reuse the actual vertical padding
// margin: #padding-base-vertical 0;
}
Just interchange the caret and span blocks in HTML:
HTML
<div class="btn-group cust-dropdown">
<button type="button" class="btn btn-default dropdown-toggle cust-dropdown" data-toggle="dropdown"><span id= "titl">test</span><span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>test</li>
<li>test 2</li>
<li>test 3</li>
</ul>
</div>
CSS
.cust-dropdown {
width: 200px;
}
#titl {
padding-right: 10px;
}
You can align the text more to the left by adding more padding-right.
Right, so I have made a navigation bar and I want to add images before each link, I know I can use a.header:before but I need different images for each link, a house for home, spanner for spec and so on. What is the simplest way of doing this? Is there a way without creating a div for each one and styling them individually?
For a preview of the page so far with the nav - http://zimxtrial.ukbigbuy.com/
One more thing - here is part of the css:
#header-nav {
background-color: #FFFFFF;
height: 80px; height: 8.0rem;
width: 100%;
position: absolute;
top: 50px;
}
.header-nav-center {
height: 80px; height: 8.0rem;
text-align: center;
position: relative;
top: 0px;
width: 500px; width: 50.0rem;
margin-left: auto;
margin-right: auto;
}
.header-nav-center ul {
margin: 0;
}
.header-nav-center ul li {
list-style: none;
margin: 0 35px 0 0;
display: inline;
}
a.header {
line-height: 80px; line-height: 8.0rem;
font-size: 17px; font-size: 1.7rem;
}
And HTML:
<div id="home">
<div id="header-nav">
<div id="hr-nav-top-container">
<hr class="nav" />
</div>
<div id="logo"></div>
<div class="header-nav-center">
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li><a class="header" href="#features">Features</a>
</li>
<li><a class="header" href="#specification">Specification</a>
</li>
<li><a class="header" href="#contact-us">Contact Us</a>
</li>
</ul>
</div>
<div id="pre-order"></div>
<div id="hr-nav-bottom-container">
<hr class="nav" />
</div>
</div>
</div>
Can I add something like:
a.header.home:before {
background: url('../images/home-logo.png') center center no-repeat;
}
Not that exactly but something like it?
You could make ids for each link and add the ids to the desired link img
I am trying to center my menu bar with my logo in the middle. right now everything is floating but it wont center to the middle of the page. Also when it is centered i need the background image that i placed on the left and right side of the logo to resize according to the width of the page - here is a link to how it looks live - Menu Test
on my website i still have the original menu I created where I placed the logo behind the menu bar and set a longer width so that the background would stretch but it won't auto adjust because of it.... Current Menu
I know my code is not perfect so please just bear with me
html
<div id="access">
<div class="menu-container">
<ul id="menu-left" class="menu">
<li class="menu-item">
Home
</li>
<li class="menu-item">
About
</li>
<li class="menu-item">
Services
</li>
</ul><!--END of menu-navigation-left-->
<ul id="menu-center">
<li class="menu-item">
<img src="images/logo.png" alt="Menu">
</li>
</ul> <!--close div center-->
<ul id="menu-right" class="menu">
<li class="menu-item">
Blog
</li>
<li class="menu-item">
Contact
</li>
<li class="menu-item">
Portfolio
</li>
</ul><!--END of menu-navigation-left-->
</div><!--END of menu-navigation-container-->
</div><!--END of access-->
css
header {
position:fixed;
}
#access {
width:100%;
overflow:hidden;
left:50%;
}
#access ul.menu{
display: inline-block;
}
#access ul {
}
#access ul a{
display:block;
}
#access ul#menu-left {
height:120px;
background-image:url(../images/menu.png);
}
#access ul#menu-center {
height:120px;
}
#access ul#menu-right {
height:120px;
background-image:url(../images/menu.png);
}
ul, li {
margin:0px;
padding:0px;
list-style:none;
float:left;
display:block;
}
#access a {
display: block;
font-size: 16px;
line-height: 15px;
padding: 13px 10px 12px 10px;
text-transform: titlecase;
text-decoration: none;
font:"Mc1regular", Arial, sans-serif;
}
a:link{
color:#fff;
}
a:visited{
color:#fff;
}
This should sort out your alignment issues.. just replace with your specs. I would just have one menu and centre it.
PLEASE NOTE, YOUR HEADER POSITION IS FIXED> position:relative would be better..
div.container {
width: 1160px;
margin: auto;
margin-top: -1;
margin-bottom: -1;
padding: 0;
padding-top: 10px;
background-color: #2d2d2d;
}
div.box {
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
padding: 10px;
padding-bottom: 20px;
border: solid 1px #A29060;
background-color: #000;
overflow: hidden;
width: 940px;
}
div.top {
text-align: left;
margin: auto;
margin-left: 20px;
padding-top: 12px;
padding-bottom: 11px;
font-weight: normal;
font-size: 14px;
overflow: hidden;
width: 980px;
text-transform: uppercase;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
padding-right: 20px;
}
a {
display: block;
color: #a29060;
text-decoration: none;
}
<div class="container">
<div class="box">
<div class="top">
<ul >
<li>Contact</li>
<li>Policies</li>
<li><img class="logo" src="images/logo.jpg" alt="logo" /></li>
<li>Policies</li>
</ul>
</div>
see this fiddle
http://jsfiddle.net/yvytty/RJ4Yp/
You can also have a look at this (it's not finished) but it has the basic layout sorted, menus etc
https://www.yve3.com/index.html
This is also a link to a great forum, HTML.net. They give you good opinions of your site and have a lot of expertise (just like here)
http://www.html.net/forums/