Доброе время суток ВСЕМ!
Вступление: Есть идея, над которой я очень долго сидел: она из себя представляет следующее---
эскизный вариант:
Вкратце: есть статичное горизонтальное меню.
Ниже собираюсь вставить flash ролик из картинок.
Под роликом располагаться три кнопки (Проектирование, Дизайн и Архитекторам и Дизайнерам).
После перехода с главной странице, кнопки и flash сворачиваться и выпадает вертикальное меню и сам контент (это мы наблюдаем на правой картинке).
С горизонтальным меню я пока разобрался (не до конца - но к этому я вернусь позже).
С Позицией flash ролика я тоже разобрался: прописал ей все необходимые стили через суффикс модуля, следующем образом:
/*меню флешь начало*/
.module_flash{
margin:0px;
padding:0px;
width:959px;
height:395px;
background:url(../images/flash_bot.png) bottom no-repeat;
}
/*меню флешь конец*/
тут я добавил просто тени снизу, сама картинка будет запускаться через модуль в Joomla (админке). - уже проверил при включенной картинке тень появляется, если отключить то все сворачивается без следа.
Сейчас возникла проблема с кнопками.
Вот что я хочу от кнопок:
В неактивном положение кнопка, серого цвета, при наведение курсора на картинку и на текст - переход в цветной режим и при нажатие на текст либо на картинку перейди уже на другую страницу сайта.
Вот тут то и возникла проблема.
Я тачал создавать отдельный модуль (но я уже понимаю то что я сделал это полная фигня) - с модулем мне нужна помощь. и я не знаю как связать текст с картинкой. чтобы при наведении на текст курсором картинка тоже становилась цветной.
вот то код который я сделал для модуля:
function modChrome_userblok($module, &$params, &$attribs)
{ ?>
<div class="module<?php echo $params->get('moduleclass_sfx'); ?>">
<div>
<div>
<div>
<h3><?php echo $module->title; ?></h3>
</div>
<?php echo $module->content; ?>
</div>
</div>
</div>
<?php
}
а тут я начал прописывать фон кнопки и вставил саму картинку(это уже CSS для суффикса модуля):
.module_userblok1{
margin:0px;
padding:0px;
height:180px;
width:310px;
background:url(../images/user_blok.png) no-repeat;
}
.module_userblok1 div{
margin:0px;
padding:0px;
height:88px;
width:310px;
background:url(../images/proektirovanie_knopka_4b.jpg) top no-repeat;
}
.module_userblok1 div div{
margin:0px;
padding:0px;
Заранее СПАСИБО!Ниже прикладываю весь код который уже написан:
index.php
<?php defined( '_JEXEC' ) or die( 'Restricted access' ); ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/sk_shablon/css/template.css"/>
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/sk_shablon/css/menu.css"/>
<!--[if ite EI 6]>
<script src="js/DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix("#blok_1, #logo");
</script>
<![endif]-->
</head>
<body>
<div id="conteyner">
<div id="glav_blok">
<div id="blok_top">
<div id="blok_1">
<div id="top">
<div id="top_left">
<div id="logo"></div>
</div>
<div id="top_right"></div>
</div>
<div id="top_menu_blok">
<?php if($this->countModules('top_menu')) : ?>
<jdoc:include type="modules" name="top_menu" style="topmenu" />
<?php endif; ?>
</div>
<div id="flash_top">
<?php if($this->countModules('flash_top')) : ?>
<jdoc:include type="modules" name="flash_top" style="topmenu" />
<?php endif; ?>
</div>
<div id="content_blok"></div>
<div id="user_blok">
<div id="user_blok1">
<?php if($this->countModules('user_1')) : ?>
<jdoc:include type="modules" name="user_1" style="userblok" />
<?php endif; ?>
</div>
</div>
<div id="news_blok"></div>
</div>
</div>
<div id="blok_bot">
<div id="blok_2">
<div id="usermenu_blok">
<div id="usermenu_1">1</div>
<div id="usermenu_2">2</div>
<div id="usermenu_3">3</div>
<div id="usermenu_4">4</div>
</div>
<div id="spisok_blok"></div>
</div>
</div>
</div>
</div>
</body>
</html>
template.css:
html, body
{
margin:0px;
padding:0px;
height:100%;
background:url(../images/fon_back.jpg) no-repeat;
}
#conteyner
{
margin:0 auto;
padding:0px;
width:1020px;
min-height:100%;
background:#666;
}
#glav_blok{
margin:0px;
padding:0px;
width:1020px;
background:#FF0000;
}
#blok_top
{
margin:0 auto;
padding:0px;
width:1020px;
background:url(../images/blok_1fon.png) repeat;
}
#blok_1
{
margin:0 auto;
padding:0px;
width:959px;
}
#top
{
margin:0px;
padding:0px;
height:90px;
}
#top_left
{
margin:0px;
padding:0px;
height:90px;
width:20px;
background:#006633;
float:left;
}
*html #top_left{
margin:10px;
padding:0px;
}
*+html #top_left{
margin:10px;
padding:0px;
}
#top_right
{
margin:0px;
padding:0px;
height:90px;
width:20px;
background:#009;
float:right;
}
#logo
{
margin:0px;
margin-top:10px;
padding:0px;
width:161px;
height:52px;
background:url(../images/logo.png) no-repeat;
}
#top_menu_blok{
margin:0px;
padding:0px;
height:34px;
/*background:url(../images/menu_top_fon.jpg) repeat-x;*/
}
#flash_top{
margin:0px;
padding:0px;
margin-top:15px;
/*width:959px;
height:380px;*/
}
#content_blok{
margin:0px;
padding:0px;
}
#user_blok{
margin:0px;
padding:0px;
}
#user_blok1{
margin:0px;
padding:0px;
}
#news_blok{
margin:0px;
padding:5px;
}
#blok_bot{
margin:0px;
padding:0px;
}
#blok_2{
margin:0 auto;
padding:0px;
width:959px;
}
#usermenu_blok{
margin:0px;
margin-top:20px;
padding:0px;
height:225px;
background: #0C3;
}
#usermenu_1{
margin:0px;
padding:0px;
width:239px;
height:225px;
background:#000099;
float:left;
}
#usermenu_2{
margin:0px;
padding:0px;
width:239px;
height:225px;
background:#0F6;
float:left;
}
#usermenu_3{
margin:0px;
padding:0px;
width:239px;
height:225px;
background:#F00;
float:left;
}
#usermenu_4{
margin:0px;
padding:0px;
width:239px;
height:225px;
background:#90F;
float:right;
}
#spisok_blok{
margin:0px;
padding:0px;
height:37px;
background:url(../images/spisok_blok.png);
}
menu.css
/*горизонтальное меню*/
.module_menutop{
margin:0px;
padding:0px;
height:34px;
width:959px;
}
.module_menutop div{
margin:0px;
padding:0px;
}
.module_menutop ul{
margin:0px;
padding:0px;
width:959px;
height:34px;
background:url(../images/menu_top_fon.jpg);
background-repeat:repeat-x;
list-style:none;
float:left;
}
.module_menutop ul li{
margin:0 auto;
padding:0px;
float:left;
}
.module_menutop ul a{
display:block;
padding-left:15px;
padding-left:15px;
padding-top:13px;
font-size:14px;
line-height:20px;
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
color:#3b3b3b;
}
.module_menutop ul a:hover{
display:block;
padding-left:15px;
padding-left:15px;
padding-top:16px;
font-size:14px;
background:url(../images/menu_top_fon_hover.jpg) repeat-x;
line-height:20px;
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
color:#41a4d2;
}
/*горизонтальное меню - конец*/
/*меню флешь начало*/
.module_flash{
margin:0px;
padding:0px;
width:959px;
height:395px;
background:url(../images/flash_bot.png) bottom no-repeat;
}
/*меню флешь конец*/
/*начало кнопки*/
.module_userblok1{
margin:0px;
padding:0px;
height:180px;
width:310px;
background:url(../images/user_blok.png) no-repeat;
}
.module_userblok1 div{
margin:0px;
padding:0px;
height:88px;
width:310px;
background:url(../images/proektirovanie_knopka_4b.jpg) top no-repeat;
}
.module_userblok1 div div{
margin:0px;
padding:0px;
и modules.php
<?php
// no direct access
defined('_JEXEC') or die('Restricted access');
function modChrome_mymenu($module, &$params, &$attribs)
{ ?>
<div class="module<?php echo $params->get('moduleclass_sfx'); ?>">
<div>
<h3><?php echo $module->title; ?></h3>
<div>
<?php echo $module->content; ?>
</div>
</div>
</div>
<?php
}
function modChrome_topmenu($module, &$params, &$attribs)
{ ?>
<div class="module<?php echo $params->get('moduleclass_sfx'); ?>">
<div>
<?php echo $module->content; ?>
</div>
</div>
<?php
}
function modChrome_userblok($module, &$params, &$attribs)
{ ?>
<div class="module<?php echo $params->get('moduleclass_sfx'); ?>">
<div>
<div>
<div>
<h3><?php echo $module->title; ?></h3>
</div>
<?php echo $module->content; ?>
</div>
</div>
</div>
<?php
}
?>
А также последний вариант дизайна (еще не доконца доработан, решил по ходу дела сделать) и то что уже сверстал:
То что есть:
Прошу не обращать вниманеи на арфографию и граматику, с утра сижу а уже 4 ночи, голова болит и хочу спать. За это извеняюсь.
Жду от Вас, помощи и панимания! Еще раз спасибо!
28.12.2020, 17:37:52