0
메뉴를 만드는 데 문제가 있습니다.html 및 CSS 디자인 관련 문제
기본적으로 햇볕 아래 모든 것을 시도했지만 드롭 다운 메뉴를 만드는 방법을 알아낼 수 없습니다!
이것은 회사 프로젝트이므로 드롭 다운 메뉴를 가져와야합니다.
예를 들어 - 지금 제가 작업하고있는 웹 사이트에 대한 링크가 여기에 있습니다 - http://smartliving.comule.com/brands.html. 이전 태그의 "css"또는 "cssmenu"태그를 제외하십시오!
HTML 코드는 다음과 같습니다. 탐색 모음은 다음과 같습니다. 나는 아래의 코드를 재현 http://smartliving.comule.com/demos/css/pages.css -
<!DOCTYPE html>
<html>
<head>
<title>Smart-Living Bangladesh (BD)</title>
<link rel="stylesheet" href="abs.css">
<link rel="stylesheet" type="text/css" href="demos/css/search.css" />
<link rel="stylesheet" type="text/css" href="demos/css/elastislide.css" />
<link rel="stylesheet" type="text/css" href="demos/css/elastislide1.css" />
<link rel="stylesheet" type="text/css" href="demos/css/custom.css" />
<link rel="shortcut icon" href="demos/images/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="demos/images/apple-touch-icon.png">
<!-- Syntax highlighting -->
<link rel="stylesheet" href="demos/prettify/prettify.css" media="screen">
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2'></script>
<script type="text/javascript">
$(document).ready(function(){
// Add the value of "Search..." to the input field
$("#search").val("Search...");
// When you click on #search
$("#search").focus(function(){
// If the value is equal to "Search..."
if($(this).val() == "Search...") {
// remove all the text
$(this).val("");
}
});
// When the focus on #search is lost
$("#search").blur(function(){
// If the input field is empty
if($(this).val() == "") {
// Add the text "Search..."
$(this).val("Search...");
}
});
$("#search-submit").hover(function(){
$(this).addClass("hover");
});
});
</script>
<script src="demos/prettify/prettify.js"></script>
<script src="demos/js/modernizr.custom.17475.js"></script>
<!-- jQuery (required) & jQuery UI (for this demo only) -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script src="http://cdn.jquerytools.org/1.2.5/tiny/jquery.tools.min.js"></script>
<!-- Anything Slider optional plugins -->
<script src="js/jquery.easing.1.2.js"></script>
<!-- Anything Slider -->
<link rel="stylesheet" href="css/anythingslider.css">
<script src="js/jquery.anythingslider.js"></script>
<script>
$(function() {
$('#slider1').anythingSlider({
// theme : 'metallic',
expand : true,
autoPlay : true
});
$('#slider2').anythingSlider({
expand : true,
autoPlay : true,
showMultiple : 2,
changeBy : 2
});
});
</script>
<link rel="stylesheet" href="css/theme-metallic.css" media="screen">
<!-- AnythingSlider optional FX extension -->
<script src="js/jquery.anythingslider.fx.js"></script>
<!-- Index page only -->
<script src="jquery.js"></script>
<script src="jquery.vticker-min.js"></script>
<script type="text/javascript">
$(function(){
$('#news-container').vTicker({
speed: 500,
pause: 3000,
animation: 'fade',
mousePause: false,
showItems: 3
});
$('#news-container1').vTicker({
speed: 700,
pause: 4000,
animation: 'fade',
mousePause: false,
showItems: 1
});
});
$(function() {
var initab = 0;
var initab2 = 0;
var lhash = window.location.hash;
if (lhash) {
lhash.match(/^#(\d+)-(\d+)/);
initab = RegExp.$1 - 1;
initab2 = RegExp.$2 - 1;
}
$("ul.tabs").tabs("> .pane",{initialIndex:initab});
$("ul.tabs2").tabs("> .pane2",{initialIndex:initab2});
$('ul li a').click(function() {location.hash = $(this).attr('href');});
});
</script>
<link rel="stylesheet" href="demos/css/pages.css">
<link rel="stylesheet" href="demos/colorbox/colorbox.css">
<script type="text/javascript">
$(function() {
var initab = 0;
var initab2 = 0;
var lhash = window.location.hash;
if (lhash) {
lhash.match(/^#(\d+)-(\d+)/);
initab = RegExp.$1 - 1;
initab2 = RegExp.$2 - 1;
}
$("ul.tabs").tabs("> .pane",{initialIndex:initab});
$("ul.tabs2").tabs("> .pane2",{initialIndex:initab2});
$('ul li a').click(function() {location.hash = $(this).attr('href');});
});
</script>
<script src="demos/js/demo.js"></script>
<script src="demos/colorbox/jquery.colorbox-min.js"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="keywords" content="carousel, jquery, responsive, fluid, elastic, resize, thumbnail, slider" />
<meta name="author" content="Codrops" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="keywords" content="carousel, jquery, responsive, fluid, elastic, resize, thumbnail, slider" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<title>SMART LIVING BANGLADESH (BD)</title>
<style type="text/css">
img.adjusted {
position: absolute;
z-index: -1;
width: 100%;
height:100%;
top: 0;
left: 0;
}
.Invitation {
position: relative;
width: 960px;
height: 300px;
}
img.adjusted1 {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.Invitation1 {
position: relative;
width: 236px;
height: 60px;
}
img.adjusted2 {
position: absolute;
z-index: -1;
width: 100%;
height:100%;
top: 0;
left: 0;
}
.Invitation2 {
position: relative;
width: 960px;
height: 50px;
}
img.adjusted3 {
position: absolute;
z-index: -1;
width: 100%;
height:100%;
top: 0;
left: 0;
}
.Invitation3 {
position: relative;
width: 718px;
height:172px;
}
img.adjusted4 {
position: absolute;
z-index: -1;
width: 100%;
height:100%;
top: 0;
left: 0;
}
.Invitation4 {
position: relative;
width: 960px;
height:40px;
}
</style>
<form action="" id="search-form">
<fieldset>
<input type="text" id="search" name="search" />
<input type="submit" id="search-submit" value="" />
</fieldset>
</form>
</head>
<body>
<div id ="wrapper">
<div id="header">
<img src="biggest1.png" alt="logo" />
</div> <!-- end #header -->
<div id="nav">
<div class="Invitation4">
<img src="banner.jpg" class="adjusted1">
<a class="issue" href="home.html">Home</a>
<a class="issue" href="aboutus.html">About Us</a>
<a class="issue" href="FAQ.html">FAQ</a>
<a class="issue" href="newproducts.html">New Products</a>
<a class="issue" href="brands.html">Brands</a>
<a class="issue" href="gallery1.htm">Gallery</a>
<a class="issue" href="shoppingcart.html">Shopping Cart</a>
<a class="issue" href="news.html">News</a>
<a class="issue" href="wishlist.html">Wish List</a>
<a class="issue" href="contact.html">Contact</a>
</div> <!-- end #nav -->
</div>
<div id = "featured">
<div id="footer">
<div class="Invitation2">
<img src="banner1.jpg" class="adjusted2">
<ul>
<p style="text-align:center"><a href="http://www.facebook.com/groups/woodybd/" title="Facebook"><img class="display" src="images/facebook.png" alt="Facebook" /></a>
<a href="http://bd.linkedin.com/pub/woody-bd/40/315/668" title="LinkedIn"><img src="images/google.png" alt="Google +" /></a>
<a href="http://twitter.com/#!/Woody_bd" title="Twitter"><img src="images/twitter.png" alt="Twitter" /></a>
<a href="http://youtube.com/#!/Woody_bd" title="Tumblr"><img src="images/youtube.png" alt="Youtube"/></a>
<a href="http://bd.linkedin.com/pub/woody-bd/40/315/668" title="LinkedIn"><img src="images/feed.png" alt="RSS Feed" /></a>
<a href="http://bd.linkedin.com/pub/woody-bd/40/315/668" title="LinkedIn"><img src="images/linkedin.png" alt="Linkedin" /></a>
<a href="http://bd.linkedin.com/pub/woody-bd/40/315/668" title="LinkedIn"><img src="images/wikipedia.png" alt="Wikipedia" /></a>
<p style="text-align:center"><b> <font size="0.1">© 2014 - Smart Living BD</font></b>
</ul>
</div>
</div> <!-- end #footer -->
</div>
</body>
</html>
다음은 위의 페이지에 대한 PHP 코드입니다. #nav 태그를 수정하고 다른 브랜드 이름의 드롭 다운 메뉴를 표시하는 방법을 알려주세요. 나는 다른 코드로 시도해 보았고 다른 종류의 코드와 섞어서 혼합 된 결과를 얻었습니다.
body {
font-family: georgia,sans-serif;
font: normal 85%/1.1 "Lato", sans-serif;
color: white;
text-align: center
color:#333;
margin:0;
padding:0;
}
#wrapper {
width:960px;
/*background-color:#f1f1f1;*/
margin:0 auto;
}
#header {
width:960px;
height:135px;
margin:0 auto;
}
#nav {
width:960px;
height: 40px;
}
#nav span,
#nav a {
display:inline;
text-decoration:none;
background-color:#ffffff;
}
#nav a:hover {
background-color:#000000;
height:40px;
}
#featured {
width: 960px;
height: 301px;
margin: 0 auto;
}
#bodies {
width: 960px;
margin: 0 auto;
background-color: #f1f1f1;
}
#leftcolumn {
width:720px;
padding: 0;
margin: 0;
border:0;
float:left;
}
#rightcolumn {
width:240px;
padding: 0;
margin: 0;
border:0;
float:right;
}
#leftcolumn1 {
width:720px;
padding: 0;
margin: 0;
float:left;
}
#rightcolumn1 {
width:240px;
padding: 0;
margin: 0;
border:0;
float:right;
}
#leftsidebar {
width:200px;
padding: 0;
margin: 0;
border:0;
float:left;
}
#leftsidebar a {
text-decoration:none;
}
#leftsidebar ul, li{
list-style: none;
margin: 0;
padding: 0;
}
#leftsidebar li {
list-style:none;
}
#content {
width:560px;
position: relative;
float:center;
padding:10px;
}
#rightsidebar {
width:200px;
float:right;
}
#rightsidebar a {
text-decoration:none;
}
#rightsidebar li {
list-style:none;
}
#news-container{
width: 230px;
float: right;
position: relative;
margin: auto;
border: 5px solid #333333;
}
#news-container ul li div
{
border: 2px solid #aaaaaa;
background: #ffffff;
}
#footer {
clear:both;
width:960px;
height:50px;
}
#footer p {
padding:5px;
}
/********************
Overall Demo pages
********************/
body { font: 12px Georgia, Serif; background: #fff; color: #000; }
a, a img { border: 0; text-decoration: none; }
#page-wrap, #demo2 { width: 100%; padding: 0 0px; margin: 0 auto 0px; position: relative; }
h1 { font: bold 60px Helvetica, Sans-Serif; letter-spacing: -2px; margin: 10px 0; text-align: center; }
h2 { font: bold 30px Helvetica, Sans-Serif; letter-spacing: -1px; margin: 0 0 10px 0; color: #000000; }
h2.title { text-align: center; }
h3 { font: bold 20px Georgia, Serif; margin: 0 0 10px 0; color: #003388; }
h5, .header { font: bold 15px Georgia, Serif; text-align: center; }
pre, code { font: 10px/1.8 Monaco, MonoSpace; margin: 0 0 15px 0; padding: 5px; background: #f5f5f5; block: inline; width: 100%; overflow-x: auto; }
blockquote { margin-left: 30px; }
ul { margin: 0; padding-left: 35px; }
ul li { font: 15px Georgia, Serif; margin: 0 0 8px 0; }
#nav {
display: block;
width: 100%;
margin: 0px auto;
text-align: center;
line-height: 3em;
}
#nav a {
text-align: center;
background: black;
color: white;
border-radius: 5px;
-moz-border-radius: 0px;
-webkit-border-radius: 5px;
padding: 12px;
white-space: nowrap;
}
#nav a.issue {
background: #FF8C00;
}
#nav a:hover,
#nav a.current {
background: #000; }
#nav .has-sub {
z-index: 1;
}
#nav ul {
list-style: none;
}
#nav > ul {
float: left;
}
#nav > ul > li {
float: left;
}
#nav > ul > li > a {
color: #FFFFFF;
font-size: 12px;
}
#nav > ul > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #FF8C00;
margin-left: -10px;
}
#nav > ul > li:first-child > a {
border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
}
#nav > ul > li.active:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #FF8C00;
margin-left: -10px;
}
#nav > ul > li.active > a {
-moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
background: -moz-linear-gradient(top, #FF8C00 0%, #ffeeff ef 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #FF8C00 ef));
background: -webkit-linear-gradient(top, #FF8C00 0%, #ffeeff ef 100%);
background: -o-linear-gradient(top, #FF8C00 0%, #ffeeff ef 100%);
background: -ms-linear-gradient(top, #FF8C00 0%, #ffeeff ef 100%);
background: linear-gradient(top, #FF8C00 0%, #ffeeff ef 100%);
}
#cssmenu > ul > li:hover > a {
background: #FF8C00;
background: -moz-linear-gradient(top, #FF8C00 0%, #ffeeff ef 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #FF8C00 ef));
background: -webkit-linear-gradient(top, #FF8C00 0%, #ffeeff ef 100%);
background: -o-linear-gradient(top, #FF8C00 0%, #ffeeff ef 100%);
background: -ms-linear-gradient(top, #FF8C00 0%, #ffeeff ef 100%);
background: linear-gradient(top, #FF8C00 0%, #FF8800 ef 100%);
-moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
}
#nav .has-sub {
z-index: 1;
}
#nav .has-sub:hover > ul {
display: block;
}
#nav .has-sub ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#nav .has-sub ul li {
*margin-bottom: -1px;
}
#nav .has-sub ul li a {
background: #FF8C00;
border-bottom: 1px dotted #ffa333;
filter: none;
font-size: 11px;
display: block;
line-height: 120%;
padding: 10px;
color: #ffffff;
}
#nav .has-sub ul li:hover a {
background: #cc7000;
}
#nav .has-sub .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
background: #cc7000;
border-bottom: 1px dotted #ffa333;
}
#cssmenu .has-sub .has-sub ul li a:hover {
background: #cc7000;
}
#nav .has-sub:hover > ul {
display: block;
}
#nav .has-sub ul {
display:none;
position: relative;
width: 200px;
top: 100%;
left: 0;
}
#nav .has-sub ul li{
*margin-bottom: -1px;
}
#nav .has-sub ul li a {
backgroun: #ff8c00;
border-bottom: 1px dotted #ffa333;
filter: none;
font-size: 11px;
display: block;
line-height: 120%;
padding: 10px;
color: #ffffff;
}
#nav .has-sub ul li:hover a {
background: #cc7000;
}
#nav .has-sub .has-sub:hover > ul {
display: block;
}
#nav .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#nav .has-sub .has-sub ul li a {
background: #cc7000;
border-bottom: 1px dotted #ffa333;
}
#nav .has-sub .has-sub ul li a:hover {
background: #b36200;
}
.themeselector, .ani { margin: 0 auto; text-align: center; }
#status { color: #00a; font-weight: bold; }
.alert { color: #f00; font-weight: bold; }
.alert a, .attention { color: #a00; }
.data { width: 100%; border: #555 0.5px solid; border-collapse: collapse; }
.data td, .data th { border: #555 0.5px solid; padding: 0 5px; }
.data th { background: #eee; }
.data .col { width: 200px; }
/*****************
Main demo page
*****************/
#main #slider1 { width: 800px; height: 390px; list-style: none; }
#main #slider1 .panel5 ul { width: 200px; margin: 0 5px; }
/* For Specific Slides, these also apply to FX demo pages */
.textSlide { padding: 10px 10px; }
.textSlide h3 { font: 20px Georgia, Serif; }
.textSlide h4 { text-transform: uppercase; font: 15px Georgia, Serif; margin: 10px 0; }
.textSlide ul { list-style: disc; margin: 0; padding-left: 20px; }
.textSlide ul li { display: list-item; }
.rightside { float: right; margin: 0 0 2px 10px; }
.quoteSlide { padding: 20px; }
.quoteSlide blockquote { font: italic 24px/1.5 Georgia, Serif; text-align: center; color: #444; margin: 0 0 10px 0; }
.quoteSlide p { text-align: center; }
/***************************
FX Demo Page
***************************/
/* Demo page accordions */
.accordion { width: 100%; margin: 0 auto; }
.accordion .ui-widget-content a { color: #000000; }
/** Demo 1 **/
/* colorbox images to full size */
#demo2 #slider1 { width: 960px; height: 300px; list-style: none; }
.cboxPhoto { width: 100%; height: 100%; margin: 0 !important; }
#cboxTitle { color: #000 !important; }
/* Change metallic slider defaults to show thumbnails -
using #demo2 (page wrapper) to increase this CSS priority */
#demo2 div.anythingControls { bottom: 15px; }
#demo2 div.anythingSlider-metallic .thumbNav a { background-image: url(); height: 10px; width: 30px; border: #000 1px solid; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
#demo2 div.anythingSlider-metallic .thumbNav a span { visibility: visible; }
/* border around image to show current page */
#demo2 div.anythingSlider-metallic .thumbNav a:hover,
#demo2 div.anythingSlider-metallic .thumbNav a.cur { border-color: #fff; }
/* reposition the start/stop button */
#demo2 div.anythingSlider-metallic .start-stop { margin-top: 15px; }
/** Demo 2 **/
#demo2 #slider2 { width: 400px; height: 300px; list-style: none; }
/** Demo 3 **/
#demo2 #slider3 { width: 500px; height: 400px; list-style: none; }
/* position caption close button */
.caption-top .close,
.caption-right .close,
.caption-bottom .close,
.caption-left .close { font-size: 80%; cursor: pointer; float: right; display: inline-block; }
/******************
Expand demo page
******************/
#wrapper1 { width: 100%; height: 300px; margin: 0 auto; }
#wrapper2 { width: 50%; height: 300px; margin: 0 auto; }
#expand #slider1,
body#expand h2, {margin-bottom:25px; }
/***************************
Video Compatibility table
***************************/
.video-info { width: 700px; margin: 0 auto; margin-top: 50px; font-size: 18px; }
.video-info h2 { text-align: center; }
.video-info ul,
.video-info li { margin: 0; }
.video-info sup { font-size: 12px; }
.video-info th.header { width: 25px; }
.good, .bad, .prob { color: #ddd; text-align: center; }
.good { background: #080; }
.bad { background: #800; }
.prob { background: #880; }
.group { border: #000 1px solid; }
/******************
css3 demo page
******************/
.animations { margin: 10px 10px 10px 5px; }
.ani { margin-top: 5px; }
/******************
tooltips (Jatt)
******************/
.tooltip { cursor: pointer; }
#tooltip {
min-width: 10px;
color: #dddddd;
background: #444;
border: 1px solid #777;
padding: 8px;
display: none;
opacity: 0.9;
filter: alpha(opacity=90);
text-align: left;
border-radius: .5em;
-moz-border-radius: .5em;
-webkit-border-radius: .5em;
z-index: 1000;
}
#tooltip .body {
display: block;
text-align: center;
}
내가 ... 그것은 나에게주는 않았다는 것을 여기
은 예입니다 많은 probl ems ... 그냥 샘플 코드를 작성하고 절 사이에 넣을 수 ... 작동하는지 여부를 알 수 있습니다! –