Good art is a taste, good design is an opinion.


Come as guest, stay as family.
Board Index

Come as guest, stay as family.


You are not connected. Please login or register

Foto

[Solved] i want to replace my main menu navigation to animation menu but i dont know how



View previous topic View next topic Go down Message [Page 1 of 1]

1
Offline

  KiNGphx

avatar
Punbb Guru
Punbb Guru
Details:


Your Forum Address:
jangkeunsukmindanao.forums.fm

Forum Version:
PunBB

Powered by PunBB
Currently 0 users have thanked KiNGphx for this post:

2
Offline

  KiNGphx

avatar
Punbb Guru
Punbb Guru
buzzzz ? any one can help pls . Sad

Powered by PunBB
Currently 0 users have thanked KiNGphx for this post:

3
Offline

  KiNGphx

avatar
Punbb Guru
Punbb Guru
i think no body is online .. :(i only see 6 guest .. Sad

Powered by PunBB
Currently 0 users have thanked KiNGphx for this post:

4
Offline

  Shadow

avatar
Administrator
Administrator
Find in overall_header [ic]{GENERATED_NAV_BAR}[/ic]
Replace with
Code:
[panda=html]<span style="display:none;">{GENERATED_NAV_BAR}</span>

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

5
Offline

  KiNGphx

avatar
Punbb Guru
Punbb Guru
i mean i want this animation menu navigation to be my main menu . an d i i want to replace the old mean which is


This is my animation menu navigation codes and i dont know how to do ..

my HTML

CODE:
<!-- start menu --><div id="menu"><ul>

<li><a href="#">Community Blog</a></li>
<li><a href="#">Rules</a></li>
<li><a href="#">About Prince</a></li>
<li><a href="#">Movies & Drama</a></li>
<li><a href="#">Hit Musics</a></li>
<li><a href="#">Lyrics</a></li>

</ul></div><!-- end menu -->


MY CSS


CODE:
#menu { float: left; position: relative; top: 0; left: 0; overflow: hidden;}
#menu .colourful { display: block; position: absolute; background: #f0ad22; height: 38px; width: 85px; top: 4px; left: -100px; }
#menu ul { margin: 0; padding: 0; list-style: none; float: left; position: relative; top: 0; left: 0; z-index: 1; }
#menu li { float: left; margin: 0 1px 0 0; }
#menu a:link, #menu a:visited, #menu a:hover, #menu a:active { color: #000; text-align: center; display: block; border: solid; border-width: 4px 0 0; line-height: 40px; width: 85px; }
#menu li a:hover { text-decoration: none; color: #fff; text-shadow: 0 0 1px #999; }



JSCRIPT


CODE:
jQuery(document).ready(function($) {

/* create the span tht will be animated across the menu*/
/* declare our many variables for easy ref*/

var $span = $('<span class="colourful"></span>');
$span.insertBefore($("#menu ul"));

var $menu_link = $('#menu li a'),
$hovered = $('#menu a.hovered'),/**/
$hovered_pos = $hovered.position('#menu');/*position of hovered menu item*/

/* declare our many colors that can confuse a chameleon*/
var $colour_arr = ['#fbb92e','#f8d52f','#b4f62f','#54f7a8','#3ff7f3','#3a97fa','#6835f9','#d544f6','#f650ab'];

/*iterate through all menu links and apply colors to border top */
$menu_link.each(function(index){

$menu_link.eq(index).css('border-color',$colour_arr[index]);

});

/* all the magic happens here*/
function init () {

if($hovered_pos) {
$span.css('left',$hovered_pos);
var index = 0;
/* search for the selected menu item*/
for(i=0; i<$menu_link.length; i++) {
if($($menu_link[i]).hasClass('hovered')) {
index = i;
}
}
$span.css('background',$colour_arr[index]);

}
/*mouseenter funtion*/
$menu_link.each(
function( intIndex ){
$(this).on (
"mouseenter",
function(event){

var x = $(this).position('#menu');
x = x.left;

$span.css('background',$colour_arr[intIndex]);

$span.stop();
$span.animate({

left: x
},300);
}
);

}
);
/* mouseout function*/
$menu_link.each(
function( intIndex ){
$(this).on (
"mouseleave",
function(event){
$span.stop();
var x = -100;
if($hovered_pos) {
x = $hovered_pos;
var index = 0;
for(i=0; i<$menu_link.length; i++) {
if($($menu_link[i]).hasClass('hovered')) {
index = i;
}
}
$span.css('background',colour_arr[index]);

}

$span.animate({

left: x
},300);
}
);
}
);
}
/* call/ init our function*/
init();
});


tHANKS

Powered by PunBB
Currently 0 users have thanked KiNGphx for this post:

6
Offline

  Shadow

avatar
Administrator
Administrator
Look at my reply, it will hide your default navigation bar.

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

7
Offline

  KiNGphx

avatar
Punbb Guru
Punbb Guru
but nothings happen Sad still there . ...

Powered by PunBB
Currently 0 users have thanked KiNGphx for this post:

8
Offline

  KiNGphx

avatar
Punbb Guru
Punbb Guru
hai .. this is solved now i resolved the problem thanks shadow to your time:) horaaay !! Smile

Powered by PunBB
Currently 0 users have thanked KiNGphx for this post:

9
Offline

  Shadow

avatar
Administrator
Administrator
User banned for multiple breaking rules.

Solved & Locked.

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

10
Offline

  Sponsored content



Powered by PunBB
Currently 0 users have thanked Sponsored content for this post:

View previous topic View next topic Back to top Message [Page 1 of 1]


Topic URL's

URL
BBcode
HTML

Permissions in this forum:
You cannot reply to topics in this forum