Thursday, 15 September 2016
CSS JAVA MENU MULTI COL.OR


---------------------------------------------------------------------------------------------------------------
CSS JAVA MENU MULTI COL.OR WITH GENERATE HTML PAGE BUTTON
---------------------------------------------------------------------------------------------------------------
<font size="6">Type some HTML here:</font></b></p>
<FORM name="K">
<P style="margin-top: 0; margin-bottom: 0">
<TEXTAREA NAME="ta1" rows="15" cols="50">
<html>
<head>
<link rel='stylesheet' id='wt-style-css' href='http://urdu.neonetwork.pk/wp-content/themes/wt_becks/style.css?ver=4.1.13' type='text/css' media='all' />
<style id='wt-style-inline-css' type='text/css'>
<!-- #main-menu ul li a{font-size: 28px
!important;}.simply-scroll .simply-scroll-list li{font-size: 16px
!important;font-weight: bold !important;}.simply-scroll
.simply-scroll-clip{height: 50px !important;}#header .top{height: 64px
!important;}#simpleweather-widget{float:left !important;margin-left:
615px;}.entry-cat{display:none;}.menu-section{background:#fff
!important;}.feat-slider .post-info{background: #000 !Important;opacity:
0.9;}.widget-title h4{background: #74C653;color: #fff !important;font-size:
22px;padding:10px;font-weight: 600 !important;}.section-title
h4{float:right;background: #74C653;color: #fff !important;font-size:
22px;padding:10px;font-weight: 600
!important;}#wellthemes_last_tweet_widget-2{padding-top: 10px;padding-bottom:
10px;border: 4px solid #74C653;}.rss{float:left !important;}.carousel-section
.carousel-nav{float:left !important;}#header .top
.social{margin-top:-22px;}.aps-icon-link {margin-right: 10px
!important;}.cat8-bg{background:} .cat12-bg{background:} .cat17-bg{background:}
.cat5-bg{background:} .cat10-bg{background:} .cat9-bg{background:}
.cat3-bg{background:} .cat18-bg{background:} .cat14-bg{background:}
.cat16-bg{background:} .cat19-bg{background:} .cat2-bg{background:}
.cat7-bg{background:} .cat6-bg{background:} -->
</style>
<link rel='stylesheet' id='wt-font-awesome-css' href='http://urdu.neonetwork.pk/wp-content/themes/wt_becks/css/font-awesome/css/font-awesome.min.css?ver=4.1.13' type='text/css' media='all' />
<script type='text/javascript' src='http://urdu.neonetwork.pk/wp-includes/js/jquery/jquery.js?ver=1.11.1'></script>
</head>
<body class="single single-post postid-46088
single-format-standard">
<div class="menu-section clearfix">
<nav id="main-menu">
<ul id="menu-main-menu" class="menu"><li id="menu-item-25939" class="menu-item menu-item-type-taxonomy menu-item-object-category
menu-item-25939"><a href="http://urdu.neonetwork.pk/?cat=136">A</a></li>
<li id="menu-item-26171" class="menu-item menu-item-type-post_type menu-item-object-page
menu-item-26171"><a href="http://urdu.neonetwork.pk/?page_id=26165">B</a></li>
<li id="menu-item-162" class="menu-item menu-item-type-taxonomy menu-item-object-category
menu-item-162"><a href="http://urdu.neonetwork.pk/?cat=14">C</a></li>
<li id="menu-item-2267" class="menu-item menu-item-type-custom menu-item-object-custom
menu-item-2267"><a href="http://videos.neonetwork.pk/">D</a></li>
<li id="menu-item-8" class="menu-item menu-item-type-taxonomy menu-item-object-category
menu-item-8"><a href="http://urdu.neonetwork.pk/?cat=8">E</a></li>
<li id="menu-item-13" class="menu-item menu-item-type-taxonomy menu-item-object-category
menu-item-13"><a href="http://urdu.neonetwork.pk/?cat=9">F</a></li>
<li id="menu-item-128" class="menu-item menu-item-type-taxonomy menu-item-object-category
menu-item-128"><a href="http://urdu.neonetwork.pk/?cat=13">G</a></li>
<li id="menu-item-9" class="menu-item menu-item-type-taxonomy menu-item-object-category
menu-item-9"><a href="http://urdu.neonetwork.pk/?cat=7">H</a></li>
<li id="menu-item-11" class="menu-item menu-item-type-taxonomy menu-item-object-category
current-post-ancestor current-menu-parent current-post-parent
menu-item-11"><a href="http://urdu.neonetwork.pk/?cat=5">I</a></li>
<li id="menu-item-16" class="menu-item menu-item-type-taxonomy menu-item-object-category
menu-item-16"><a href="http://urdu.neonetwork.pk/?cat=6">????</a></li>
<li id="menu-item-2231" class="menu-item menu-item-type-custom menu-item-object-custom
menu-item-2231"><a href="http://videos.neonetwork.pk/">??????</a></li>
<li id="menu-item-15" class="menu-item menu-item-type-taxonomy menu-item-object-category
menu-item-15"><a href="http://urdu.neonetwork.pk/?cat=2">???????</a></li>
<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page
menu-item-17"><a href="http://urdu.neonetwork.pk/">???? ???</a></li>
</ul> </nav>
</div>
</div>
</header>
<!-- <script type='text/javascript'
src='http://urdu.neonetwork.pk/wp-content/themes/wt_becks/js/jquery.slicknav.min.js?ver=4.1.13'></script>
-->
<script type='text/javascript'>
/*!
SlickNav Responsive Mobile Menu
(c) 2013 Josh Cope
licensed under GPL and MIT
*/
(function(e,t,n){var r={label:"MENU",duplicate:true,duration:200,easingOpen:"swing",easingClose:"swing",closedSymbol:"►",openedSymbol:"▼",prependTo:"body",parentTag:"a",closeOnClick:false,allowParentLinks:false},i="slicknav",s="slicknav";e.fn[i]=function(n){return this.each(function(){function h(e){var t=e.data("menu");if(!t){t={};t.arrow=e.children("."+s+"_arrow");t.ul=e.next("ul");t.parent=e.parent();e.data("menu",t)}if(e.parent().hasClass(s+"_collapsed")){t.arrow.html(o.openedSymbol);t.parent.removeClass(s+"_collapsed");p(t.ul,true)}else{t.arrow.html(o.closedSymbol);t.parent.addClass(s+"_collapsed");p(t.ul,true)}}function p(e,t){var n=v(e);var r=0;if(t)r=o.duration;if(e.hasClass(s+"_hidden")){e.removeClass(s+"_hidden");e.slideDown(r,o.easingOpen);e.attr("aria-hidden","false");n.attr("tabindex","0");d(e,false)}else{e.addClass(s+"_hidden");e.slideUp(r,o.easingClose,function(){e.attr("aria-hidden","true");n.attr("tabindex","-1");d(e,true);e.hide()})}}function d(t,n){var r=t.children("li").children("ul").not("."+s+"_hidden");if(!n){r.each(function(){var t=e(this);t.attr("aria-hidden","false");var r=v(t);r.attr("tabindex","0");d(t,n)})}else{r.each(function(){var t=e(this);t.attr("aria-hidden","true");var r=v(t);r.attr("tabindex","-1");d(t,n)})}}function v(e){var t=e.data("menu");if(!t){t={};var n=e.children("li");var r=n.children("a");t.links=r.add(n.children("."+s+"_item"));e.data("menu",t)}return t.links}function m(t){if(!t){e("."+s+"_item, ."+s+"_btn").css("outline","none")}else{e("."+s+"_item, ."+s+"_btn").css("outline","")}}var i=e(this);var o=e.extend({},r,n);if(o.duplicate){var u=i.clone();u.removeAttr("id");u.find("*").each(function(t,n){e(n).removeAttr("id")})}else var u=i;var a=s+"_icon";if(o.label==""){a+=" "+s+"_no-text"}if(o.parentTag=="a"){o.parentTag='a href="#"'}u.attr("class",s+"_nav");var f=e('<div class="'+s+'_menu"></div>');var l=e("<"+o.parentTag+'
aria-haspopup="true" tabindex="0" class="'+s+'_btn"><span
class="'+s+'_menutxt">'+o.label+'</span><span
class="'+a+'"><span
class="'+s+'_icon-bar"></span><span
class="'+s+'_icon-bar"></span><span
class="'+s+'_icon-bar"></span></span></a>');e(f).append(l);e(o.prependTo).prepend(f);f.append(u);var c=u.find("li");e(c).each(function(){var t=e(this);data={};data.children=t.children("ul").attr("role","menu");t.data("menu",data);if(data.children.length>0){var n=t.contents();var r=[];e(n).each(function(){if(!e(this).is("ul")){r.push(this)}else{return false}});var i=e(r).wrapAll("<"+o.parentTag+'
role="menuitem" aria-haspopup="true"
tabindex="-1" class="'+s+'_item"/>').parent();t.addClass(s+"_collapsed");t.addClass(s+"_parent");e(r).last().after('<span
class="'+s+'_arrow">'+o.closedSymbol+"</span>")}else if(t.children().length==0){t.addClass(s+"_txtnode")}t.children("a").attr("role","menuitem").click(function(){if(o.closeOnClick)e(l).click()})});e(c).each(function(){var t=e(this).data("menu");p(t.children,false)});p(u,false);u.attr("role","menu");e(t).mousedown(function(){m(false)});e(t).keyup(function(){m(true)});e(l).click(function(e){e.preventDefault();p(u,true)});u.on("click","."+s+"_item",function(t){t.preventDefault();h(e(this))});e(l).keydown(function(e){var t=e||event;if(t.keyCode==13){e.preventDefault();p(u,true)}});u.on("keydown","."+s+"_item",function(t){var n=t||event;if(n.keyCode==13){t.preventDefault();h(e(t.target))}});if(o.allowParentLinks){e("."+s+"_item a").click(function(e){e.stopImmediatePropagation()})}})}})(jQuery,document,window)
</script>
<script type='text/javascript' src='http://urdu.neonetwork.pk/wp-content/themes/wt_becks/js/custom.js?ver=4.1.13'></script>
</div>
</body>
</html>
</TEXTAREA>
</FORM>
<BUTTON TYPE="button" NAME="test5" ONCLICK="r=window.open();r.document.write(document.forms.K.ta1.value)">
Generate Page
</BUTTON>
</p>
----------------------------------------------------------------------------------------------------------------CLICK DROP DOWN MENU WITH JS
http://www.w3schools.com/howto/howto_js_dropdown.asp
----------------------------------------------------------------------------------------------------------------
<font size="6">Type some HTML here:</font></b></p>
<FORM name="K">
<P style="margin-top: 0; margin-bottom: 0">
<TEXTAREA NAME="ta1" rows="15" cols="50"><html lang="en-US">
<head>
<title>How To Create a
Dropdown Menu With CSS and JavaScript</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px 26px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color:
#f1f1f1}
.dropdown2:hover .dropdown-content {
display: block;
}
@media only screen and (max-width: 400px) {
.dropbtn {
width: 100%;
}
.dropdown-content {
width: 100px;
}
}
.show {display:block;}
</style>
</head>
<body>
<h1>How TO - Clickable
Dropdown</h1>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Click Me</button>
<div id="myDropdown" class="dropdown-content" style="text-align:left;">
<a href="javascript:void(0)">Link 1</a>
<a href="javascript:void(0)">Link 2</a>
<a href="javascript:void(0)">Link 3</a>
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown
content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function myFunction2()
{
document.getElementById("myDropdown2").style.right = "0";
document.getElementById("myDropdown2").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of
it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown =
dropdowns[d];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}}}}
</script>
</body>
</html>
</TEXTAREA>
</FORM>
<BUTTON TYPE="button" NAME="test5" ONCLICK="r=window.open();r.document.write(document.forms.K.ta1.value)">
Generate Page
</BUTTON>
</p>
Related movie you might like to see :

SHOPIFY THEME SLIDER EDIT

INPUT BUTTON VALUE SWAP

CSS SYNTAX HIGHLIGHT CHANGE IN NOT...

TEXT COMPARE OR DUPLI TEXT FINDER

RELATED POST WIDGET LIST WITHOUT TH...

BOOLEAN MATCHING GAME JAVASCRIPT

GET BUTTON ID AFTER CLICK IN JAVA S...

JAVA SCRIPT LOOP

DYNAMIC VIEWS BLOGGER TEMPLATE

QUIZY MEMORY CARD GAME

CTX STYLE

IMAGE SRC ARRAY IN JAVA SCRIPT

QUIZ ACTIVITY MAKER

MEMORY GAME WITH UPPER HIDDEN CARD

BUTTON PADDING CHANGE HEIGHT WIDTH

SHOPIFY FANCY BOX

BASIC ELEVATE ZOOM PLUS

ELEVATE ZOOM JAVA SCRIPT WITH ONE I...
?
+
X
Recommended for you
Loading..
Related Post for CSS JAVA MENU MULTI COL.OR
CSS SLIDER WITHOUT JS ----------------------------------------------------------------------------------------------------------- ReadMore: http://cssslider.com/non-jquery-carousel-7.html SAVE …
BUTTON CHANGE INTO DROPDOWN MENU ----------------------------------------------------------------------------------------------------------------- DIV TAG DROPDOWN MENU https://www.youtube.com/watc…
AUTO CSS JS SLIDER WITH ARROW BULLET ------------------------------------------------------------------------------------------------------- BX SLIDER CODE: READ MORE: BX SLIDER IN BLOGGER TEMPALTE - You…
IMAGE SRC ARRAY IN JAVA SCRIPT --------------------------------------------------------------------------------------------------------------- CODE:1 http://fbgadgets.blogspot.co.uk/2017/07/java-script-arra…
BUTTON PADDING CHANGE HEIGHT WIDTH ------------------------------------------------------------------------------------------------------------ PADDING BUTTON CHANGE INTO WIDTH AND HEIGHTEMOJI SITEShttps://yayte…
Labels:
H,
HTML TUTORIALS
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment
Click to see the code!
To insert emoticon you must added at least one space before the code.