开发者新闻: 教程 - 构建 CSS 3 主菜单

发布者: kaotik 在 2010/8/13 19:30:00 10058 阅读数
学习如何使用 CSS 3 特性创建一个酷炫的主菜单。

历史
我是 50/60 年代工业设计的大粉丝，这篇教程受到了那个时期我看到的海报的启发。


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



步骤 2 创建空白 HTML
在您的 Web 服务器中创建一个文件夹，将您的背景图像命名为 "back_mm_opt.png"，并将其放入此文件夹中。现在创建一个名为 "mainmenu.html" 的空白 HTML 文件（在同一个文件夹中），并将其 following 代码放入其中
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，它应该看起来像图像2。我们所做的是放置所有菜单项并正确地定位它们。
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>


我仅使用此主题测试我的主要菜单代码，因此从这个主题中移除了所有其他内容。现在重新加载主题。你应该会得到与图像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，你会看到大量信息提供以帮助你处理模块和模板。如果你想返回管理员页面，只需键入 url： http://www.yoursite.com/admin.php 或登录： http://www.yoursite.com/user.php 你的最终结果应该类似于图像4。
Resized Image