Tag: Html

WordPress wp_nav_menu() add new custom sub menu item

If some time we need to add new menu item in drop down list. bellow code to we can add sub menu.

See demo image


function dalwadiwp_submenu_item($items, $args) {

$theme_location = 'main-menu';// Theme Location slug
## if ( $args->theme_location == 'main-menu' ) // if we can set menu location then used it.
if ( $args->menu == 19 ) // if we can not set menu location then used direct menu id.
{
// debug($items);
$existing_menu_item_db_id = 701;
$new_menu_item_db_id = 98987; // unique id number
$label = 'Log out';
$url = wp_logout_url(get_permalink());

if ( is_user_logged_in() ) {

// only if user is logged-in, do sub-menu link
$item = array(
'title' => $label,
'menu_item_parent' => $existing_menu_item_db_id,
'ID' => 'log-out',
'db_id' => $new_menu_item_db_id,
'url' => $url,
// 'classes' => array( 'custom-menu-item' )// optionally add custom CSS class
);

$items[] = (object) $item;
}
}
return $items;
}

add_filter('wp_nav_menu_objects', 'dalwadiwp_submenu_item',10 , 2);

 

Advertisements

Apply css only for chrome and safari

For apply css in chrome and safari see below code.

Add this css Code in style seet and your class name.

@media screen and (-webkit-min-device-pixel-ratio:0) {

/****** This code chrome or safari ******/

.banner-nav-left{
background-position-x: center;
background-position-y: -12px;
}

/****** This code only safari ******/

::i-block-chrome, .banner-nav-left{
background-position-x: center;
background-position-y: -12px;
}

}

 

CSS how to add Gradients

To add gradient in CSS use below code.

CSS code Below:

.liner-gridiaent{
width:300px;
height:200px;
border-radius:7px;
-moz-border-radius:7px; /* Firefox */
-webkit-border-radius:7px; /* Safari and Chrome */
background: linear-gradient(top, #e0e0e0 0%,#666666 59%); /* standerd syntex */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e0e0), color-stop(59%,#666666));
/*Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e0e0e0 0%,#666666 59%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e0e0e0 0%,#666666 59%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e0e0e0 0%,#666666 59%); /* IE10+ */

How to change cursor using CSS and HTML

How to change cursor to mouse over see below:

<h2>Mouse over the words to change the cursor.</h2>
<ul>
  <li class="auto">auto</li>
  <li class="crosshair">crosshair</li>
  <li class="default">default</li>
  <li class="e-resize">e-resize</li>
  <li class="help">help</li>
  <li class="move">move</li>
  <li class="n-resize">n-resize</li>
  <li class="ne-resize">ne-resize</li>
  <li class="nw-resize">nw-resize</li>
  <li class="pointer">pointer</li>
  <li class="progress">progress</li>
  <li class="s-resize">s-resize</li>
  <li class="se-resize">se-resize</li>
  <li class="sw-resize">sw-resize</li>
  <li class="text">text</li>
  <li class="w-resize">w-resize</li>
  <li class="wait">wait</li>
</ul>

Style here

.cursor {
	text-align: center;
	font-size: 18px;
}
.auto {
	cursor: auto;
}
.crosshair {
	cursor: crosshair;
}
.default {
	cursor: default;
}
.e-resize {
	cursor: e-resize;
}
.help {
	cursor: help;
}
.move {
	cursor: move;
}
.n-resize {
	cursor: n-resize
}
.ne-resize {
	cursor: ne-resize
}
.nw-resize {
	cursor: nw-resize
}
.pointer {
	cursor: pointer
}
.progress {
	cursor: progress
}
.s-resize {
	cursor: s-resize
}
.se-resize {
	cursor: se-resize
}
.sw-resize {
	cursor: sw-resize;
}
.text {
	cursor: text;
}
.w-resize {
	cursor: w-resize;
}
.wait {
	cursor: wait;
}

Simple drop down css menu

simple drop down css menu example

In this post I describe that how we can create drop down menu using CSS3 and html ui li tag.

Below is the code for html file.

<ul>
	<li><a href=”index.php”>Link</a>
	<ul>
		<li><a href=”index.php”>Sub Link</a></li>
		<li><a href=”index.php”>Sub Link</a></li>
	</ul>
	</li>
</ul>

In CSS put this code for simple drop down menu.

.vertical-nav {
height:auto;
list-style:none;
margin: 20px 0 0 0;
}
.vertical-nav li {
height: 25px;
margin: 0;
padding: 5px 0;
background-color: #666;
border: none;
text-align: center;
display: inline-block;
float: left;
min-width: 125px;  /******* MODIFIED ********/
}
.vertical-nav li:hover {
background-color:#f36f25;
color:#FFFFFF;
}
.vertical-nav li a {
font-family:Calibri, Arial;
font-size:18px;
font-weight:bold;
color:#ffffff;
text-decoration:none;
}
.vertical-nav li.current {
background-color:#F36F25;
}
.vertical-nav li.current a {
color:#FFFFFF;
}
vertical-nav ul li ul {
display:none;
list-style-type:none;
width:125px;
padding:0px;
margin-top:3px;
margin-left:-5px;
}
vertical-nav ul li:hover ul {
display:block;
}
vertical-nav ul li:hover ul li {
background-color:#555555;
width:125px;
height:30px;
display:inline-block;
}
vertical-nav ul li ul li:hover {
background-color:#333333;
}
vertical-nav ul li ul li a {
color:#FFF;
text-decoration:underline;
}
vertical-nav ul li ul li a:hover {
text-decoration:none;
}
.vertical-nav li ul {
display: none;
margin-top: 6px;
padding: 0;
}
.vertical-nav li:hover ul {
display: block;
}
.sub-menu li
{
clear: both;
}

 

HTML 5 how to drag and drop

Let us add Drag and Drop event  using HTML5.

  • Drag and drop is a very common feature. It is when you “grab” an object and drag it to a different location.
  • In HTML5, drag and drop is part of the standard, and any element can be draggable.

Below is the code for html file.

<!DOCTYPE HTML>
<html>
<head>

function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData(“Text”,ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData(“Text”);
ev.target.appendChild(document.getElementById(data));
}

<link href=”scro.css” rel=”stylesheet” type=”text/css”>
</head>
<body>

<br>
<img id=”drag1″ src=”dre.png” draggable=”true” ondragstart=”drag(event)” width=”356″ height=”89″>

</body>
</html>

HTML how to add youtube Video

Let us add youtube video  using HTML.

  • When you go you tube and click the Share button, the HTML code used to embed a link that video is displayed directly below it, however that’s not what we are after–we want to directly embed the video into the page. We do that by clicking the Embed button which is displayed directly below the Link URL.
  • Once you click the Embed button, you will see the HTML code for embedding the video.
  • copy html code and put your html page.see below code.

Below is the code for html file.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
</head>

<body>

<!DOCTYPE html>
<html>
<body>


</body>
</html>

</body>
</html>

CSS how to add accordion menu.

Let us create a simple Accordion Menu using CSS3 and HTML.

Accordion Menu has few top line menu items which when clicked toggles to open sub menu options. When another top level menu is selected, other open menu will automatically collapse and save useful screen area.

Below is the code for html file.

accordion-1

some text

accordion-2

some text

accordion-3

Some textSome textSome textSome textSome text

accordion-4

Your content gose heare

</section>
</div>

 

In CSS put this code for accordion menu.

.ac-container{
width: 400px;
margin: 10px auto 30px auto;
text-align: left;
}
.ac-container label{
font-family: Arial, sans-serif;
padding: 5px 20px;
position: relative;
z-index: 20;
display: block;
height: 30px;
cursor: pointer;
color: #000;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
line-height: 33px;
font-size: 19px;
background: #ffffff;
box-shadow:
0px 0px 0px 1px rgba(155,155,155,0.3),
1px 0px 0px 0px rgba(255,255,255,0.9) inset,
0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label:hover{
background: #fff;
}
.ac-container input:checked + label,
.ac-container input:checked + label:hover{
background: #c6e1ec;
color: #3d7489;
text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
box-shadow:
0px 0px 0px 1px rgba(155,155,155,0.3),
0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
content: ”;
position: absolute;
width: 24px;
height: 24px;
right: 13px;
top: 7px;
background: transparent url(../images/down.png) no-repeat center center;
}
.ac-container input:checked + label:hover:after{
background-image: url(../images/up.png);
}
.ac-container input{
display: none;
}
.ac-container article{
background-color:#999;
margin-top: -1px;
overflow: hidden;
height: 0px;
position: relative;
z-index: 10;
-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ac-container article p{
font-style: italic;
color: #000;
line-height: 23px;
font-size: 14px;
padding: 20px;
}
.ac-container input:checked ~ article{
box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ac-container input:checked ~ article.ac-small{
height: 140px;
}
.ac-container input:checked ~ article.ac-medium{
height: 180px;
}
.ac-container input:checked ~ article.ac-large{
height: 190px;
}

The output for the above Code is like below.

accordian

Standard Media Queries For Responsive Website

standard media queries for css responsive mobile layout for all screen. all types of mobile, tablets and desktop.

@media(min-width:320px) and (max-width:479px)
{
}
@media(min-width:480px) and (max-width:567px)
{
}
@media(min-width:568px) and (max-width:684px)
{
}
@media(min-width:685px) and (max-width:767px)
{
}
@media(min-width:768px) and (max-width:991px)
{
}
@media(min-width:992px) and (max-width:1024px)
{
}
@media(min-width:1023px) and (max-width:1200px)
{
}