XOOPS
新闻
新闻索引 新闻 模块 开发者 修改 主题 存档 提交新闻
  1. 发布者
  2. XOOPS
  3. 开发者新闻
  4. 教程 - 构建CSS 3主菜单
开发者新闻

教程 - 构建CSS 3主菜单

kaotik  13-Aug-2010 15:50 8736 阅读量   1评论 
历史
我是50/60年代工业设计的忠实粉丝，这个教程受到了那个时期看到的海报的启发。


步骤1 creating the background
打开您最喜欢的图像程序并创建一个类似于图像2的png文件。它的大小应为310px x 175px。大小很重要，因为我们将会使用坐标来放置菜单项。
Resized Image 图像2



步骤2 blank html
在您的Web服务器中创建一个文件夹，将您的背景图像命名为"back_mm_opt.png"，并将其放入此文件夹中。现在创建一个名为"mainmenu.html"的空白HTML文件（在同一文件夹中），并将以下代码放入其中
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">
<head>
<style type="text/css">
#artdecoMM{
width:310px;
height:175px;
}
style>
head>

<body>

<div id="artdecoMM" style="background-image:url(back_mm_opt.png)">
test
div>

<body>
html>


这是我们的项目的基础。我们将创建 7 个菜单项。这意味着你可以安装多达 7 个模块，并且它们将正确显示。你可以根据需要将其适应更多项。


第 3 步 菜单项
打开 mainmenu.html，将所有代码替换为此
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">
<head>
<style type="text/css">
#artdecoMM{
font-family:arial;
width:310px;
height:175px;
}
#artdecoMM a {text-decoration:none;}
#artdecoMM a:hover{ color:#FF0000;}

    .mm1 {position:relative; top:23px; left:89px;font-weight:bold; font-size:18px;}
    .mm1 a{ color:#000000}
    .mm2{position:relative; top:25px; left:65px;font-size:20px;}
    .mm2 a {color:#FFFFFF;}
    .mm3{position:relative; top:-12px; left:-39px; width:180px;font-size:20px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    }
    .mm3 a {color:#EBEBEB;}
    
    .mm4{position:relative; top:5px; left:100px; font-weight:bold;font-size:14px;}
    .mm4 a {color:#333333;}
    
    .mm5{position:relative; top:135px; left:-75px;font-size:19px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);}
    .mm5 a {color:#666666;}
    
    .mm6{position:relative; top:-40px; left:-25px; width:105px; font-weight:bold;font-size:15px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);}
    .mm6 a {color:#333333;}
    .mm7{position:relative; top:-125px; left:70px;font-size:15px;}
    .mm7 a {color:#666666;}
    
    #submenu{position:relative; float:right; font-size:10px; color:#006600; right:140px; top:100px;}
    #submenu a{ color:#006600;}
style>
head>

<body>
<div id="artdecoMM" style="background-image:url(back_mm_opt.png)">

<div id="submenu">
<ul>
  <li><a href="#">submenu 1a>li>
  <li><a href="#">submenu 1a>li>
  <li><a href="#">submenu 1a>li>
  <li><a href="#">submenu 1a>li>
ul>
div>


<div class="mm1"><a href="#">Item 1a>div>
<div class="mm2"><a href="#">Item 2a>div>
<div class="mm3"><a href="#">Item 3a>div>
<div class="mm4"><a href="#">Item 4a>div>
<div class="mm5"><a href="#">Item 5a>div>
<div class="mm6"><a href="#">Item 6a>div>
<div class="mm7"><a href="#">Item 7a>div>
div>

body>
html>


运行 mainmenu.html，它应该看起来像 image2。我们所做的是放置所有我们的菜单项并将它们放置在正确的位置。
Resized Image
它们都相对地放置在 div 内。
现在让我们将其转换为 xoops 主题。

创建 xoops 主题
复制 xoops 默认主题并命名为 "kdesign"。我提供了这里的一个压缩版本。转到偏好设置并将 kdesign 设置为默认主题。

现在打开 /kdesign/theme.html并替换所有内容为此
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="<{$xoops_langcode}>" lang="<{$xoops_langcode}>">
<head>
    
    <{assign var=theme_name value=$xoTheme->folderName}>
<style type="text/css">
#artdecoMM{
font-family:arial;
width:310px;
height:175px;
}
#artdecoMM a {text-decoration:none;}
#artdecoMM a:hover{ color:#FF0000;}

    .mm1 {position:relative; top:23px; left:89px;font-weight:bold; font-size:18px;}
    .mm1 a{ color:#000000}
    .mm2{position:relative; top:25px; left:65px;font-size:20px;}
    .mm2 a {color:#FFFFFF;}
    .mm3{position:relative; top:-12px; left:-39px; width:180px;font-size:20px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    }
    .mm3 a {color:#EBEBEB;}
    
    .mm4{position:relative; top:5px; left:100px; font-weight:bold;font-size:14px;}
    .mm4 a {color:#333333;}
    
    .mm5{position:relative; top:135px; left:-75px;font-size:19px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);}
    .mm5 a {color:#666666;}
    
    .mm6{position:relative; top:-40px; left:-25px; width:105px; font-weight:bold;font-size:15px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);}
    .mm6 a {color:#333333;}
    .mm7{position:relative; top:-125px; left:70px;font-size:15px;}
    .mm7 a {color:#666666;}
    
    #submenu{position:relative; float:right; font-size:10px; color:#006600; right:140px; top:100px;}
    #submenu a{ color:#006600;}
style>
head>
<body id="<{$xoops_dirname}>" class="<{$xoops_langcode}>">
<div id="artdecoMM" style="background-image:url(<{xoImgUrl back_mm_opt.png}>)">
<div class="mm1"><a href="#">Item 1a>div>
<div class="mm2"><a href="#">Item 2a>div>
<div class="mm3"><a href="#">Item 3a>div>
<div class="mm4"><a href="#">Item 4a>div>
<div class="mm5"><a href="#">Item 5a>div>
<div class="mm6"><a href="#">Item 6a>div>
<div class="mm7"><a href="#">Item 7a>div>

<div id="submenu">
<ul>
  <li><a href="#">submenu 1a>li>
  <li><a href="#">submenu 2a>li>
  <li><a href="#">submenu 3a>li>
  <li><a href="#">submenu 4a>li>
ul>
div>
div>


<div id="content"><{$xoops_contents}>div>

body>
html>


我仅使用此主题来测试我的主要菜单代码，因此我从这个主题中移除了所有其他内容。现在重新加载主题。你应该有类似 image 3 的东西。
Resized Image

第 4 步 使用模块名称
下一步是使用实际的 xoops 模块。打开 kdesign/theme.html，将所有代码替换为此
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="<{$xoops_langcode}>" lang="<{$xoops_langcode}>">
<head>
    
    <{assign var=theme_name value=$xoTheme->folderName}>
<style type="text/css">
#artdecoMM{
font-family:arial;
width:310px;
height:175px;
}
#artdecoMM a {text-decoration:none;}
#artdecoMM a:hover{ color:#FF0000;}

    .mm1 {position:relative; top:23px; left:89px;font-weight:bold; font-size:18px;}
    .mm1 a{ color:#000000}
    .mm2{position:relative; top:25px; left:65px;font-size:20px;}
    .mm2 a {color:#FFFFFF;}
    .mm3{position:relative; top:-12px; left:-39px; width:180px;font-size:20px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    }
    .mm3 a {color:#EBEBEB;}
    
    .mm4{position:relative; top:5px; left:100px; font-weight:bold;font-size:14px;}
    .mm4 a {color:#333333;}
    
    .mm5{position:relative; top:135px; left:-75px;font-size:19px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);}
    .mm5 a {color:#666666;}
    
    .mm6{position:relative; top:-40px; left:-25px; width:105px; font-weight:bold;font-size:15px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);}
    .mm6 a {color:#333333;}
    .mm7{position:relative; top:-125px; left:70px;font-size:15px;}
    .mm7 a {color:#666666;}
    
    #submenu{position:relative; float:right; font-size:10px; color:#006600; right:140px; top:100px;}
    #submenu a{ color:#006600;}
style>
head>
<body id="<{$xoops_dirname}>" class="<{$xoops_langcode}>">

<div id="artdecoMM" style="background-image:url(<{xoImgUrl back_mm_opt.png}>)">
<div id="submenu">
<ul>
  <li><a href="#">submenu 1a>li>
  <li><a href="#">submenu 2a>li>
  <li><a href="#">submenu 3a>li>
  <li><a href="#">submenu 4a>li>
ul>
div>


<div class="mm<{counter start=1}>"><a href="<{$xoops_url}>">Homea>div>
<{foreach item=module from=$block.modules}>
<div class="mm<{counter}>"><a href="<{$xoops_url}>/modules/<{$module.directory}>/"><{$module.name}>a>div>
<{/foreach}>
div>


<div id="content"><{$xoops_contents}>div>

body>
html>


你可能需要调整位置以更好地适合设计。语言和首字母大写都是影响每个项目位置的因素。

第 5 步 - 子菜单
现在让我们填充子菜单。打开 kdesign/theme.html，将所有代码替换为此
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="<{$xoops_langcode}>" lang="<{$xoops_langcode}>">
<head>
    
    <{assign var=theme_name value=$xoTheme->folderName}>
<style type="text/css">
#artdecoMM{
font-family:arial;
width:310px;
height:175px;
}
#artdecoMM a {text-decoration:none;}
#artdecoMM a:hover{ color:#FF0000;}

    .mm1 {position:relative; top:23px; left:89px;font-weight:bold; font-size:18px;}
    .mm1 a{ color:#000000}
    .mm2{position:relative; top:25px; left:65px;font-size:20px;}
    .mm2 a {color:#FFFFFF;}
    .mm3{position:relative; top:-12px; left:-39px; width:180px;font-size:20px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    }
    .mm3 a {color:#EBEBEB;}    
    .mm4{position:relative; top:5px; left:100px; font-weight:bold;font-size:14px;}
    .mm4 a {color:#333333;}
    .mm5{position:relative; top:135px; left:-75px;font-size:19px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);}
    .mm5 a {color:#666666;}
    .mm6{position:relative; top:-40px; left:-25px; width:105px; font-weight:bold;font-size:15px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);}
    .mm6 a {color:#333333;}
    .mm7{position:relative; top:-125px; left:70px;font-size:15px;}
    .mm7 a {color:#666666;}
    #submenu{position:relative; float:right; font-size:10px; color:#006600; right:140px; top:100px;}
    #submenu a{ color:#006600;}
style>

head>
<body id="<{$xoops_dirname}>" class="<{$xoops_langcode}>">


<div id="artdecoMM" style="background-image:url(<{xoImgUrl back_mm_opt.png}>)">
<div id="submenu">
<ul>
<{foreach item=submenu from=$module.sublinks}>
<li><a href="<{$submenu.url}>"><{$submenu.name}>a>li>
<{/foreach}>
ul>
div>


<div class="mm<{counter start=1}>"><a href="<{$xoops_url}>">Homea>div>
<{foreach item=module from=$block.modules}>
<div class="mm<{counter}>"><a href="<{$xoops_url}>/modules/<{$module.directory}>/"><{$module.name}>a>div>
<{/foreach}>
div>

<div id="content"><{$xoops_contents}>div>

body>
html>


正如你可能注意到的，我正在使用现有的 smarty 变量来完成所有这些。如果你将你的调试模式设置为 smarty，你会看到很多信息被提供以帮助你在模块和模板中。如果你想返回到你的管理员界面，只需要输入以下网址： http://www.yoursite.com/admin.php 或登录： http://www.yoursite.com/user.php 你的最终结果应该类似于 image 4。
Resized Image

评分 0/5
评分： 0/5 (0 票)
投票已被禁用！
同一作者的项目

Login

Register now!  |  Lost Password?

Search

Advanced Search

Recent Comments

Who's Online

260 user(s) are online (21 user(s) are browsing Publisher)

Members: 0

Guests: 260

more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Aug 31
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits

Categories

XOOPS Newsletter