BRICK WALL MENU BAR CODE

Wednesday, 21 October 2015

BRICK WALL MENU BAR CODE

--------------------------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE
http://fbgadgets.blogspot.co.uk/2013/11/breadcrumb-navigation-menu-guardian.html
https://www.youtube.com/watch?v=O-ly2ArnN30&feature=youtu.be
--------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<style>
.menu_bar {
background-color: rgba(255, 255, 255, 0.6);
border: 1px solid #929292;
box-shadow: 0 0 10px #929292 inset;
height: 80px;
width: 1199px;
}
.menu_bar ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
.menu_bar ul li {
float: left;
}
.menu_bar ul li a {
background-color: rgba(216, 231, 234, 0.3);
border-right: 1px solid #929292;
border-bottom: 1px solid #929292;
color: #000000;
display: block;
font-weight: bold;
padding: 10px;
text-align: center;
text-decoration: none;
min-width: 42px;
}
.menu_bar ul li a:hover {
background-color: rgba(142, 181, 190, 0.4);
}
</style>
</head>
<body>

<div class="menu_bar">
<ul>
<li><a href="">Home</a></li>
<li><a href="">For New Readers</a></li>
<li><a href="">Message</a></li>
<li><a href="">Books</a></li>
<li><a href="">Letters</a></li>
<li><a href="">Articles</a></li>
<li><a href="">News</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Iqra</a></li>
<li><a href="">Syllabus</a></li>
<li><a href="">Tableegh</a></li>
<li><a href="">Our Beliefs</a></li>
<li><a href="">Rustgari Fund</a></li>
<li><a href="">General Videos</a></li>
<li><a href="">Jalsa Salana</a></li>
<li><a href="">Friday Sermons</a></li>
<li><a href="">Links</a></li>
<li><a href="">Islah Pasand</a></li>
<li><a href="">Freedom for all, Slavery for none</a></li>
<li><a href="">Prophecy </a></li>
<li><a href="">Order Books (free!)</a></li>
</ul>
<div class="clear"></div>
</div>

</body>
</html>
--------------------------------------------------------------------------------------------------------------------------
CODE:1.2
--------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------
<style type="text/css">
.menu_bar {
float: left;
border: 2px solid Black;
}
.menu_bar li {
float: left;
}
.menu_bar li a {
background-color:red;
border: 1px solid Green;
color: blue;
display: block;
padding: 10px;
text-decoration: none;
}
</style>

<div class='menu_bar'>
<li class='selected'><a href='http://fbgadgets.blogspot.co.uk/2015/09/find-and-replace-text.html'>FRT</a></li>
<li class='selected'><a href='https://picasaweb.google.com/home'>BlogPhotos</a></li>
<li class='selected'><a href='http://fbgadgets.blogspot.co.uk/2015/12/csso-css-optimizer.html'>CSSO</a></li>
<li class='selected'><a href='https://photos.google.com/'>GooglePhotos</a></li>
<li class='selected'><a href='http://fbgadgets.blogspot.co.uk/2015/12/html-code-editor.html'>HtmlEditor</a></li>
<li class='selected'><a href='http://fbgadgets.blogspot.co.uk/2015/05/remove-extra-spaces-html-height100body.html'>RWHITE</a></li>
<li class='selected'><a href='http://fbgadgets.blogspot.co.uk/2014/09/blog-post.html'>SITE MAP</a></li>
<li class='selected'><a href='http://fbgadgets.blogspot.co.uk/2015/11/COMPRESS-HTML.html'>HtmlCompressor</a></li>
<li class='selected'><a href='http://fbgadgets.blogspot.co.uk/2015/12/html-css-java-compressor.html'>HtmlCompressor2</a></li>
<li class='selected'><a href='http://fbgadgets.blogspot.co.uk/2015/11/JavaScript-Compressor.html'>JAVA COMPRESSOR</a></li>
<li class='selected'><a href='http://fbgadgets.blogspot.co.uk/2015/12/simple-css-layout.html'>LAYOUT</a></li>
<li class='cat-item'><a href='http://fbgadgets.blogspot.co.uk/feeds/comments/default' title='Comments RSS'>Comments RSS</a></li>
<li class='cat-item'><a href='https://www.google.co.uk/search?q=site%3Ablogspot.com+fbgadgets' title='Edit this link'>site:blogspot.com fbgadgets</a></li>
<li class='selected'><a href='http://fbgadgets.blogspot.co.uk/2015/12/CSSO-CSS-COMPOSER.html'>WebCss</a></li>
<li class='selected'><a href='http://fbgadgets.blogspot.co.uk/2015/12/httpfbgadgets.html'>XML</a></li>
<li class='selected'><a href='http://fbgadgets.blogspot.co.uk/2015/12/CSSCompressor-CSSMinifier.html'>OtherCss</a></li>
<li class='selected'><a href='http://fbgadgets.blogspot.co.uk/2015/12/csso-css-optimizer.html'>OptizCss</a></li>
<li class='selected'><a href='http://fbgadgets.blogspot.co.uk/2015/12/file-save-as-javascript.html'>SaveAs</a></li>
<li class='selected'><a href='http://fbgadgets.blogspot.co.uk/2015/12/online-css-unminifier.html'>CssUnminifier</a></li>
</div>

--------------------------------------------------------------------------------------------------------------------------
MENU CODE :2
COPY AND PASTE BELOW CODE
--------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<style>
/*---------------- Menu Links -------------------*/
.navcontainer1 {
box-shadow: 0 0 10px #929292 inset;
margin-top:-35px;
width:970px;
float:left;
}
#nav {
background-color: Gold;
border: 1px solid #929292;
list-style-type:none;
margin:0;
padding:0;
height: 35px;
overflow: hidden;
}
#nav ul {
float:left;
list-style-type:none;
margin:0;
padding:0;
}
#nav li {
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn-s4u-pNdHfnZCw_Ogg_y2BnsxGPMf6FgCrgsjzcWKlDaKiNx3nlVJR0gQhyphenhyphenMxrjHP3asC2J_6o6Ot9P5xFci-j3ULo5O25wgePZJfswQyFJ0Cr2tFtL5le57tFiGD9NwTu-fvsTa_p5J/s1600/PinkLine.png');
background-repeat:repeat-y;
border-bottom-color:white;
border-bottom-style:solid;
border-bottom-width:1px;
color:white;
display:block;
float:left;
letter-spacing:1px;
margin:0 1px 0 0;
padding:5px 10px;
text-decoration:none;
}
#nav ul li {
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn-s4u-pNdHfnZCw_Ogg_y2BnsxGPMf6FgCrgsjzcWKlDaKiNx3nlVJR0gQhyphenhyphenMxrjHP3asC2J_6o6Ot9P5xFci-j3ULo5O25wgePZJfswQyFJ0Cr2tFtL5le57tFiGD9NwTu-fvsTa_p5J/s1600/PinkLine.png');
background-repeat:repeat-y;
border-bottom-color:white;
border-bottom-style:solid;
border-bottom-width:1px;
color:white;
display:block;
float:left;
letter-spacing:1px;
margin:0 1px 0 0;
padding:5px 10px;
text-decoration:none;
}
#nav li a:link, #nav li a:visited {
background-color:green;
border-bottom-color:white;
border-bottom-style:solid;
border-bottom-width:1px;
color:white;
display:block;
float:left;
letter-spacing:1px;
margin:0 1px 0 0;
padding:5px 10px;
text-decoration:none;
}
#nav li a:hover {
background-color:red;
border-bottom-color:white;
border-bottom-style:solid;
border-bottom-width:1px;
color:white;
display:block;
float:left;
letter-spacing:1px;
margin:0 1px 0 0;
padding:5px 10px;
text-decoration:none;
}
.navcontainer {
height:35px;
width:970px;
float:left;
}
#nav1 {
height:30px;
}
#nav1, #nav1 ul {
line-height:1;
list-style-image:none;
list-style-type:none;
margin:0;
padding:0;
}
#nav1 ul {
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
}
#nav1 li {
float:left;
font-size: 0.9em;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
}
#nav1 ul li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
}
#nav1 li a {
color: #ffffff;
text-decoration: none;
display: block;
padding: 10px 14px;
}
#nav1 li a:hover {
text-decoration: underline;
}
#nav1 li:hover, #nav1 li.sfhover {
position:static;
}
</style>

</head>
<body>

<div class='navcontainer'>
<ul id='nav'>
<li class='selected'><a href='http://fbgadgets.blogspot.co.uk/2015/09/find-and-replace-text.html'>FRT</a></li>
<li class='selected'><a href='http://fbgadgets.blogspot.co.uk/2015/05/remove-extra-spaces-html-height100body.html'>RWHITE</a></li>
<li class='selected'><a href='http://fbgadgets.blogspot.co.uk/2014/09/blog-post.html'>SITE MAP</a></li>
<li class='cat-item'><a href='http://fbgadgets.blogspot.co.uk/feeds/comments/default' title='Comments RSS'>Comments RSS</a></li>
<li class='cat-item'><a href='https://www.google.co.uk/search?q=site%3Ablogspot.com+fbgadgets' title='Edit this link'>site:blogspot.com fbgadgets</a></li>
</ul>
</div>

</body>
</html>

------------------------------------------------------------------------------------------------------------
Read More:
https://www.w3schools.com/howto/howto_css_alert_buttons.asp
OR USE THIS CODE
a{
text-decoration: none; /*REMOVE UNDER LINES TEXT */
}
#ColorRed{background-color:Red;} /* Red */
#ColorGold{background-color:Gold;} /* GOLD */
a{
text-decoration: none; /*REMOVE UNDER LINES TEXT */
}
<button id="ColorRed"><a href="http://fbgadgets.blogspot.co.uk/2016/11/file-types.html">FileType</a><img border="0" alt="W3Schools" src="http://www.bpl.bc.ca/sites/all/themes/bplf4/images/bpl-icon-phone.png" width="47" height="47"></button>

<button id="ColorRed"><a href="http://fbgadgets.blogspot.co.uk/2016/11/file-types.html">FileType</a> &hearts;</button>

<button id="ColorGold"><a href="http://www.dynamicdrive.com/style/" rel="ddsubmenu2" class="">CSS<img src="http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/ddlevelsfiles/arrow-down.gif" class="downarrowpointer" style="width: 11px; height: 7px;"></a></button>

------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>

<head>

<!--[COPY FROM]>

https://www.w3schools.com/howto/howto_css_alert_buttons.asp

<![COPY FROM]-->

<title> CSS ALERT BUTTON </title>

<!DOCTYPE html>

<html>

<head>

<style>

button {

float:left; /* FOR REMOVE SPACE BETWEEN IN BUTTONS */

border-color:Black;

background-color:White;

color:000;

padding: 14px 28px;

font-size: 16px;

cursor: pointer;

}

a:-webkit-any-link{

color: -webkit-link;

cursor: auto;

text-decoration: none; /*REMOVE UNDER LINES TEXT */

}

</style>

</head>

<body>

<ul>

<button><a href="http://fbgadgets.blogspot.co.uk/2016/11/file-types.html">FileType</a></button>

<button><a href="https://picasaweb.google.com/home">BlogPhotos</a></button>

<button><a href="http://fbgadgets.blogspot.co.uk/2016/08/comments-remover.html">COMMENTS REMOVER</a></button>

<button><a href="https://photos.google.com/">GooglePhotos</a></button>

<button><a href="https://myaccount.google.com/privacy">GoogleLog</a></button>

<button><a href="http://fbgadgets.blogspot.co.uk/2015/12/html-code-editor.html">HtmlEditor</a></button>

<button><a href="http://fbgadgets.blogspot.co.uk/2015/05/remove-extra-spaces-html-height100body.html">RWHITE</a></button>

<button><a href="http://fbgadgets.blogspot.co.uk/2015/11/COMPRESS-HTML.html">HtmlCompressor</a></button>

<button><a href="http://fbgadgets.blogspot.co.uk/2015/12/html-css-java-compressor.html">HtmlCompressor2</a></button>

<button><a href="http://fbgadgets.blogspot.co.uk/2015/11/JavaScript-Compressor.html">JAVA COMPRESSOR</a></button>

<button><a href="http://fbgadgets.blogspot.co.uk/2015/12/simple-css-layout.html">LAYOUT</a></button>

<button><a href="http://fbgadgets.blogspot.co.uk/search/label/buttonNE%20FIND%20IN%20FILE%20SOFTWARE">LINE FINDER</a></button>

<button><a href="http://fbgadgets.blogspot.co.uk/feeds/comments/default" title="Comments RSS">Comments RSS</a></button>

<button><a href="https://www.google.co.uk/search?q=site%3Ablogspot.com+fbgadgets" title="Edit this link">site:blogspot.com fbgadgets</a></button>

<button><a href="http://fbgadgets.blogspot.co.uk/2016/07/52-best-free-folder-sync-software-for.html">SRCSoftware</a></button>

<button><a href="https://www.yell.com/s/clothing+manufacturers+and+wholesalers-upper+tooting-south+west+london.html">WholeSeller</a></button>

<button><a href="http://fbgadgets.blogspot.co.uk/2015/12/CSSO-CSS-COMPOSER.html">WebCss</a></button>

<button><a href="http://fbgadgets.blogspot.co.uk/2015/12/CSSCompressor-CSSMinifier.html">OtherCss</a></button>

<button><a href="http://fbgadgets.blogspot.co.uk/2015/12/csso-css-optimizer.html">OptizCss</a></button>

<button><a href="http://fbgadgets.blogspot.co.uk/2015/12/file-save-as-javascript.html">SaveAs</a></button>

<button><a href="http://fbgadgets.blogspot.co.uk/2015/12/online-css-unminifier.html">CssUnminifier</a></button>

<button><a href="http://fbgadgets.blogspot.co.uk/2016/06/pdf-screen-caputre-save-image.html">HTML TO PDF GOOGLE</a></button>

</ul>

</div>

</body>

</html>

-------------------------------------------------------------------------

ReadMore:
https://www.w3schools.com/css/css_link.asp
http://fbgadgets.blogspot.co.uk/2014/01/link-change-into-button.html

----------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------
CODE:1
--------------------------------------------------------------------------------------------------------------
<style> a{color: hotpink;} </style>
<a href="default.asp" target="_blank">This is a link</a>
--------------------------------------------------------------------------------------------------------------
CODE:2
--------------------------------------------------------------------------------------------------------------
<style>
a{
background-color:White;
border-style: solid;
border-color: Black;
color: BLack;
padding: 14px 25px;
text-decoration: none; /*REMOVE UNDER LINES TEXT */
display: inline-block; /*GIVE TOP SPACE LIKE MARGIN */
}
</style>
<a href="default.asp" target="_blank">This is a link</a>
-----------------------------------------------------------------------------------------------------------