Home / Обсуждения / Script менюшки (css-dock-menu)

Script менюшки (css-dock-menu)

История такая…
нашел классную менюшку сделанную с помощью query. Хочу ее привинтить к WP. На обычном html скрипт отлично работает. А вот при переносе в header.php что то не то(((( в сборке идет папка с картинками, папка со скриптами и файл со стилями…

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; UTF-8" />
<title>CSS Mac Dock</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>

<!–[if lt IE 7]>
<style type="text/css">
div, img { behavior: url(iepngfix.htc) }
</style>
<![endif]–>

<link href="stylemenu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="#"><img src="imagesmenu/home.png" alt="home" /><span>Главная</span></a>
<a class="dock-item" href="#"><img src="imagesmenu/email.png" alt="contact" /><span>Контакты</span></a>
<a class="dock-item" href="#"><img src="imagesmenu/portfolio.png" alt="portfolio" /><span>Портфолио</span></a>
<a class="dock-item" href="#"><img src="imagesmenu/music.png" alt="music" /><span>Музыка</span></a>
<a class="dock-item" href="#"><img src="imagesmenu/video.png" alt="video" /><span>Видео</span></a>
<a class="dock-item" href="#"><img src="imagesmenu/history.png" alt="history" /><span>История</span></a>
<a class="dock-item" href="#"><img src="imagesmenu/calendar.png" alt="calendar" /><span>Календарь</span></a>
<a class="dock-item" href="#"><img src="imagesmenu/rss.png" alt="rss" /><span>Новости</span></a>
</div>
</div>
<script type="text/javascript">

$(document).ready(
function()
{
$(‘#dock’).Fisheye(
{
maxWidth: 50,
items: ‘a’,
itemsText: ‘span’,
container: ‘.dock-container’,
itemWidth: 50,
proximity: 90,
halign : ‘center’
}
)
}
);

</script>
</body>
</html>

если я правильно понимаю, нужно было прописывать абсолютный адресс к скриптам:
<script type="text/javascript" src="<?php bloginfo(‘template_url’); ?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo(‘template_url’); ?>/js/interface.js"></script>

Вообщим долго уже мучаюсь… мб вы мне сможете помочь)

Тут взял сам плагин: [url]www.ndesign-studio.com/blog/design/css-dock-menu/[/url]
Так должно работать: http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.html

Мб есть другой способ реализовать подобное меню в WP…

0
Просмотров: 3831
Коментарии: 11
15.04.2009 13:07
Ответить
0

Вроде все правильно делаете (с абсолютным путем). Посмотрите сгенерированный html, все ли там верно сгенерилось. Если сайт в сети, дайте ссылку.

AlexPTS
15.04.2009 14:43
Ответить
0

Хорошо смотрится

Zews
15.04.2009 15:57
Ответить
0
Вроде все правильно делаете (с абсолютным путем). Посмотрите сгенерированный html, все ли там верно сгенерилось. Если сайт в сети, дайте ссылку.

[url]www.playart.kz[/url] – вот… делаю сайт фотографу… макет более менее отрисовал… еще много весят картинки… я хотел сделать посередине такую менюшку… как видите там отображается непонятная ссылка сама на себя(((
мб мне вам создать аккаунт и вы сами глянете? был бы очень благодарен)

Zews
15.04.2009 16:00
Ответить
0
Хорошо смотрится

Смотрится классно….)) а вот реализовать не легко( впрочем все возможно)))

15.04.2009 17:15
Ответить
0

Для начала "причешите" html, проверив валидатором. Два раза head – грубая ошибка. Потом разберитесь с jQuery – два раза грузить нет смысла. Я бы рекомендовал для загрузки скрипта использовать специальную функцию, поместив в functions.php Темы следующий код
if (!is_admin()) {
wp_enqueue_script( ‘interface’, get_template_directory_uri().’/js/interface.js’,array(‘jquery’),’1.0′);
}

Кстати, менюха в стиле "Леопард" должна быть в самом низу экрана, иначе макинтошники не поймут 🙂

Zews
16.04.2009 01:17
Ответить
0
Для начала "причешите" html, проверив валидатором. Два раза head - грубая ошибка. Потом разберитесь с jQuery - два раза грузить нет смысла. Я бы рекомендовал для загрузки скрипта использовать специальную функцию, поместив в functions.php Темы следующий код
if (!is_admin()) {
   wp_enqueue_script( 'interface', get_template_directory_uri().'/js/interface.js',array('jquery'),'1.0');
}

Кстати, менюха в стиле "Леопард" должна быть в самом низу экрана, иначе макинтошники не поймут :)

Хочу посередине)))) на маковском сайте такая же менюха) сегодня попробоую все снова сверстать…
ох уж мне эти менюхи)))))

AlexPTS
16.04.2009 13:58
Ответить
0

>>Потом разберитесь с jQuery – два раза грузить нет смысла

Проверьте прежде скачанный пример с jQuery 1.2.6, т.к. jQuery 1.1.2 может нормально работать, а jQuery 1.2.6 нет

Zews
16.04.2009 18:52
Ответить
0
Для начала "причешите" html, проверив валидатором. Два раза head - грубая ошибка. Потом разберитесь с jQuery - два раза грузить нет смысла. Я бы рекомендовал для загрузки скрипта использовать специальную функцию, поместив в functions.php Темы следующий код
if (!is_admin()) {
   wp_enqueue_script( 'interface', get_template_directory_uri().'/js/interface.js',array('jquery'),'1.0');
}

Кстати, менюха в стиле "Леопард" должна быть в самом низу экрана, иначе макинтошники не поймут :)

Можете помочь связать код… есть ли возможность сделать так, чтобы не конфликтовали части кода…:

Текст шапки:

<head>
<meta http-equiv="Content-Type" content="<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>" />

<title><?php bloginfo(‘name’); ?> <?php if ( is_single() ) { ?> &raquo; Архив блога <?php } ?> <?php wp_title(); ?></title>

<link rel="stylesheet" href="<?php bloginfo(‘stylesheet_url’); ?>" type="text/css" media="screen" />
<!–[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo(‘stylesheet_directory’); ?>/ie7.css" />
<![endif]–>
<!–[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo(‘stylesheet_directory’); ?>/ie6.css" />
<![endif]–>
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo(‘name’); ?> RSS Feed" href="<?php bloginfo(‘rss2_url’); ?>" />
<link rel="pingback" href="<?php bloginfo(‘pingback_url’); ?>" />
<?php wp_head(); ?>
</head>
<body>
<div id="page">

<div id="header">
<div id="headerimg">
<h1><a href="<?php echo get_option(‘home’); ?>/"><?php bloginfo(‘name’); ?></a></h1>
<div class="description"><?php bloginfo(‘description’); ?></div>
</div>

<hr />
</div>

Текст скрипта:

<!DOCTYPE html PUBLIC "">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; UTF-8" />
<title>CSS Mac Dock</title>
<script type="text/javascript" src="<?php bloginfo(‘template_url’); ?>js/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo(‘template_url’); ?>js/interface.js"></script>

<!–[if lt IE 7]>
<style type="text/css">
div, img { behavior: url(iepngfix.htc) }
</style>
<![endif]–>

<link href="stylemenu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="#"><img src="http://playart.kz/wp-content/themes/OneClick/imagesmenu/home.png" alt="home" /><span>Главная</span></a>
<a class="dock-item" href="#"><img src="http://playart.kz/wp-content/themes/OneClick/imagesmenu/email.png" alt="contact" /><span>Контакты</span></a>
<a class="dock-item" href="#"><img src="http://playart.kz/wp-content/themes/OneClick/imagesmenu/portfolio.png" alt="portfolio" /><span>Портфолио</span></a>
<a class="dock-item" href="#"><img src="http://playart.kz/wp-content/themes/OneClick/imagesmenu/music.png" alt="music" /><span>Музыка</span></a>
<a class="dock-item" href="#"><img src="http://playart.kz/wp-content/themes/OneClick/imagesmenu/video.png" alt="video" /><span>Видео</span></a>
<a class="dock-item" href="#"><img src="http://playart.kz/wp-content/themes/OneClick/imagesmenu/history.png" alt="history" /><span>История</span></a>
<a class="dock-item" href="#"><img src="http://playart.kz/wp-content/themes/OneClick/imagesmenu/calendar.png" alt="calendar" /><span>Календарь</span></a>
<a class="dock-item" href="#"><img src="http://playart.kz/wp-content/themes/OneClick/imagesmenu/rss.png" alt="rss" /><span>Новости</span></a>
</div>
</div>
<script type="text/javascript">

$(document).ready(
function()
{
$(‘#dock’).Fisheye(
{
maxWidth: 50,
items: ‘a’,
itemsText: ‘span’,
container: ‘.dock-container’,
itemWidth: 50,
proximity: 90,
halign : ‘center’
}
)
}
);

</script>
</body>
</html>

16.04.2009 19:42
Ответить
0

Где-то так.

<head>
<meta http-equiv="Content-Type" content="<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>" />

<title><?php bloginfo(‘name’); ?> <?php if ( is_single() ) { ?> &raquo; Архив блога <?php } ?> <?php wp_title(); ?></title>

<link rel="stylesheet" href="<?php bloginfo(‘stylesheet_url’); ?>" type="text/css" media="screen" />
<link href="<?php bloginfo(‘stylesheet_directory’); ?>/stylemenu.css" rel="stylesheet" type="text/css" />
<!–[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo(‘stylesheet_directory’); ?>/ie7.css" />
<style type="text/css">
div, img { behavior: url(iepngfix.htc) }
</style>
<![endif]–>
<!–[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo(‘stylesheet_directory’); ?>/ie6.css" />
<![endif]–>
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo(‘name’); ?> RSS Feed" href="<?php bloginfo(‘rss2_url’); ?>" />
<link rel="pingback" href="<?php bloginfo(‘pingback_url’); ?>" />

<script type="text/javascript" src="<?php bloginfo(‘template_url’); ?>js/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo(‘template_url’); ?>js/interface.js"></script>

<?php wp_head(); ?>
</head>
<body>
<div id="page">

<div id="header">
<div id="headerimg">
<h1><a href="<?php echo get_option(‘home’); ?>/"><?php bloginfo(‘name’); ?></a></h1>
<div class="description"><?php bloginfo(‘description’); ?></div>
</div>

<hr />
</div>

<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="#"><img src="http://playart.kz/wp-content/themes/OneClick/imagesmenu/home.png" alt="home" /><span>Главная</span></a>
<a class="dock-item" href="#"><img src="http://playart.kz/wp-content/themes/OneClick/imagesmenu/email.png" alt="contact" /><span>Контакты</span></a>
<a class="dock-item" href="#"><img src="http://playart.kz/wp-content/themes/OneClick/imagesmenu/portfolio.png" alt="portfolio" /><span>Портфолио</span></a>
<a class="dock-item" href="#"><img src="http://playart.kz/wp-content/themes/OneClick/imagesmenu/music.png" alt="music" /><span>Музыка</span></a>
<a class="dock-item" href="#"><img src="http://playart.kz/wp-content/themes/OneClick/imagesmenu/video.png" alt="video" /><span>Видео</span></a>
<a class="dock-item" href="#"><img src="http://playart.kz/wp-content/themes/OneClick/imagesmenu/history.png" alt="history" /><span>История</span></a>
<a class="dock-item" href="#"><img src="http://playart.kz/wp-content/themes/OneClick/imagesmenu/calendar.png" alt="calendar" /><span>Календарь</span></a>
<a class="dock-item" href="#"><img src="http://playart.kz/wp-content/themes/OneClick/imagesmenu/rss.png" alt="rss" /><span>Новости</span></a>
</div>
</div>
<script type="text/javascript">

$(document).ready(
function()
{
$(‘#dock’).Fisheye(
{
maxWidth: 50,
items: ‘a’,
itemsText: ‘span’,
container: ‘.dock-container’,
itemWidth: 50,
proximity: 90,
halign : ‘center’
}
)
}
);

</script>
</body>
</html>

Zews
17.04.2009 03:46
Ответить
0
Где-то так.

<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Архив блога <?php } ?> <?php wp_title(); ?></title>
....................

Точно также пробовал((( в этом случае идет восприятие не тех стилей. т.е. теряется задний фон сайта.

А идея такая… если создать отдельный php файл и там весь скрипт прописать. а в шапке просто потом подключить как модуль, возможно такой вариант осуществить?

17.04.2009 06:04
Ответить
0

Можно всё. Но это всё зависит от знаний и навыков.

Свежее

Anonymous
Отправить
Ответ на: