JSFiddle - React, Tailwind, and code Playground

by mohammad alhor

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">
<body>  
<ul id="adajaxmenu" class="admenus">
    <li><a href='/'><i class='fa fa-home fa-lg'></i></a></li>    
<li>
<a href="#">منسدلة 1</a>
<ul>
<li><a href="http://arabic3professional.blogspot.com/search/label/%D9%82%D9%88%D8%A7%D9%84%D8%A8%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1%20%D8%AD%D8%B5%D8%B1%D9%8A%D8%A9">قوالب بلوجر</a></li>
<li><a href="http://arabic3professional.blogspot.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://g-vusion-2-ar.blogspot.com/search/label/الكل">قوالب خارجية</a></li>
<li><a href="http://g-vusion-2-ar.blogspot.com/search/label/الكل">مثال تجريبي</a></li>
<li><a href="http://g-vusion-2-ar.blogspot.com/search/label/الكل">مثال تجريبي</a></li>
</ul>
</li>
<li>
<a href="#">منسدلة 2</a>
<ul>
<li><a href="http://g-vusion-2-ar.blogspot.com/search/label/الكل">برامج</a></li>
<li><a href="http://g-vusion-2-ar.blogspot.com/search/label/الكل">العاب</a></li>
<li><a href="http://g-vusion-2-ar.blogspot.com/search/label/الكل">انمي</a></li>
<li><a href="http://arabic3professional.blogspot.com/search/label/%D8%AE%D9%84%D9%81%D9%8A%D8%A7%D8%AA">مثال تجريبي</a></li>
<li><a href="http://arabic3professional.blogspot.com/search/label/Android">مثال تجريبي</a></li>
</ul>
</li>
<li>
<a href="#">منسدلة 3</a>
<ul>
<li><a href="http://g-vusion-2-ar.blogspot.com/search/label/الكل">مثال </a></li>
<li><a href="http://arabic3professional.blogspot.com/search/label/انمي">مثال</a></li>
<li><a href="http://arabic3professional.blogspot.com/search/label/انمي">مثال</a></li>
<li><a href="http://arabic3professional.blogspot.com/search/label/انمي">مثال</a></li>
<li><a href="http://arabic3professional.blogspot.com/search/label/انمي">مثال</a></li>
</ul>
</li>
<li>
<li><a href="#">الارشيف</a></li>
<li><a href="#">اتصل بنا</a></li>
<li...

CSS

@import url(http://cdn.jsdelivr.net/darfonts/0.1/dinone-dintwo-sstext-ssthree/stylesheet.css);
@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700|Electrolize);
body {
text-align:right;
background-color:#f9f9f9;
font-size:16px
color:#444;
}
.post-body h2{
color:#f54325;
font-family:Electrolize,ge_ss_threeregular;
font-weight:400;
text-align:center;    
}
.post-body {
max-width:680px;
margin:20px auto;
border:10px solid #f0f0f0;
padding:15px 20px;
background-color:#fff;
color:#444;
font-family:Electrolize,ge_ss_threeregular;
font-size:13px;
}
.admenus * {
    text-align:right;
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:15px;
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:Electrolize,ge_ss_threeregular;
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 {
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:Electrolize,ge_ss_threeregular;
}

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...

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();
    }
  });
});