best Menus For Blogger With CSS, JQuery
Vertical list of elegant red with the code of the technology blogger css
Our appointment today with the addition and put them in my dozens of shapes add a vertical list with labels in red and code sections are placed in the side column, as in the attached picture the subject
Step 1.Go to layout > Edit HTML 
Step 2. Copy and Paste the following code Directly Above / Before</head>
<style type="text/css">
<!--
#menucase ul.vert-one{margin:0;padding:0;list-style-type:none;display:block;font:bold 16px Helvetica, Verdana, Arial, sans-serif;line-height:165%;width:200px;}
#menucase ul.vert-one li{margin:0;padding:0;border-top:1px solid #4D0000;border-bottom:1px solid #761A1A;}
#menucase ul.vert-one li a{display:block;text-decoration:none;color:#fff;background:#600;padding:0 0 0 20px;width:180px;}
#menucase ul.vert-one li a:hover{background:#900 url("http://santabanta.mywapblog.com/files/vert-one-arrow.gif") no-repeat 0 9px;}
#menucase ul.vert-one li a.current,ul.vert-one li a.current:hover{background:#933 url("http://santabanta.mywapblog.com/files/vert-one-arrow.gif") no-repeat 0 9px;}
-->
step 2. go to your blogs design page and click Add A Gadget > Choose Html/Javascript :
and then paste the below code. Editable parts are shown in red
<div id="menucase">
<ul class="vert-one">
<li><a href="TAB1 URL HERE" title="CSS Menus">TAB1 TITLE HERE</a></li><li><a href="TAB2 URL HERE/" title="CSS Menus">TAB2 TITLE HERE</a></li>
<li><a href="TAB3 URL HERE/" title="CSS Menus" class="current">TAB3 TITLE HERE</a></li>
<li><a href="TAB4 URL HERE/" title="CSS Menus">TAB4 TITLE HERE</a></li>
<li><a href="TAB6 URL HERE/" title="CSS Menus">TAB6 TITLE HERE</a></li>
<li><a href="TAB7 URL HERE/" title="CSS Menus">TAB7 TITLE HERE</a></li>
</ul>
</div>
- 2Menus_________________________________
Expanding Boxes Navigation Menu in Blogspot
You may've seen this navigation menu somewhere else, it's the CSS Tricks v8 design navigation menu. I've done a lot of work for bloggerizing this article. At last I made this! Just follow these 2 simple steps and add this super navigation menu in your blogspot blog!
<nav>
<ul>
<li>
<a class="a-home active" href="#">
<span>Home</span>
</a>
</li>
<li>
<a class="a-forums" href="#">
<span>Forums</span>
</a>
</li>
<li>
<a class="a-videos not-active" href="#">
<span>Videos</span>
</a>
</li>
<li>
<a class="a-downloads" href="#">
<span>Downloads</span>
</a>
</li>
<li>
<a class="a-snippets" href="#">
<span>Snippets</span>
</a>
</li>
</ul>
</nav>
<ul>
<li>
<a class="a-home active" href="#">
<span>Home</span>
</a>
</li>
<li>
<a class="a-forums" href="#">
<span>Forums</span>
</a>
</li>
<li>
<a class="a-videos not-active" href="#">
<span>Videos</span>
</a>
</li>
<li>
<a class="a-downloads" href="#">
<span>Downloads</span>
</a>
</li>
<li>
<a class="a-snippets" href="#">
<span>Snippets</span>
</a>
</li>
</ul>
</nav>
Now go to Template and then find and above it paste the below code and then Save the Template
nav {
background: #444;
border-bottom: 8px solid #E6E2DF;
overflow: hidden;
position: relative;
width: 100%;
}
nav:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: white;
}
nav ul {
background: -moz-linear-gradient(left,
#444 0%,
#444 50%,
#41d05f 100%);
background: -webkit-gradient(linear, left top, right top,
color-stop(0%,#444),
color-stop(50%,#444),
color-stop(50%,#41d05f),
color-stop(100%,#41d05f));
list-style: none;
overflow: hidden;
padding: 0 0 0 20px;
width: 810px;
}
nav li {
display: inline;
}
nav a {
color: white;
display: block;
float: left;
font-family: "myriad-pro-1","myriad-pro-2", HelveticaNeue, Helvetica, Arial, Sans-Serif;
font-size: 22px;
padding: 12px 0;
text-decoration: none;
text-align: center;
width: 19%;
-webkit-transition: width 0.12s ease;
-moz-transition: width 0.12s ease;
-o-transition: width 0.12s ease;
transition: width 0.12s ease;
}
nav a:hover {
color: white;
}
nav a:hover span {
border-bottom: 2px solid white;
}
nav .a-home {
background: #ff8400;
z-index: 100;
position: relative;
}
nav .a-forums {
background: #e42b2b;
}
nav .a-videos {
background: #a800ff;
}
nav .a-downloads {
background: #49a7f3;
}
nav .a-snippets {
background: #41d05f;
}
.home nav {
border-bottom-color: #ff8400;
}
.forums nav {
border-bottom-color: #e42b2b;
}
.videos nav {
border-bottom-color: #a800ff;
}
.downloads nav {
border-bottom-color: #49a7f3;
}
.snippets nav {
border-bottom-color: #41d05f;
}
nav li:hover a {
width: 24%;
}
nav ul:hover .active {
width: 19%;
}
nav ul:hover .active:hover {
width: 24%;
}
nav li a.active {
width: 24%;
}
background: #444;
border-bottom: 8px solid #E6E2DF;
overflow: hidden;
position: relative;
width: 100%;
}
nav:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: white;
}
nav ul {
background: -moz-linear-gradient(left,
#444 0%,
#444 50%,
#41d05f 100%);
background: -webkit-gradient(linear, left top, right top,
color-stop(0%,#444),
color-stop(50%,#444),
color-stop(50%,#41d05f),
color-stop(100%,#41d05f));
list-style: none;
overflow: hidden;
padding: 0 0 0 20px;
width: 810px;
}
nav li {
display: inline;
}
nav a {
color: white;
display: block;
float: left;
font-family: "myriad-pro-1","myriad-pro-2", HelveticaNeue, Helvetica, Arial, Sans-Serif;
font-size: 22px;
padding: 12px 0;
text-decoration: none;
text-align: center;
width: 19%;
-webkit-transition: width 0.12s ease;
-moz-transition: width 0.12s ease;
-o-transition: width 0.12s ease;
transition: width 0.12s ease;
}
nav a:hover {
color: white;
}
nav a:hover span {
border-bottom: 2px solid white;
}
nav .a-home {
background: #ff8400;
z-index: 100;
position: relative;
}
nav .a-forums {
background: #e42b2b;
}
nav .a-videos {
background: #a800ff;
}
nav .a-downloads {
background: #49a7f3;
}
nav .a-snippets {
background: #41d05f;
}
.home nav {
border-bottom-color: #ff8400;
}
.forums nav {
border-bottom-color: #e42b2b;
}
.videos nav {
border-bottom-color: #a800ff;
}
.downloads nav {
border-bottom-color: #49a7f3;
}
.snippets nav {
border-bottom-color: #41d05f;
}
nav li:hover a {
width: 24%;
}
nav ul:hover .active {
width: 19%;
}
nav ul:hover .active:hover {
width: 24%;
}
nav li a.active {
width: 24%;
}
- 3Menus_________________________________
CSS3 Dropdown Menu For Blogspot
make a navigation menu with some CSS, JQuery
Step 1.Go to layout > Edit HTML
Step 2. Copy and Paste the following code Directly Above / Before ]]></b:skin>
.kwicks {
list-style: none;
position: relative;
margin: 0;
padding: 0;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-hQo7XQtJPZC-FqOVAKwRNZ17wuxnbLZ3WXS0SdpN4z_Jbdmh6fomAX42X3Rbj_LR0hFqUK4TLkp_LH4Pt0fasD1ZEmHQHdKqruwcbPl_4w0s1dmbpbeBWqd4CujrWmfDFdqszxcr10T5/s1600/no_flicker.jpg); /*some browsers are to slow when aligning the menu items via jQuery and so the background shines through, this prevents this flickering*/
}
.kwicks li{
display: block;
overflow: hidden;
padding: 0;
cursor: pointer;
float: left;
width: 125px;
height: 40px;
margin-right: 0px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0x0mkTh7SrLMmS7nONJBH8Fyrvz0nSj6KuQ5V7Cgbm8vfsB85h7pyG1IqaQUFaHQ7GSSVLHlPe3FtH9UWCFf2j6UxcWVMF-kyGOW7-n6yN5k9yfOERUi9uCva5cjbUrchtmbAn05QzrbK/s1600/kwicks_sprite.jpg);
background-repeat:no-repeat;
}
.kwicks a{
display:block;
height:40px;
text-indent:-9999px;
outline:none;
}
#kwick1 {
background-position:0px 0px;
}
#kwick2 {
background-position:-200px 0px;
}
#kwick3 {
background-position:-400px 0px;
}
#kwick4 {
background-position:-600px 0px;
}
#kwick1.active, #kwick1:hover {
background-position: 0 bottom;
}
#kwick2.active, #kwick2:hover{
background-position: -200px bottom;
}
#kwick3.active, #kwick3:hover {
background-position: -400px bottom;
}
#kwick4.active, #kwick4:hover {
background-position: -600px bottom;
}
#kwick1 a{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh70CNfj2YGDnsklNnXB_FtulKZWbkaOsALshff76YPmsycfZFMT8uSgNg2MCJpkq2sqcHMZ-7mTpb4KaMzwLd6GAdymJZYmRC3A-k4_O2zxGrxCv4l9MnK4RNlRoCDEpeRhaZX07CMY2tC/s1600/end.jpg);
background-repeat:no-repeat;
background-position: left 0px;
}
#kwick1 a:hover{
background-position: left -80px;
}
#kwick4 a{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh70CNfj2YGDnsklNnXB_FtulKZWbkaOsALshff76YPmsycfZFMT8uSgNg2MCJpkq2sqcHMZ-7mTpb4KaMzwLd6GAdymJZYmRC3A-k4_O2zxGrxCv4l9MnK4RNlRoCDEpeRhaZX07CMY2tC/s1600/end.jpg);
background-repeat:no-repeat;
background-position: right -40px;
}
#kwick4 a:hover{
background-position: right -120px;
}
list-style: none;
position: relative;
margin: 0;
padding: 0;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-hQo7XQtJPZC-FqOVAKwRNZ17wuxnbLZ3WXS0SdpN4z_Jbdmh6fomAX42X3Rbj_LR0hFqUK4TLkp_LH4Pt0fasD1ZEmHQHdKqruwcbPl_4w0s1dmbpbeBWqd4CujrWmfDFdqszxcr10T5/s1600/no_flicker.jpg); /*some browsers are to slow when aligning the menu items via jQuery and so the background shines through, this prevents this flickering*/
}
.kwicks li{
display: block;
overflow: hidden;
padding: 0;
cursor: pointer;
float: left;
width: 125px;
height: 40px;
margin-right: 0px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0x0mkTh7SrLMmS7nONJBH8Fyrvz0nSj6KuQ5V7Cgbm8vfsB85h7pyG1IqaQUFaHQ7GSSVLHlPe3FtH9UWCFf2j6UxcWVMF-kyGOW7-n6yN5k9yfOERUi9uCva5cjbUrchtmbAn05QzrbK/s1600/kwicks_sprite.jpg);
background-repeat:no-repeat;
}
.kwicks a{
display:block;
height:40px;
text-indent:-9999px;
outline:none;
}
#kwick1 {
background-position:0px 0px;
}
#kwick2 {
background-position:-200px 0px;
}
#kwick3 {
background-position:-400px 0px;
}
#kwick4 {
background-position:-600px 0px;
}
#kwick1.active, #kwick1:hover {
background-position: 0 bottom;
}
#kwick2.active, #kwick2:hover{
background-position: -200px bottom;
}
#kwick3.active, #kwick3:hover {
background-position: -400px bottom;
}
#kwick4.active, #kwick4:hover {
background-position: -600px bottom;
}
#kwick1 a{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh70CNfj2YGDnsklNnXB_FtulKZWbkaOsALshff76YPmsycfZFMT8uSgNg2MCJpkq2sqcHMZ-7mTpb4KaMzwLd6GAdymJZYmRC3A-k4_O2zxGrxCv4l9MnK4RNlRoCDEpeRhaZX07CMY2tC/s1600/end.jpg);
background-repeat:no-repeat;
background-position: left 0px;
}
#kwick1 a:hover{
background-position: left -80px;
}
#kwick4 a{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh70CNfj2YGDnsklNnXB_FtulKZWbkaOsALshff76YPmsycfZFMT8uSgNg2MCJpkq2sqcHMZ-7mTpb4KaMzwLd6GAdymJZYmRC3A-k4_O2zxGrxCv4l9MnK4RNlRoCDEpeRhaZX07CMY2tC/s1600/end.jpg);
background-repeat:no-repeat;
background-position: right -40px;
}
#kwick4 a:hover{
background-position: right -120px;
}
Step3. OK back to your blogs design page and click Add A Gadget > Choose Html/Javascript :
Step 3. Copy and Paste the following code into the Html/Javascript gadget ;
<ul class="kwicks">
<li id="kwick1"><a href="#">Home</a></li>
<li id="kwick2"><a href="#">Contact</a></li>
<li id="kwick3"><a href="#">Downloads</a></li>
<li id="kwick4"><a href="#">Search</a></li>
</ul>
<li id="kwick1"><a href="#">Home</a></li>
<li id="kwick2"><a href="#">Contact</a></li>
<li id="kwick3"><a href="#">Downloads</a></li>
<li id="kwick4"><a href="#">Search</a></li>
</ul>
-----------------------
0 التعليقات:
Post a Comment