3 replies [Last post]
ghillcorner
ghillcorner's picture
Offline
newbie
Last seen: 2 years 44 weeks ago
Timezone: GMT+3
Joined: 2010-11-14
Posts: 4
Points: 6

I don’t know how to apply this to my site. Can anyone help me the step by step to apply this one.

Login
Social Network

Social network in Menu.png

ghillcorner
ghillcorner's picture
Offline
newbie
Last seen: 2 years 44 weeks ago
Timezone: GMT+3
Joined: 2010-11-14
Posts: 4
Points: 6

ghillcorner wrote: I don’t

ghillcorner wrote:

I don’t know how to apply this to my site. Can anyone help me the step by step to apply this one.

Login
Social Network

Social network in Menu.png

Here the preview of the template

kornel
kornel's picture
Offline
newbie
Last seen: 2 years 45 weeks ago
Timezone: GMT+1
Joined: 2012-01-16
Posts: 2
Points: 2

three super easy steps

three super easy steps :

  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html lang="pl" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <link rel='stylesheet' type='text/css' href='menu.css' />
    <!--[if gte IE 5]><![if lt IE 7]>
    <style type="text/css">
    .navmenu li
    {
      float: left;
      width: 8em;
    }
    </style>
    <![endif]><![endif]-->
    <style type="text/css" media="screen"> @import url("menuh.css"); </style>
    <!--[if lt IE 7]>
    <style type="text/css" media="screen">
    #menuh{float:none;}
    body{behavior:url(csshover.htc); font-size:100%;}
    #menuh ul li{float:left; width: 100%;}
    #menuh a{height:1%;font:bold 0.7em/1.4em arial, sans-serif;}
    </style>
    <![endif]-->
    </head>
    <body>
     
     
    		<div id="menuh-container">	
    			<div id="menuh">
     
    				<ul>
    					<li><a href="#" class="top_parent">Item 1</a>
    					<ul>
    						<li><a href="#">Sub 1:1</a></li>
    						<li><a href="#" class="parent">Sub 1:2</a>
    							<ul>
    							<li><a href="#">Sub 1:2:1</a></li>
    							<li><a href="#">Sub 1:2:2</a></li>
    							<li><a href="#">Sub 1:2:3</a></li>
    							<li><a href="#">Sub 1:2:4</a></li>
    							</ul>
    						</li>
    						<li><a href="#">Sub 1:3</a></li>
    						<li><a href="#" class="parent">Sub 1:4</a>
    							<ul>
    							<li><a href="#">Sub 1:4:1</a></li>
    							<li><a href="#">Sub 1:4:2</a></li>
    							<li><a href="#">Sub 1:4:3</a></li>
    							<li><a href="#">Sub 1:4:4</a></li>
    							</ul>
    						</li>
    						<li><a href="#" class="parent">Sub 1:5</a>
    							<ul>
    							<li><a href="#">Sub 1:5:1</a></li>
    							<li><a href="#">Sub 1:5:2</a></li>
    							<li><a href="#">Sub 1:5:3</a></li>
    							<li><a href="#">Sub 1:5:4</a></li>
    							<li><a href="#">Sub 1:5:5</a></li>
    							</ul>
    						</li>
    						<li><a href="#">Sub 1:6</a></li>
    					</ul>
    					</li>
    				</ul>
     
    				<ul>
    					<li><a href="#" class="top_parent">Item 2</a>
    					<ul>
    						<li><a href="#">Sub 2:1</a></li>
    						<li><a href="#" class="parent">Sub 2:2</a>
    							<ul>
    							<li><a href="#">Sub 2:2:1</a></li>
    							<li><a href="#">Sub 2:2:2</a></li>
    							</ul>
    						</li>
    						<li><a href="#">Sub 2:3</a></li>
    						<li><a href="#" class="parent">Sub 1:4</a>
    							<ul>
    							<li><a href="#">Sub 2:4:1</a></li>
    							<li><a href="#">Sub 2:4:2</a></li>
    							</ul>
    						</li>
    						<li><a href="#" class="parent">Sub 2:5</a>
    							<ul>
    							<li><a href="#">Sub 2:5:1</a></li>
    							<li><a href="#">Sub 2:5:2</a></li>
    							<li><a href="#">Sub 2:5:3</a></li>
    							<li><a href="#">Sub 2:5:4</a></li>
    							<li><a href="#">Sub 2:5:5</a></li>
    							</ul>
    						</li>
    					</ul>
    					</li>
    				</ul>
     
    				<ul>
    					<li><a href="#" class="top_parent">Item 3</a>
    					<ul>
    						<li><a href="#" class="parent">Sub 3:2</a>
    							<ul>
    							<li><a href="#">Sub 3:2:1</a></li>
    							<li><a href="#">Sub 3:2:2</a></li>
    							<li><a href="#">Sub 3:2:3</a></li>
    							<li><a href="#">Sub 3:2:4</a></li>
    							</ul>
    						</li>
    						<li><a href="#" class="parent">Sub 3:3</a>
    							<ul>
    							<li><a href="#">Sub 3:3:1</a></li>
    							<li><a href="#">Sub 3:3:2</a></li>
    							<li><a href="#">Sub 3:3:3</a></li>
    							<li><a href="#">Sub 3:3:4</a></li>
    							</ul>
    						</li>
    						<li><a href="#" class="parent">Sub 3:4</a>
    							<ul>
    							<li><a href="#">Sub 3:4:1</a></li>
    							<li><a href="#">Sub 3:4:2</a></li>
    							<li><a href="#">Sub 3:4:3</a></li>
    							<li><a href="#">Sub 3:4:4</a></li>
    							<li><a href="#">Sub 3:4:5</a></li>
    							</ul>
    						</li>
    						<li><a href="#">Sub 3:5</a></li>
    					</ul>
    					</li>
    				</ul>
     
    				<ul>
    					<li><a href="#" class="top_parent">Item 4</a>
    					<ul>
    						<li><a href="#">Sub 4:1</a></li>
    						<li><a href="#" class="parent">Sub 4:2</a>
    							<ul>
    							<li><a href="#">Sub 4:2:1</a></li>
    							<li><a href="#">Sub 4:2:2</a></li>
    							<li><a href="#">Sub 4:2:3</a></li>
    							<li><a href="#">Sub 4:2:4</a></li>
    							</ul>
    						</li>
    						<li><a href="#">Sub 4:3</a></li>
    						<li><a href="#" class="parent">Sub 4:4</a>
    							<ul>
    							<li><a href="#">Sub 4:4:1</a></li>
    							<li><a href="#">Sub 4:4:2</a></li>
    							<li><a href="#">Sub 4:4:3</a></li>
    							<li><a href="#">Sub 4:4:4</a></li>
    							<li><a href="#">Sub 4:4:5</a></li>
    							<li><a href="#">Sub 4:4:6</a></li>
    							<li><a href="#">Sub 4:4:7</a></li>
    							<li><a href="#">Sub 4:4:8</a></li>
    							<li><a href="#">Sub 4:4:9</a></li>
    							</ul>
    						</li>
    					</ul>
    					</li>
    				</ul>
    				<ul>
    					<li><a href="#" >Item 5</a>
    				</ul>
    			</div>
    		</div>
     
     </body>

    _____________________________________________________________

    copy that code and save it as "menu.html"

  2. #menuh-container
    	{
    	position: absolute;		
    	top: 1em;
    	left: 1em;
    	}
     
    #menuh
    	{
    	font-size: small;
    	font-family: arial, helvetica, sans-serif;
    	width:100%;
    	float:left;
    	margin:2em;
    	margin-top: 1em;
    	}
     
    #menuh a
    	{
    	text-align: center;
    	display:block;
    	border: 1px solid #0040FF;
    	white-space:nowrap;
    	margin:0;
    	padding: 0.3em;
    	}
     
    #menuh a:link, #menuh a:visited, #menuh a:active	/* menu at rest */
    	{
    	color: white;
    	background-color: #0040FF;		/* royal blue */
    	text-decoration:none;
    	}
     
    #menuh a:hover						/* menu on mouse-over  */
    	{
    	color: white;
    	background-color: #668CFF;	/* cornflowerblue */
    	text-decoration:none;
    	}	
     
    #menuh a.top_parent, #menuh a.top_parent:hover  /* attaches down-arrow to all top-parents */
    	{
    	background-image: url(navdown_white.gif);
    	background-position: right center;
    	background-repeat: no-repeat;
    	}
     
    #menuh a.parent, #menuh a.parent:hover 	/* attaches side-arrow to all parents */
    	{
    	background-image: url(nav_white.gif);
    	background-position: right center;
    	background-repeat: no-repeat;
    	}
     
    #menuh ul
    	{
    	list-style:none;
    	margin:0;
    	padding:0;
    	float:left;
    	width:9em;	/* width of all menu boxes */
    	/* NOTE: For adjustable menu boxes you can comment out the above width rule.
    	However, you will have to add padding in the "#menh a" rule so that the menu boxes
    	will have space on either side of the text -- try it */
    	}
     
    #menuh li
    	{
    	position:relative;
    	min-height: 1px;		/* Sophie Dennis contribution for IE7 */
    	vertical-align: bottom;		/* Sophie Dennis contribution for IE7 */
    	}
     
    #menuh ul ul
    	{
    	position:absolute;
    	z-index:500;
    	top:auto;
    	display:none;
    	padding: 1em;
    	margin:-1em 0 0 -1em;
    	}
     
    #menuh ul ul ul
    	{
    	top:0;
    	left:100%;
    	}
     
    div#menuh li:hover
    	{
    	cursor:pointer;
    	z-index:100;
    	}
     
    div#menuh li:hover ul ul,
    div#menuh li li:hover ul ul,
    div#menuh li li li:hover ul ul,
    div#menuh li li li li:hover ul ul
    {display:none;}
     
    div#menuh li:hover ul,
    div#menuh li li:hover ul,
    div#menuh li li li:hover ul,
    div#menuh li li li li:hover ul
    {display:block;}
     
    /* End CSS Drop Down Menu */

    __________________________________________

    copy the css above and save as "menu.css"

  3. <attach event="ondocumentready" handler="parseStylesheets" />
    <script>
    /**
     *	Whatever:hover - V1.41.050927 - hover & active
     *	------------------------------------------------------------
     *	(c) 2005 - Peter Nederlof
     *	Peterned - <a href="http://www.xs4all.nl/~peterned/
    " rel="nofollow">http://www.xs4all.nl/~peterned/
    </a> *	License  - <a href="http://creativecommons.org/licenses/LGPL/2.1/
    " rel="nofollow">http://creativecommons.org/licenses/LGPL/2.1/
    </a> *
     *	Whatever:hover is free software; you can redistribute it and/or
     *	modify it under the terms of the GNU Lesser General Public
     *	License as published by the Free Software Foundation; either
     *	version 2.1 of the License, or (at your option) any later version.
     *
     *	Whatever:hover is distributed in the hope that it will be useful,
     *	but WITHOUT ANY WARRANTY; without even the implied warranty of
     *	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
     *	Lesser General Public License for more details.
     *
     *	Credits and thanks to:
     *	Arnoud Berendsen, Martin Reurings, Robert Hanson
     *
     *	howto: body { behavior:url("csshover.htc"); }
     *	------------------------------------------------------------
     */
     
    var csshoverReg = /(^|\<img src="http://csscreator.com/sites/all/modules/smileys/packs/Roving/drunk.png" title="Drunk" alt="Drunk" class="smiley-content" />(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i,
    currentSheet, doc = window.document, hoverEvents = [], activators = {
    	onhover:{on:'onmouseover', off:'onmouseout'},
    	onactive:{on:'onmousedown', off:'onmouseup'}
    }
     
    function parseStylesheets() {
    	if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
    	window.attachEvent('onunload', unhookHoverEvents);
    	var sheets = doc.styleSheets, l = sheets.length;
    	for(var i=0; i<l; i++) 
    		parseStylesheet(sheets[i]);
    }
    	function parseStylesheet(sheet) {
    		if(sheet.imports) {
    			try {
    				var imports = sheet.imports, l = imports.length;
    				for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
    			} catch(securityException){}
    		}
     
    		try {
    			var rules = (currentSheet = sheet).rules, l = rules.length;
    			for(var j=0; j<l; j++) parseCSSRule(rules[j]);
    		} catch(securityException){}
    	}
     
    	function parseCSSRule(rule) {
    		var select = rule.selectorText, style = rule.style.cssText;
    		if(!csshoverReg.test(select) || !style) return;
     
    		var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
    		var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)<img src="http://csscreator.com/sites/all/modules/smileys/packs/Roving/angry.png" title="Angry" alt="Angry" class="smiley-content" />:[a-z]+)/gi, '.$2' + pseudo);
    		var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
    		var affected = select.replace(/:(hover|active).*$/, '');
    		var elements = getElementsBySelect(affected);
    		if(elements.length == <img src="http://csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" /> return;
     
    		currentSheet.addRule(newSelect, style);
    		for(var i=0; i<elements.length; i++)
    			new HoverElement(elements[i], className, activators[pseudo]);
    	}
     
    function HoverElement(node, className, events) {
    	if(!node.hovers) node.hovers = {};
    	if(node.hovers[className]) return;
    	node.hovers[className] = true;
    	hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
    	hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
    }
    	function hookHoverEvent(node, type, handler) {
    		node.attachEvent(type, handler);
    		hoverEvents[hoverEvents.length] = { 
    			node:node, type:type, handler:handler 
    		};
    	}
     
    	function unhookHoverEvents() {
    		for(var e,i=0; i<hoverEvents.length; i++) {
    			e = hoverEvents[i]; 
    			e.node.detachEvent(e.type, e.handler);
    		}
    	}
     
    function getElementsBySelect(rule) {
    	var parts, nodes = [doc];
    	parts = rule.split(' ');
    	for(var i=0; i<parts.length; i++) {
    		nodes = getSelectedNodes(parts[i], nodes);
    	}	return nodes;
    }
    	function getSelectedNodes(select, elements) {
    		var result, node, nodes = [];
    		var identify = (/\#([a-z0-9_-]+)/i).exec(select);
    		if(identify) return [doc.getElementById(identify[1])];
     
    		var classname = (/\.([a-z0-9_-]+)/i).exec(select);
    		var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
    		var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
    		for(var i=0; i<elements.length; i++) {
    			result = tagName? elements[i].all.tags(tagName):elements[i].all; 
    			for(var j=0; j<result.length; j++) {
    				node = result[j];
    				if(classReg && !classReg.test(node.className)) continue;
    				nodes[nodes.length] = node;
    			}
    		}	return nodes;
    	}
    </script>
     
     
    ____________________________
    _________________________________________________________
  4. copy that and save as menuh.htc

ghillcorner
ghillcorner's picture
Offline
newbie
Last seen: 2 years 44 weeks ago
Timezone: GMT+3
Joined: 2010-11-14
Posts: 4
Points: 6

Thank you vey much for your

Thank you vey much for your response. I follow to save the menu.css but still nothing happen.

Below is the link of the theme for your review.

I need a step by step procedure in how I can place the

Login
Social network

In the menubar. As per the owner of the site he only give this information which is difficult to follow since I’m a novice.

===========================================
Main Menu
THIS THEME OPTION WILL ONLY EXIST FOR WORDPRESS 2.9 AND EARLIER. FOR INSTALLS USING WORDPRESS 3.0 OR LATER YOU WILL CONTROL THE MAIN MENU FROM THE DEFAULT WORDPRESS ADMIN: "APPEARANCE > MENUS". VERSION EXCEPTIONS TO THE CONTENT BELOW HAVE BEEN NOTED WHERE NECESSARY.
This is where you will configure what does and does not appear in your main drop down menu. The items in the menu can be dragged into the position you want them to appear. To start, click the "Add new menu item" and it will create the item on the page. To make a sub-menu item, drag it beneath another menu item and slightly inset, visual layout will change on the page and you will immediately see the item nested below it's parent. (WP 2.9 installs only: You can also create separator items to add visual indicators on the menu for separation of links.)
NOTE: Be sure to always save your changes. Dragging items and deleting them will not take effect unless you click the save button after making the changes.
Specialty Links:
You can add several special types of links to tap into built in functionality of the theme.
Image icons for menu links - To add an icon to a menu item, you must do two things. First you need to have the image defined in your style sheet. For an example of this open the default style sheet "style-default.css" and find this section (line 377):
/* icons for menu items */

.mmLogin { background: url(...bullet-lock.png)...
.mmFeeds { background: url(...bullet-feed.png)...
.mmRSS { background: url(...icons/feed.png)...
.mmFacebook { background: url(...icons/facebook.png)...
.mmTwitter { background: url(.../icons/twitter2.png)...
Create your own entry by copying an existing one and giving it a custom class name. After you have this entry, add the new image you entered the path for to the location you specified. Next, from the menu manager, add a tag around your menu item title resembling the following:
Feeds
Where the "Feeds" text is your menu item text and "mmFeeds" class is the class of your custom menu icon class created in the style sheet.
Login pages, top slide and pop-ups
You can add links that activate the custom login pop-up or the slide open top area. Include the path to the page you want to open and append one of the following to choose the function.
Pop-up Login (#login): To create a link that opens the login pop-up, select the link option for "URL" and enter the custom URL path as "/wp-content/themes/parallelus-unite/login.html#login". This path should be the path to your theme folder if the above is not correct.
Slide Open Top (#topReveal): To create a link that opens the slide top, select the link option for "URL" and enter the custom URL path as "#topReveal".
Any content as pop-up (#popup): You can optionally enter any URL for a link into a WordPress text editor or the menu and and append "#popup" to the link and it will open in a pop-up. This can be an internal or external path, for example "http://www.google.com#popup" will load Google in a popup window inside your page. This can be great for linking to maps or other informational content.
=======================================================

<a href="http://themeforest.net/item/unite-wordpress-business-magazine-theme/full_screen_preview/90959" rel="nofollow">http://themeforest.net/item/unite-wordpress-business-magazine-theme/full_screen_preview/90959</a>