JSFiddle - React, Tailwind, and code Playground

by abdallha dagga

HTML

<script src="https://arlina-design.googlecode.com/svn/Ajaxmenu.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<ul id="adajaxmenu" class="admenus">
    <li><a href='/'><i class='fa fa-home fa-lg'></i></a></li>    
<li>
<a href="#">بلوجر</a>
<ul>
<li><a href="http://www.abu-iyad.com/search/label/%D8%A5%D8%B6%D8%A7%D9%81%D8%A7%D8%AA%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1">اضافات بلوجر</a></li>
<li><a href="http://www.abu-iyad.com/search/label/%D8%AF%D8%B1%D9%88%D8%B3%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1">دروس بلوجر</a></li>
<li><a href="http://www.abu-iyad.com/search/label/%D9%82%D9%88%D8%A7%D9%84%D8%A8%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1">قوالب بلوجر</a></li>
<li><a href="http://www.abu-iyad.com/search/label/%D9%85%D8%B3%D9%88%D8%AF%D8%A9%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1">مسودة بلوجر</a></li>
<li><a href="http://www.abu-iyad.com/search/label/%D8%AD%D8%B5%D8%B1%D9%8A%D8%A7%D8%AA">حصريات</a></li>
</ul>
</li>
<li>
<a href="#">أكواد</a>
<ul>
<li><a href="http://www.abu-iyad.com/search/label/css3">css3</a></li>
<li><a href="www.abu-iyad.com/search/label/JQuery">JQuery</a></li>
<li><a href="http://www.abu-iyad.com/search/label/%D8%A3%D8%B2%D8%B1%D8%A7%D8%B1">أزرار</a></li>
<li><a href="http://www.abu-iyad.com/search/label/%D8%A3%D9%8A%D9%82%D9%88%D9%86%D8%A7%D8%AA">أيقونات</a></li>
<li><a href="http://www.abu-iyad.com/search/label/%D9%85%D8%B5%D8%BA%D8%B1%D8%A7%D8%AA%20%D8%AA%D8%AF%D9%88%D9%8A%D9%86%D9%8A%D8%A9">مصغرات تدونية</a></li>
</ul>
</li>
<li>
<a href="#">الربح من الانترنت</a>
<ul>
<li><a href="http://www.abu-iyad.com/search/label/SEO">سيو</a></li>
<li><a href="http://www.abu-iyad.com/search/label/%D8%AC%D9%88%D8%AC%D9%84%20%D8%A3%D8%AF%D8%B3%D9%86%D8%B3">جوجل أدسنس</a></li>
<li><a href="http://www.abu-iyad.com/search/label/%D9%81%D9%8A%D8%B3%D8%A8%D9%88%D9%83">فيس بوك</a></li>
<li><a href="http://www.abu-iyad.com/search/label/%D9%8A%D9%88%D8%AA%D9%8A%D9%88%D8%A8">يوتيوب</a></li>
<li><a...

CSS

.admenus * {
margin:0;
padding:0;
}

ul.admenus {
list-style:none;
line-height:1;
overflow:visible!important;
}

ul.admenus:after {
margin:0;
padding:0;
content:' ';
display:block;
height:0px;
clear:both;
}

ul.admenus li {
float:right;
display:inline;
position:relative;
font-size:14px;
font-weight:400;
text-transform:uppercase;
}

ul.admenus li a {
display:block;
line-height:50px;
padding:0 20px;
text-decoration:none;
color:#2c2c2c;
font-family:'Oswald';
font-size:13px;
font-weight:400;
transition:all 0.3s ease-in-out;
}

ul.admenus li a:hover,ul.admenus li a.hoverover {
background:#f54325;
color:#fff;
}

ul.admenus ul {
position:absolute;
display:none;
top:100%;
border:1px solid #ccc;
}

ul.admenus li:hover > ul {
display:block;
}

ul.admenus ul li {
text-align: right;
z-index:72;
float:none;
min-width:160px;
background:#f5f5f5;
text-shadow:none;
}

ul.admenus ul li a {
text-transform:none;
font-weight:normal;
color:#aaa;
font-family:'Arial';
}

ul.admenus ul li a:hover,ul.adajaxmenu ul li a.hover {
background:#f54325;
}

ul.admenus ul ul {
display:none;
right:100%;
top:0;
}

ul.adajaxmenu li div.submenu {
position:absolute;
width:600px;
z-index:90;
right:0;
top:100%;
overflow:hidden;
min-height:150px;
background:#f0f0f0;
-moz-transform:translate(0,30px);
-webkit-transform:translate(0,30px);
-o-transform:translate(0,30px);
transform:translate(0,30px);
transform-origin:50% 0;
visibility:hidden;
opacity:0;
color:#929292;  
box-shadow:0 10px 7px -7px rgba(0,0,0,0.1);    
transition:all 0.3s ease-in-out;
}

ul.adajaxmenu li:hover div.submenu {
visibility:visible;
opacity:1;
-moz-transform:translate(0,0);
-webkit-transform:translate(0,0);
-o-transform:translate(0,0);
transform:translate(0,0);
}

ul.adajaxmenu ul ,ul.adajaxmenu ul li {
display:block!important;
border:0 none!important;
margin:0!important;
padding:0!important;
}

ul.adajaxmenu ul li {
background:none!important;
float:none!important;
}

ul.adajaxmenu ul.verticlemenu...

JavaScript

jQuery(document).ready(function($) {
 $('#adajaxmenu').ajaxBloggerMenu({
  numPosts : 4, // Number of Posts to show
  defaultImg : 'http://url-to-image.com/default-image.jpeg' // Default thumbnail Image
 });
});

$(function(){
  $('.searchblog').submit(function(e){
    if($('.search-form .searchbar').val().length==0){
       $('.search-form .search-alert').fadeIn().css('display','inline-block');
      e.preventDefault();
    }
  });
});