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 :

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

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...
?
+
X
Recommended for you
Loading..
Related Post for CSS JAVA MENU MULTI COL.OR
IMAGE SRC ARRAY IN JAVA SCRIPT --------------------------------------------------------------------------------------------------------------- CODE:1 http://fbgadgets.blogspot.co.uk/2017/07/java-script-arra…
BUTTON CHANGE INTO DROPDOWN MENU ----------------------------------------------------------------------------------------------------------------- DIV TAG DROPDOWN MENU https://www.youtube.com/watc…
NOTE PAD ++ SYNTAX HIGHLIGHTER FOR BLOGGER POST --------------------------------------------------------------------------------------------------------------------- NOTE PAD ++ SYNTAX HIGHLIGHTER FOR BLOGGER POST https://…
IMAGE UPLOAD WITH JAVA WITH PHP CODE ------------------------------------------------------------------------------------------------------ CREATE FOLDER AND CREATE AND SAVE FILES ONE BY ONE IN THIS FOLDER &nb…
NOTEPAD++ REMOVE UNWANTED LINES ------------------------------------------------------------------------------------------------------------------------------------------------------------ STEP NO : 1 1- CT…
QUIZY MEMORY CARD GAME ---------------------------------------------------------------------------------------------------------- READ MORE: http://memorygame.quizyplugin.com https://holifestival.de/…
IMAGE UPLOAD WITH JAVA WITHOUT PHP CODE ------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE IN NOTE PAD AND SAVE IN HTML FILE -----------…
SCREEN TO GIF ------------------------------------------------------------------------------------------------------------------ Read More: 3:30 PDF HTML IMAGE CONVERTER HD…
MEMORY GAME WITH UPPER HIDDEN CARD -------------------------------------------------------------------------------------------------------------- Other Games http://www.internet4classrooms.com/skill_builders/s…
CSS SYNTAX HIGHLIGHT CHANGE IN NOTEPAD++ SYNTAX HIGHLIGHTER ------------------------------------------------------------------------------------------------------------------- SYNTAX HIGHLIGHTER LINKS -----------------------------------…
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.