ورود

View Full Version : طراحی منوی more صفحه گوگل


hkhalaj
دوشنبه 31 تیر 1392, 22:15 عصر
سلام. من تا حدودی نوار بالایی گوگل را طراحی کردم. ولی نمیدونم چطور باید خط سمت چپ منوی پایین افتادنی more را دقیقا زیر more قرار بدم مثل خود گوگل و دیگه اینکه وقتی توی صفحه کلیک میکنم منوی more مخفی بشه.ممنون.
<!DOCTYPE html>
<html>
<head>
<style>
div
{
background-color: black;
width: 1024px;
height: 26px;
position:absolute;
top: 0px;
left: 0px;
text-indent: 12px;
}
#nav ul
{
list-style:none;
padding: 0px;
margin: 0px;
overflow:hidden;
}
#nav li
{
float: left;
}

#nav ul li a
{
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #ffffff;
opacity:0.7;
text-decoration: none;
margin-left: 15px;
padding-top: 7px;
}
#nav ul li a:hover
{
opacity: 1.0;
filter:alpha(opacity=100);
}
#menu ul li a:visited
{
display:block;
}
#nav ul ul {
background: #ffffff; border-radius: 2px; padding: 0;
border-style:solid;
border-width: 1px;
border-color: #606060;
box-shadow: 1px 1px 5px #888888;
position: absolute; top: 100%;
margin: 0px;
padding: 13px;
}
#nav ul ul li {
float: none;
border-top: 0px solid #6b727c;
border-bottom: 0px solid #575f6a;
position: relative;
}
#nav ul ul li a {

padding: 5px 0px;
color: #000000;
}
#nav ul ul li a:active
{
display:none;
}
</style>
<title>Google</title>
</head>
<body>
<div id="nav">
<ul>
<li><a href="https://plus.google.com/?gpsrc=ogpy0&tab=wX">+You</a></li>
<li><a href="https://plus.google.com/?gpsrc=ogpy0&tab=wX">Search</a></li>
<li><a href="https://plus.google.com/?gpsrc=ogpy0&tab=wX">Images</a></li>
<li><a href="https://plus.google.com/?gpsrc=ogpy0&tab=wX">Maps</a></li>
<li><a href="https://plus.google.com/?gpsrc=ogpy0&tab=wX">Play</a></li>
<li><a href="https://plus.google.com/?gpsrc=ogpy0&tab=wX">YouTube</a></li>
<li><a href="https://plus.google.com/?gpsrc=ogpy0&tab=wX">News</a></li>
<li><a href="https://plus.google.com/?gpsrc=ogpy0&tab=wX">Gmail</a></li>
<li><a href="https://plus.google.com/?gpsrc=ogpy0&tab=wX">Drive</a></li>
<li><a href="https://plus.google.com/?gpsrc=ogpy0&tab=wX">Calendar</a></li>
<li><a href="#">More</a>
<ul id="submenu">
<li><a href="#"><b>Translate</b></a></li>
<li><a href="#"><b>Mobile</b></a></li>
<li><a href="#"><b>Books</b></a></li>
<li><a href="#"><b>Offers</b></a></li>
</ul>
</li>



</ul>
</div>
</body>
</html>
hkhalaj
سه شنبه 01 مرداد 1392, 10:15 صبح
بابا یکی پیدا بشه جواب بده. گیرم.
H:Shojaei
سه شنبه 01 مرداد 1392, 15:01 عصر
سلام


<!DOCTYPE html>
<html>
<head>
<style>
div
{
background-color: black;
width: 1024px;
height: 26px;
position:absolute;
top: 0px;
left: 0px;
text-indent: 12px;
}
#nav ul
{
list-style:none;
padding: 0px;
margin: 0px;
overflow:hidden;
}
#nav li
{
float: left;
}

#nav ul li a
{
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #ffffff;
opacity:0.7;
text-decoration: none;
margin-left: 15px;
padding-top: 7px;
}
#nav ul li a:hover
{
opacity: 1.0;
filter:alpha(opacity=100);
}
#menu ul li a:visited
{
display:block;
}
#nav ul ul {
background: #ffffff; border-radius: 2px; padding: 0;
border-style:solid;
border-width: 1px;
border-color: #606060;
box-shadow: 1px 1px 5px #888888;
position: absolute; top: 100%;
margin: 0px;
padding: 13px;
}
#nav ul ul li {
float: none;
border-top: 0px solid #6b727c;
border-bottom: 0px solid #575f6a;
position: relative;
}
#nav ul ul li a {

padding: 5px 0px;
color: #000000;
}
#nav ul ul li a:active
{
display:none;
}
#submenu
{
display:none;
right:208px;
float:right;
padding:40px;

}
</style>
<script>
function func()
{
var x=document.getElementById('submenu').style;
if(x.display=="block")
x.display="none";
else
x.display="block";
}
</script>
<title>Google</title>
</head>
<body>
<div id="nav">
<ul>
<li><a href="https://plus.google.com/?gpsrc=ogpy0&tab=wX">+You</a></li>
<li><a href="https://plus.google.com/?gpsrc=ogpy0&tab=wX">Search</a></li>
<li><a href="https://plus.google.com/?gpsrc=ogpy0&tab=wX">Images</a></li>
<li><a href="https://plus.google.com/?gpsrc=ogpy0&tab=wX">Maps</a></li>
<li><a href="https://plus.google.com/?gpsrc=ogpy0&tab=wX">Play</a></li>
<li><a href="https://plus.google.com/?gpsrc=ogpy0&tab=wX">YouTube</a></li>
<li><a href="https://plus.google.com/?gpsrc=ogpy0&tab=wX">News</a></li>
<li><a href="https://plus.google.com/?gpsrc=ogpy0&tab=wX">Gmail</a></li>
<li><a href="https://plus.google.com/?gpsrc=ogpy0&tab=wX">Drive</a></li>
<li><a href="https://plus.google.com/?gpsrc=ogpy0&tab=wX">Calendar</a></li>
<li><a href="#" onclick="func()">More</a>
<ul id="submenu" >
<li><a href="#"><b>Translate</b></a></li>
<li><a href="#"><b>Mobile</b></a></li>
<li><a href="#"><b>Books</b></a></li>
<li><a href="#"><b>Offers</b></a></li>
</ul>
</li>



</ul>
</div>
</body>
</html>
hkhalaj
چهارشنبه 02 مرداد 1392, 09:54 صبح
ممنون دوست عزیز. چند تا سوال دارم که شاید مسخره باشه.1-اگه بخام مثل خود گوگل با کلیک توی صفحه منوی پایین افتادنی مخفی بشه چه کدی لازمه. توی کد شما با کلیک روی خود more مخفی میشه.2- برای اینکه لوگو و فرم سرچ گوگل دقیق در وسط صفحه قرار بگیرن و عرض کادر سرچ زیاد بشه باید چکار کرد؟
H:Shojaei
چهارشنبه 02 مرداد 1392, 12:53 عصر
1-قرار نيست كه لقمه آماده ي آماده باشه كه يه كم با همون كد ها يي كه من اضافه كردم كار كنيد اون كار رو هم هنجام ميديد مثلا من روي دكمه ي more نوشتم شما همون كار ها رو روي body يا هر چي به عنوان body در نظر گرفتيد انجام بدين.
2-اگه شما واسه ي اجزايي كه دارين كد margin:0 auto; padding:0 auto; رو بذاريد به طور خود كار وسط قرار ميگيرن عرض هر چيزي رو هم كه با width ميتونيد تعيين كنيد.