قائمة متجاوبة رائعة بلوجر

مرحبا بكم من جديد على مدونة تقني الانترنت بعد غياب شهرين وهاته حقا مدة طويلة جدا لاكني ساعوض عليكم انشاء الله. واليوم احضرنا لكم اضافة من اضافات بلوجر وهي اضافة رائعة لقائمة متجاوبة ومتوافقة مع جميع الاجهزة والقوالب وتأتي في اي مكان تريده انت اضافة رائعة انصح بها اي شخص .

طريقة الاضافة

اذهب للقالب ثم تحريراضف الكود التالي فوق </head>

<style>
@font-face {
 font-family: Electrolize,ge_ss_threeregular;
 src: url('../fonts/icomoon.eot');
 src: url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
  url('../fonts/icomoon.woff') format('woff'),
  url('../fonts/icomoon.ttf') format('truetype'),
  url('../fonts/icomoon.svg#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;
}
/* Windows Chrome ugly fix http://stackoverflow.com/questions/13674808/chrome-svg-font-rendering-breaks-layout/14345363#14345363 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 @font-face {
  font-family: 'Electrolize,ge_ss_threeregular';
  src: url('../fonts/icomoon.svg#icomoon') format('svg');
 };
}
.icon-team, .icon-blog, .icon-home, .icon-portfolio, .icon-services, .icon-contact, .icon-menu {
 font-family: 'Electrolize,ge_ss_threeregular';
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;
 -webkit-font-smoothing: antialiased;
}
.icon-team:before {
 content: "\e000";
}
.icon-blog:before {
 content: "\e001";
}
.icon-home:before {
 content: "\e002";
}
.icon-portfolio:before {
 content: "\e003";
}
.icon-services:before {
 content: "\e004";
}
.icon-contact:before {
 content: "\e005";
}
.icon-menu:before {
 content: "\f0c9";
}
a, li {
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Global CSS that are applied for all screen sizes */
.nav ul {
 max-width: 1240px;
 margin: 0;
 padding: 0;
 list-style: none;
 font-size: 1.5em;
 font-weight: 300;
}
.nav li span {
 display: block;
}
.nav a {
 display: block;
 color: rgba(249, 249, 249, .9);
 text-decoration: none;
 -webkit-transition: color .5s, background .5s, height .5s;
 -moz-transition: color .5s, background .5s, height .5s;
 -o-transition: color .5s, background .5s, height .5s;
 -ms-transition: color .5s, background .5s, height .5s;
 transition: color .5s, background .5s, height .5s;
}
.nav i{
 /* Make the font smoother for Chrome */
 -webkit-transform: translate3d(0, 0, 0);
 -moz-transform: translate3d(0, 0, 0);
 -o-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
/* Remove the blue Webkit background when element is tapped */
a, button {
 -webkit-tap-highlight-color: rgba(0,0,0,0);
}
/* Hover effect for the whole navigation to make the hovered item stand out */
.no-touch .nav ul:hover a {
 color: rgba(249, 249, 249, .5);
}
.no-touch .nav ul:hover a:hover {
 color: rgba(249, 249, 249, 0.99);
}
/* Adding some background color to the different menu items */
.nav li:nth-child(6n+1) {
 background: rgb(208, 101, 3);
}
.nav li:nth-child(6n+2) {
 background: rgb(233, 147, 26);
}
.nav li:nth-child(6n+3) {
 background: rgb(22, 145, 190);
}
.nav li:nth-child(6n+4) {
 background: rgb(22, 107, 162);
}
.nav li:nth-child(6n+5) {
 background: rgb(27, 54, 71);
}
.nav li:nth-child(6n+6) {
 background: rgb(21, 40, 54);
}
/* For screen bigger than 800px */
@media (min-width: 50em) {
 /* Transforms the list into a horizontal navigation */
 .nav li {
  float: right;
  width: 16.66666666666667%;
  text-align: center;
  -webkit-transition: border .5s;
  -moz-transition: border .5s;
  -o-transition: border .5s;
  -ms-transition: border .5s;
  transition: border .5s;
 }
 .nav a {
  display: block;
  width: auto;
 }
 /* hover, focused and active effects that add a little colored border to the different items */
 .no-touch .nav li:nth-child(6n+1) a:hover,
 .no-touch .nav li:nth-child(6n+1) a:active,
 .no-touch .nav li:nth-child(6n+1) a:focus {
  border-bottom: 4px solid rgb(174, 78, 1);
 }
 .no-touch .nav li:nth-child(6n+2) a:hover,
 .no-touch .nav li:nth-child(6n+2) a:active,
 .no-touch .nav li:nth-child(6n+2) a:focus {
  border-bottom: 4px solid rgb(191, 117, 20);
 }
 .no-touch .nav li:nth-child(6n+3) a:hover,
 .no-touch .nav li:nth-child(6n+3) a:active,
 .no-touch .nav li:nth-child(6n+3) a:focus {
  border-bottom: 4px solid rgb(12, 110, 149);
 }
 .no-touch .nav li:nth-child(6n+4) a:hover,
 .no-touch .nav li:nth-child(6n+4) a:active,
 .no-touch .nav li:nth-child(6n+4) a:focus {
  border-bottom: 4px solid rgb(10, 75, 117);
 }
 .no-touch .nav li:nth-child(6n+5) a:hover,
 .no-touch .nav li:nth-child(6n+5) a:active,
 .no-touch .nav li:nth-child(6n+5) a:focus {
  border-bottom: 4px solid rgb(16, 34, 44);
 }
 .no-touch .nav li:nth-child(6n+6) a:hover,
 .no-touch .nav li:nth-child(6n+6) a:active,
 .no-touch .nav li:nth-child(6n+6) a:focus {
  border-bottom: 4px solid rgb(9, 18, 25);
 }
 /* Placing the icon */

 .icon {
  padding-top: 1.4em;
 }
 .icon + span {
  margin-top: 2.1em;
  -webkit-transition: margin .5s;
  -moz-transition: margin .5s;
  -o-transition: margin .5s;
  -ms-transition: margin .5s;
  transition: margin .5s;
 }
 /* Animating the height of the element*/
 .nav a {
  height: 9em;
 }
 .no-touch .nav a:hover ,
 .nav a:active ,
 .nav a:focus {
  height: 10em;
 }
 /* Making the text follow the height animation */
 .no-touch .nav a:hover .icon + span {
  margin-top: 3.2em;
  -webkit-transition: margin .5s;
  -moz-transition: margin .5s;
  -o-transition: margin .5s;
  -ms-transition: margin .5s;
  transition: margin .5s;
 }
 /* Positioning the icons and preparing for the animation*/
 .nav i {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  padding: 0.4em;
  border-radius: 50%;
  font-size: 1.8em;
  box-shadow: 0 0 0 30px transparent;
  background: rgba(255,255,255,0.1);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: box-shadow .6s ease-in-out;
  -moz-transition: box-shadow .6s ease-in-out;
  -o-transition: box-shadow .6s ease-in-out;
  -ms-transition: box-shadow .6s ease-in-out;
  transition: box-shadow .6s ease-in-out;
 }

 /* Animate the box-shadow to create the effect */
 .no-touch .nav a:hover i,
 .no-touch .nav a:active i,
 .no-touch .nav a:focus i {
  box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
  -webkit-transition: box-shadow .4s ease-in-out;
  -moz-transition: box-shadow .4s ease-in-out;
  -o-transition: box-shadow .4s ease-in-out;
  -ms-transition: box-shadow .4s ease-in-out;
  transition: box-shadow .4s ease-in-out;
 }

}
@media (min-width: 50em) and (max-width: 61.250em) {
 /* Size and font adjustments to make it fit into the screen*/
 .nav ul {
  font-size: 1.2em;
 }
}
/* The "tablet" and "mobile" version */
@media (max-width: 49.938em) {

 /* Instead of adding a border, we transition the background color */
 .no-touch .nav ul li:nth-child(6n+1) a:hover,
 .no-touch .nav ul li:nth-child(6n+1) a:active,
 .no-touch .nav ul li:nth-child(6n+1) a:focus {
  background: rgb(227, 119, 20);
 }
 .no-touch .nav li:nth-child(6n+2) a:hover,
 .no-touch .nav li:nth-child(6n+2) a:active,
 .no-touch .nav li:nth-child(6n+2) a:focus {
  background: rgb(245, 160, 41);
 }
 .no-touch .nav li:nth-child(6n+3) a:hover,
 .no-touch .nav li:nth-child(6n+3) a:active,
 .no-touch .nav li:nth-child(6n+3) a:focus {
  background: rgb(44, 168, 219);
 }
 .no-touch .nav li:nth-child(6n+4) a:hover,
 .no-touch .nav li:nth-child(6n+4) a:active,
 .no-touch .nav li:nth-child(6n+4) a:focus {
  background: rgb(31, 120, 176);
 }
 .no-touch .nav li:nth-child(6n+5) a:hover,
 .no-touch .nav li:nth-child(6n+5) a:active,
 .no-touch .nav li:nth-child(6n+5) a:focus {
  background: rgb(39, 70, 90);
 }
 .no-touch .nav li:nth-child(6n+6) a:hover,
 .no-touch .nav li:nth-child(6n+6) a:active,
 .no-touch .nav li:nth-child(6n+6) a:focus {
  background: rgb(32, 54, 68);
 }
 .nav ul li {
  -webkit-transition: background 0.5s;
  -moz-transition: background 0.5s;
  -o-transition: background 0.5s;
  -ms-transition: background 0.5s;
  transition: background 0.5s;
 }
}
/* CSS specific to the 2x3 columns version */
@media (min-width:32.5em) and (max-width: 49.938em) {

 /* Creating the 2 column layout using floating elements once again */
 .nav li {
  display: block;
  float: right;
  width: 50%;
 }

 /* Adding some padding to make the elements look nicer*/
 .nav a {
  padding: 0.8em;
 }
 /* Displaying the icons on the left, and the text on the right side using inlin-block*/
 .nav li span,
 .nav li span.icon {
  display: inline-block;
 }
 .nav li span.icon {
  width: 50%;
 }
 .nav li .icon + span {
  font-size: 1em;
 }
 .icon + span {
  position: relative;
  top: -0.2em;
 }
 /* Adaptating to the icons to animate the size and border of the rounded background in a more discreet way */
 .nav li i {
  display: inline-block;
  padding: 8% 9%;
  border: 4px solid transparent;
  border-radius: 50%;
  font-size: 1.5em;
  background: rgba(255,255,255,0.1);
  -webkit-transition: border .5s;
  -moz-transition: border .5s;
  -o-transition: border .5s;
  -ms-transition: border .5s;
  transition: border .5s;
 }
 /* Transition effect on the border color */
 .no-touch .nav li:hover i,
 .no-touch .nav li:active i,
 .no-touch .nav li:focus i {
  border: 4px solid rgba(255,255,255,0.1);
 }

}
/* Adapting the font size and width for smaller screns*/
@media (min-width: 32.5em) and (max-width: 38.688em) {

 .nav li span.icon {
  width: 50%;
 }
 .nav li .icon + span {
  font-size: 0.9em;
 }
}
/* Styling the toggle menu link and hiding it */
.nav .navtoogle{
 display: none;
 width: 100%;
 padding: 0.5em 0.5em 0.8em;
 font-family: Electrolize,ge_ss_threeregular;
 font-weight: normal;
 text-align: right;
 color: rgb(7, 16, 15);
 font-size: 1.2em;
 background: none;
 border: none;
 border-bottom: 4px solid rgb(221, 221, 221);
 cursor: pointer;
}
.navtoogle i{
 z-index:-1;
}
.icon-menu {
 position: relative;
 top: 3px;
 line-height: 0;
 font-size: 1.6em;
}
@media (max-width: 32.438em) {
 /* Unhiding the styled menu link */
 .nav .navtoogle{
  margin: 0;
  display: block;
 }

 /* Animating the height of the navigation when the button is clicked */

 /* When JavaScript is disabled, we hide the menu */
 .no-js .nav ul {
  max-height: 30em;
  overflow: hidden;
 }

 /* When JavaScript is enabled, we hide the menu */
 .js .nav ul {
  max-height: 0em;
  overflow: hidden;
 }

 /* Displaying the menu when the user has clicked on the button*/
 .js .nav .active + ul {
  max-height: 30em;
  overflow: hidden;
  -webkit-transition: max-height .4s;
  -moz-transition: max-height .4s;
  -o-transition: max-height .4s;
  -ms-transition: max-height .4s;
  transition: max-height .4s;
 }
 /* Adapting the layout of the menu for smaller screens : icon on the left and text on the right*/

 .nav li span {
  display: inline-block;
  height: 100%;
 }
 .nav a {
  padding: 0.5em;
 }

 .icon + span {
  margin-left: 1em;
  font-size: 0.8em;
 }

 /* Adding a left border of 8 px with a different color for each menu item*/
 .nav li:nth-child(6n+1) {
  border-left: 8px solid rgb(174, 78, 1);
 }
 .nav li:nth-child(6n+2) {
  border-left: 8px solid rgb(191, 117, 20);
 }
 .nav li:nth-child(6n+3) {
  border-left: 8px solid rgb(13, 111, 150);
 }
 .nav li:nth-child(6n+4) {
  border-left: 8px solid rgb(10, 75, 117);
 }
 .nav li:nth-child(6n+5) {
  border-left: 8px solid rgb(16, 34, 44);
 }
 .nav li:nth-child(6n+6) {
  border-left: 8px solid rgb(9, 18, 25);
 }
 /* make the nav bigger on touch screens */
 .touch .nav a {
  padding: 0.8em;
 }
}
/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@font-face {
 font-family: 'Electrolize,ge_ss_threeregular';
 src:url('../fonts/codropsicons/codropsicons.eot');
 src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
  url('../fonts/codropsicons/codropsicons.woff') format('woff'),
  url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
  url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
 font-weight: normal;
 font-style: normal;
}
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 15px; padding: 0; margin: 0;}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
body {
 font-family:Electrolize,ge_ss_threeregular;
 color: #89867e;
 background: #f9f9f9;
}
a {
 color: #333;
 text-decoration: none;
}
a:hover {
 color: #fff;
}
.main,
.container > header {
 width: 100%;
 margin: 0 auto;
 padding: 2em;
}
.main {
 max-width: 82.667em; min-height: 40em;}
.container > header {
 text-align: center;
 font-size: 16px;
 padding: 4em 2em 3em;
 background: rgba(0,0,0,0.01);
}
.container > header h1 {
 font-size: 2.625em;
 line-height: 1.3;
 margin: 0;
 font-weight: 300;
}
.container > header span {
 display: block;
 font-size: 60%;
 color: #ceccc6;
 padding: 0 0 0.6em 0.1em;
}
/* Header Style */
.codrops-top {
 background: #fff;
 background: rgba(255, 255, 255, 0.4);
 text-transform: uppercase;
 position: relative;
 width: 100%;
 font-size: 0.7em;
 line-height: 2.2;
}
.codrops-top a {
 padding: 0 1em;
 letter-spacing: 0.1em;
 color: #888;
 display: inline-block;
}
.codrops-top a:hover {
 background: rgba(255,255,255,0.9);
}
.codrops-top span.right {
 float: right;
}
.codrops-top span.right a {
 float: right;
 display: block;
}
.codrops-icon:before {
 font-family: Electrolize,ge_ss_threeregular;
 margin: 0 4px;
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;
 -webkit-font-smoothing: antialiased;
}
.codrops-icon-drop:before {
 content: "\e001";
}
.codrops-icon-prev:before {
 content: "\e004";
}
.codrops-icon-archive:before {
 content: "\e002";
}
.codrops-icon-next:before {
 content: "\e000";
}
.codrops-icon-about:before {
 content: "\e003";
}
@media screen and (max-width: 25em) {
 .codrops-icon span {
  display: none;
 }
 .container > header {
  font-size: 75%;
 }
}
/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@font-face {
 font-family: Electrolize,ge_ss_threeregular;
 src:url('../fonts/codropsicons/codropsicons.eot');
 src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
  url('../fonts/codropsicons/codropsicons.woff') format('woff'),
  url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
  url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
 font-weight: normal;
 font-style: normal;
}
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 15px; padding: 0; margin: 0;}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
body {
 font-family: Electrolize,ge_ss_threeregular;
 color: #89867e;
 background: #f9f9f9;
}
a {
 color: #333;
 text-decoration: none;
}
a:hover {
 color: #fff;
}
.main,
.container > header {
 width: 100%;
 margin: 0 auto;
 padding: 2em;
}
.main {
 max-width: 82.667em; min-height: 40em;}
.container > header {
 text-align: center;
 font-size: 16px;
 padding: 4em 2em 3em;
 background: rgba(0,0,0,0.01);
}
.container > header h1 {
 font-size: 2.625em;
 line-height: 1.3;
 margin: 0;
 font-weight: 300;
}
.container > header span {
 display: block;
 font-size: 60%;
 color: #ceccc6;
 padding: 0 0 0.6em 0.1em;
}
/* Header Style */
.codrops-top {
 background: #fff;
 background: rgba(255, 255, 255, 0.4);
 text-transform: uppercase;
 position: relative;
 width: 100%;
 font-size: 0.7em;
 line-height: 2.2;
}
.codrops-top a {
 padding: 0 1em;
 letter-spacing: 0.1em;
 color: #888;
 display: inline-block;
}
.codrops-top a:hover {
 background: rgba(255,255,255,0.9);
}
.codrops-top span.right {
 float: right;
}
.codrops-top span.right a {
 float: right
 display: block;
}
.codrops-icon:before {
 font-family: Electrolize,ge_ss_threeregular;
 margin: 0 4px;
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;
 -webkit-font-smoothing: antialiased;
}
.codrops-icon-drop:before {
 content: "\e001";
}
.codrops-icon-prev:before {
 content: "\e004";
}
.codrops-icon-archive:before {
 content: "\e002";
}
.codrops-icon-next:before {
 content: "\e000";
}
.codrops-icon-about:before {
 content: "\e003";
}
@media screen and (max-width: 25em) {
 .codrops-icon span {
  display: none;
 }
 .container > header {
  font-size: 75%;
 }
}
</style>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
  <script src="http://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/js/modernizr.custom.js"></script>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700|Electrolize' rel='stylesheet' type='text/css'/>
<link href='https://ar1web-com.googlecode.com/svn/trunk/font-ge_dinar.css' rel='stylesheet'/>

1. واضف ايضا الكود التالي فوق </body>

<script>
   //  The function to change the class
   var changeClass = function (r,className1,className2) {
    var regex = new RegExp("(?:^|\\s+)" + className1 + "(?:\\s+|$)");
    if( regex.test(r.className) ) {
     r.className = r.className.replace(regex,' '+className2+' ');
       }
       else{
     r.className = r.className.replace(new RegExp("(?:^|\\s+)" + className2 + "(?:\\s+|$)"),' '+className1+' ');
       }
       return r.className;
   };
   //  Creating our button in JS for smaller screens
   var menuElements = document.getElementById('menu');
   menuElements.insertAdjacentHTML('afterBegin','<button type="button" id="menutoggle" class="navtoogle" aria-hidden="true"><i aria-hidden="true" class="icon-menu"> </i> Menu</button>');
   //  Toggle the class on click to show / hide the menu
   document.getElementById('menutoggle').onclick = function() {
    changeClass(this, 'navtoogle active', 'navtoogle');
   }
   // http://tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/comment-page-2/#comment-438918
   document.onclick = function(e) {
    var mobileButton = document.getElementById('menutoggle'),
     buttonStyle =  mobileButton.currentStyle ? mobileButton.currentStyle.display : getComputedStyle(mobileButton, null).display;
    if(buttonStyle === 'block' && e.target !== mobileButton && new RegExp(' ' + 'active' + ' ').test(' ' + mobileButton.className + ' ')) {
     changeClass(mobileButton, 'navtoogle active', 'navtoogle');
    }
   }
  </script>

واخير يمكنك اضافة الكود التالي اينما تشاء مثلا تحت <body> وحسب مايناسبك

<div class="main clearfix">
    <nav id="menu" class="nav">  
     <ul>
      <li>
       <a href="#">
        <span class="icon">
         <i aria-hidden="true" class="fa fa-home"></i>
        </span>
        <span>الرئسية</span>
       </a>
      </li>
      <li>
       <a href="#">
        <span class="icon">
         <i aria-hidden="true" class="fa fa-archive"></i>
        </span>
        <span>خدماتنا</span>
       </a>
      </li>
      <li>
       <a href="#">
        <span class="icon">
         <i aria-hidden="true" class="fa fa-paint-brush"></i>
        </span>
        <span>قوالب بلوجر</span>
       </a>
      </li>
      <li>
       <a href="#">
        <span class="icon">
         <i aria-hidden="true" class="fa fa-users"></i>
        </span>
        <span>المدونة</span>
       </a>
      </li>
      <li>
       <a href="#">
        <span class="icon">
         <i aria-hidden="true" class="fa fa-briefcase"></i>
        </span>
        <span>اضافات بلوجر</span>
       </a>
      </li>
      <li>
       <a href="#">
        <span class="icon">
         <i aria-hidden="true" class="fa fa-user"></i>
        </span>
        <span>اتصل بنا</span>
       </a>
      </li>
     </ul>
    </nav>
   </div>

المصدر مدونة ويب نايت

شارك الموضوع لتعم الفائدة

.

.