I know this is a pretty stupid question, but I'm struggling to get this working and no success so far. I made a CSS menu using one online website that generate it for free. So the first challenge was to put some icons before each option, this one I got success. But now, I want to put some buttons on the right side. Let-me show you the css code for the menu:
#charset 'UTF-8';
/* Starter CSS for Flyout Menu */
#cssmenu,
#cssmenu ul,
#cssmenu li #cssmenu a {
list-style: none;
margin: 0;
padding: 0;
border: 0;
font-size: 14px;
font-family: Helvetica;
line-height: 1;
}
#cssmenu {
width: auto;
}
#cssmenu ul {
zoom: 1;
background: #547a65 url(/img/pattern.png) top left repeat;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: 1px solid #354d3f;
-moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
}
#cssmenu ul:before {
content: '';
display: block;
}
#cssmenu ul:after {
content: '';
display: table;
clear: both;
}
#cssmenu a,
#cssmenu a:link,
#cssmenu a:visited {
padding: 15px 20px;
display: block;
text-decoration: none;
color: #ffffff;
text-shadow: 0 -1px 1px #161f1a;
border-right: 1px solid #354d3f;
}
#cssmenu a:hover {
color: #161f1a;
text-shadow: 0 1px 1px #69987e;
}
#cssmenu li {
float: left;
border-right: 1px solid #5e8972;
}
#cssmenu li:hover {
background: #4a6b58 url(/img/pattern.png) top left repeat;
}
#cssmenu li:first-child {
border-left: none;
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}
#cssmenu li#homeicon a{
background: url(/img/home.png) no-repeat;
background-position: left;
}
#cssmenu li#cardicon a{
background: url(/img/card.png) no-repeat;
background-position: left;
}
#cssmenu li#billingicon a{
background: url(/img/billing.png) no-repeat;
background-position: left;
}
#cssmenu li#ticketicon a{
background: url(/img/tickets.png) no-repeat;
background-position: left;
}
Ok, as you can see, the last 4 ID selectors is to put an icon before the button's text. But all the buttons are on left side. I want to make some buttons like: LogOut, User Settings
on the right corner. The HTML to make the menu is:
<html>
<head>
<link rel="stylesheet" href="./css/style.css">
</head>
<body id="home">
<div id='cssmenu'>
<ul>
<li id="homeicon" class='active'><a href='index.html'><span>Home</span></a></li>
<li id="cardicon"><a href='#'><span>Information</span></a></li>
<li id="billingicon"><a href='#'><span>Billing</span></a></li>
<li id="ticketicon" class='last'><a href='#'><span>Tickets</span></a></li>
</ul>
</div>
</body>
</html>
I'm pretty beginner in this language, so I'm sorry for the silly question.
Thank you!
If you want to avoid classes you can use the nth-last-child selector: http://css-tricks.com/almanac/selectors/n/nth-last-child/ and float right
#cssmenu ul :nth-last-child(-n+2) {float:right;}
Demo
Better Demo With Border Fixes
If you're using ID's you could also use those to float right.
Give the right items a class and float them right. For example see this fiddle: http://jsfiddle.net/8Ena2/
#cssmenu ul li.right {float:right;}
Related
I am trying to change from anchor tag to ul li but it doesn't seem to work.
Can you find out where I need to change CSS of my code?
Original link:https://codepen.io/arkev/pen/DzCKF
My code: https://codepen.io/SankS/pen/YRNzGK
<ul>
<li>Browse</li>
<li>Compare</li>
<li>Order Confirmation</li>
<li>Checkout</li>
</ul>
Minor changes in css and change 'active' class to li element
/*custom font*/
#import url(https://fonts.googleapis.com/css?family=Merriweather+Sans);
* {
margin: 0;
padding: 0;
}
html,
body {
min-height: 100%;
}
a{text-decoration:none;}
body {
text-align: center;
padding-top: 100px;
background: #689976;
background: linear-gradient(#689976, #ACDACC);
font-family: 'Merriweather Sans', arial, verdana;
}
.breadcrumb {
/*centering*/
display: inline-block;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);
overflow: hidden;
border-radius: 5px;
/*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
counter-reset: flag;
}
.breadcrumb li {
text-decoration: none;
outline: none;
display: block;
float: left;
font-size: 12px;
line-height: 36px;
color: white;
/*need more margin on the left of links to accomodate the numbers*/
padding: 0 10px 0 60px;
background: #666;
background: linear-gradient(#666, #333);
position: relative;
}
/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
.breadcrumb li:first-child {
padding-left: 46px;
border-radius: 5px 0 0 5px;
/*to match with the parent's radius*/
}
.breadcrumb li:first-child:before {
left: 14px;
}
.breadcrumb li:last-child {
border-radius: 0 5px 5px 0;
/*this was to prevent glitches on hover*/
padding-right: 20px;
}
/*hover/active styles*/
.breadcrumb li.active,
.breadcrumb a:hover {
background: #333;
background: linear-gradient(#333, #000);
}
.breadcrumb li.active:after,
.breadcrumb li:hover:after {
background: #333;
background: linear-gradient(135deg, #333, #000);
}
/*adding the arrows for the breadcrumbs using rotated pseudo elements*/
.breadcrumb li:after {
content: '';
position: absolute;
top: 0;
right: -18px;
/*half of square's length*/
/*same dimension as the line-height of .breadcrumb a */
width: 36px;
height: 36px;
/*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's:
length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
if diagonal required = 1; length = 1/1.414 = 0.707*/
transform: scale(0.707) rotate(45deg);
/*we need to prevent the arrows from getting buried under the next link*/
z-index: 1;
/*background same as links but the gradient will be rotated to compensate with the transform applied*/
background: #666;
background: linear-gradient(135deg, #666, #333);
/*stylish arrow design using box shadow*/
box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1);
/*
5px - for rounded arrows and
50px - to prevent hover glitches on the border created using shadows*/
border-radius: 0 5px 0 50px;
}
/*we dont need an arrow after the last link*/
.breadcrumb li:last-child:after {
content: none;
}
/*we will use the :before element to show numbers*/
.breadcrumb li:before {
content: counter(flag);
counter-increment: flag;
/*some styles now*/
border-radius: 100%;
width: 20px;
height: 20px;
line-height: 20px;
margin: 8px 0;
position: absolute;
top: 0;
left: 30px;
background: #444;
background: linear-gradient(#444, #222);
font-weight: bold;
}
.flat li,
.flat li:after {
background: white;
color: black;
transition: all 0.5s;
}
.flat li a {color:black;}
.flat li a:hover{background:none;}
.flat li:before {
background: white;
box-shadow: 0 0 0 1px #ccc;
}
.flat li:hover,
.flat li.active,
.flat li:hover:after,
.flat li.active:after {
background: #9EEB62;
}
<!-- a simple div with some links -->
<!-- another version - flat style with animated hover effect -->
<div class="breadcrumb flat">
<ul>
<li class="active">
Browse
</li>
<li>Compare</li>
<li>Order Confirmation</li>
<li>Checkout</li>
</ul>
</div>
<!-- Prefixfree -->
<script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js" type="text/javascript" type="text/javascript"></script>
Try left floating the li tags to get the horizontal look:
.breadcrumb li {
float: left;
}
Try this, I think this will help you
.flat ul li{
float:left;
}
This is my code and this is the navigation bar, created with Wordpress PHP.
Navigation bar without hover:
http://postimg.org/image/awr4dlok5/
When I hover, it wont follow the shape of the navigation bar. I wanted it to have rounded corners. Please help.
This is how it should look:
http://postimg.org/image/jhks7djnz/
Thank you :) (Ignore background, just some random anime pics)
.site-nav {
height: 50px;
width: 960px;
margin: 15px auto;
color: white;
background: rgb(72, 55, 35);
background: rgba(72, 55, 35, .75);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.4);
box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.4);
}
.site-nav ul {
margin: 0;
padding: 0;
}
.site-nav ul:before, .site-nav:after {
content:"";
display: table;
}
.site-nav ul:after {
clear: both;
}
.site-nav ul {
*zoom: 1;
}
.site-nav ul li {
list-style: none;
float: left;
border-right: 1px solid gray;
height: 50px;
}
.site-nav ul li a:link, .site-nav ul li a:visited {
display: block;
padding: 14px 18px;
text-decoration: none;
font-size: 17px;
}
.site-nav ul li a:hover {
background:rgba(72, 55, 35, 0.4);
}
You need to set a border radius on the element you're hovering over to match the parent. You only need this on the first menu element, and you only want the top and bottom left to have a radius applied.
The following should do the trick:
.site-nav ul li a:first-child{
-webkit-border-top-left-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
You need to add the radius to the first menu item as well.
.site-nav ul li:first-child
{
-webkit-border-radius: 15px 0 0 15px;
-moz-border-radius: 15px 0 0 15px;
border-radius: 15px 0 0 15px;
}
Adding the above to the css should work
EDIT: If it doesn't work with the above style try this one:
.site-nav ul li:first-child a
{
-webkit-border-radius: 15px 0 0 15px;
-moz-border-radius: 15px 0 0 15px;
border-radius: 15px 0 0 15px;
}
.site-nav ul li:first-child a:hover
{
-webkit-border-radius: 15px 0 0 15px;
-moz-border-radius: 15px 0 0 15px;
border-radius: 15px 0 0 15px;
}
You can do this by adding a border-radius to the element when hovering.
CSS:
Change
.site-nav ul li a:hover {
background:rgba(72, 55, 35, 0.4);
}
to
.site-nav ul li a:hover {
background:rgba(72, 55, 35, 0.4);
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
This would fit perfectly (if using the correct border-radius amount) for the Home button.
If you want to add rounded corners for all corners of the element (not just the top and bottom left like above), just use this:
.site-nav ul li a:hover {
background:rgba(72, 55, 35, 0.4);
border-radius: 20px;
}
EDIT: When looking at your navigation bar, only the first element (e.g. the Home button) needs this border-radius, the other buttons have straight corners. You could do the following (instead of the above) to only apply these rounded corners on the Home button:
.site-nav ul li:first-child a:hover {
background:rgba(72, 55, 35, 0.4);
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
By selecting li:first-child, only the first li element of the list will have this CSS applied.
In:
.site-nav ul li a:hover{
background:rgba(72,55,35,0.4);
}
You are changing the background of .site-nav ul li a tag.
![enter image description here][1]I have the following CSS navigation that adds an arrow on hover.
How can add an arrow to be visible for the active or on link? i have attached the image as well
Here is my code below
<style type="text/css">
#nav {
margin-top:0;
padding: 12px 0;
margin-left: 0;
background-color: #fafafa;
color: #464646;
-moz-box-shadow: 0 5px 5px #888;
-webkit-box-shadow: 0 5px 5px #888;
box-shadow: 0 5px 5px #888;
}
#nav li {
list-style: none;
display: inline;
margin: 0px;
padding: 0;
padding: 22px;
padding-right: 0;
padding-left: 0;
}
#nav li a {
font-family: Arial;
font-style:normal;
text-transform: uppercase;
text-decoration: none;
color: #464646;
padding: .7em 3em;
border-right: 1px dashed #959595;
}
#nav li a:hover {
background-color: #fafafa;
color: #005596;
font-weight: bold;
}
#nav li:hover {
background: transparent url(images/down_arrow2.png) no-repeat scroll center bottom;
margin: 0;
}
#active a:link, #active a:visited,#active a:hover
{
/* border: 1px solid #333; */
background-color: #fafafa;
color: #005596;
font-weight:bold;
}
</style>
HTML
<ul id="nav">
<li id="active">Home</li>
<li>Photos</li>
<li>Videos</li>
<li>Add a Restaurant</li>
<li>Delete a Restaurant</li>
<li>Logout</li>
</ul>
Use a class name instead if an id:
<li class="active">Home</li>
Then you can do:
#nav li.active {
background: transparent url(images/down_arrow2.png) no-repeat scroll center bottom;
margin: 0;
}
Just add a background image to css.
#active a:link, #active a:visited,#active a:hover
{
/* border: 1px solid #333; */
background-color: #fafafa;
color: #005596;
font-weight:bold;
background: transparent url(images/down_arrow2.png) no-repeat center bottom;
margin: 0;
}
Similar to http://www.austintexas.gov/government I want to make a menu button bigger when it is active.
Here is my css for my main menu
#mobileMenu_mm1 {
margin: 10px 20px;
padding: 3px 0px;}
#navigation {
margin: 0px auto;
float: left;}
#main-menu{
clear: both;
float: left;
color: #fff;
font-size: 18px;
margin: 0px auto;
overflow: hidden;
width: 100%;}
#main-menu ul {
float: left;
margin-top: 10px;
margin-left: 20px;
padding: 0px 15px;}
#main-menu li {
float: left;
list-style-type: none;
font-weight: 400;
color: #333 !important;
background: rgb(0, 25, 60);
background: rgba(0, 25, 60, 0.9);}
#main-menu li a {
color: #777;
display: block;
padding: 7px 7px 7px 7px;
text-decoration: none;
line-height: 12px;}
/*----------------------MENU SPECIFIC COLORS--------------*/
#main-menu li#dhtml_menu-305{
border-radius: 15px 15px 0px 0px;
border-right: 2px solid #e6e7de;
background: #D1B37F;
}
#main-menu li#dhtml_menu-50692{
border-radius: 15px 15px 0px 0px;
border-right: 2px solid #e6e7de;
background: #ffff90;
}
#main-menu li#dhtml_menu-50690{
border-radius: 15px 15px 0px 0px;
border-right: 2px solid #e6e7de;
background: lightblue;
}
#main-menu li#dhtml_menu-50207{
border-radius: 15px 15px 0px 0px;
border-right: 2px solid #e6e7de;
background: #CAC37F;
}
#main-menu li#dhtml_menu-50207 li{
background: #CAC37F;
}
#main-menu li#dhtml_menu-50691{
border-radius: 15px 15px 0px 0px;
background: #E4B04A;
}
#main-menu li a:hover {
border-radius: 15px 15px 0px 0px;
background: rgb(200, 200, 200);
background: rgba(200, 200, 200, 0.7);
height: 35px;}
#main-menu li a .sf-sub-indicator {
display: block;
overflow: hidden;
position: absolute;
z-index: 15;
text-indent: -9999px;}
#main-menu li ul li a,
#main-menu li ul li a:link,
#main-menu li ul li a:visited {
border-top-width: 0;
color: #fff;
font-size: 14px;
padding: 10px 10px;
text-transform: none;
line-height: 13px;
width: 105px;}
#main-menu li ul {
height: auto;
padding: 0px 0px;
left: -9999px;
margin: 0 0 0 -2px;
position: absolute;
z-index: 15;
width: 0px;}
#main-menu li ul a {width: 110px;}
#main-menu li ul ul {margin: -33px 0 0 124px;}
#main-menu li:hover>ul,
#main-menu li.sfHover ul {left: auto;}
#main-menu ul li.leaf, #main-menu ul li.expanded, #main-menu ul li.collapsed {list-style:none;}
#main-menu ul.menu li {margin: 0;}
#main-menu li.expanded, #main-menu li.collapsed, #main-menu li.leaf {margin: 0;padding: 0;}
HTML/PHP
<nav id="navigation" role="navigation">
<div id="main-menu">
<?php
$main_menu_tree = menu_tree(variable_get('menu_main_links_source', 'main-menu'));
print drupal_render($main_menu_tree);
?>
</div>
</nav><!-- end main-menu -->
<?php if ($page['header']): ?>
<div id="header" class="sixteen columns" style="margin: 0; padding: 0;>
<?php print render($page['header']); ?>
</div>
<?php endif; ?>
</div>
</div>
</header>
Here is a screenshot
Things I've Tried
I have already tried using :active and :current. For some reason only the first button on my menu has an active class given to it. Cheers!
Nothing is better than a live example:
http://jsfiddle.net/g105b/76JDZ/
The example uses JavaScript to add the active class to the currently selected li element, but the effect you are looking for is purely CSS.
A feature of Drupal is to automatically add the class name active to the currently selected li, so you can completely ignore the JavaScript in the linked example, and simply take the concept shown in CSS.
Use .active class name. All active menu links in Drupal has a class name active.
#main-menu li.active
If you are willing to select only the menu links that have children, use .expanded class name.
#main-menu li.expanded
Hope this works... Muhammad.
I want to underline my navigation menu but the problem is that I need it to be thicker so I am using bottom border instead so that I can set the width to 6px.
I can seem to figure out how to get the border to appear closer to the text. There seems to about a 10px gap between the text and the bottom-border at the moment and I don't want to have any.
I have tried to position another div and position it relative to each {li} with {bottom: 10px} but I can't seem to get it to work.
Here's what I have so
CODE
<div id="menu">
<ul>
<li>home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
CSS
#menu {
position: fixed;
left: 25%;
clear: both;
float: left;
font-size: 80px;
z-index: 500;
filter: alpha(opacity=75);
opacity: .75;
}
#menu ul{
text-decoration: none;
list-style-type: none;
margin: 0;
padding: 0;
line-height: 90px;
}
#menu ul li{
text-decoration: none;
list-style-type: none;
margin: 0;
}
#menu ul li a{
border-bottom: 6px solid #000;
text-decoration: none;
list-style-type: none;
color: #000;
}
#menu ul li a:hover{
}
You can use a mixture of line-height and margin to garner such an effect, like so:
#menu ul li a {
border-bottom: 6px solid #000000;
color: #000000;
display: block;
line-height: 50px;
list-style-type: none;
margin: 20px 0;
text-decoration: none;
}
Using display: inline-block; in combination with border-bottom could cause some weird behavior line breaks if longer links contain a line-break, see http://jsfiddle.net/PQZ9H/. Alternatively, you could use a combination of background-image and background-position which has the advantage of not touching the display value.
a {
text-decoration: none;
position: relative;
background-repeat: repeat-x;
background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==);
background-position: left 15px;
}
a:hover { background: none; }
A disadvantage is that you might have to define a background-position for every font-size you use.
Using this technique you could also remove the border from descenders like g or y adding
a span.descender { text-shadow: -1px 0px 0px white, 1px 0px 0px white, -2px 0px 0px white, 2px 0px 0px white, -3px 0px 0px white, 3px 0px 0px white; }
and
<span class="descender">A link with descenders like g or y</span>
See http://jsfiddle.net/25XNY/1
Try to this (origin russian http://artgorbunov.ru/bb/soviet/20120510/) article methods (background gradient and http://jsfiddle.net/d3WG6/)
<p>Зигварт считал <a><span>критерием истинности необходимость и общезначимость, для которых нет никакой опоры</span></a> в объективном мире.</p>
a { font-size: 50%; border-bottom: 1px dashed red; }
a > span { font-size: 200%; line-height: normal; }
Margin property can't change the border-bottom position, so
The height of the <a> element will define the position of the your border-bottom.
#menu > ul > li > a {
height: ;
}