PDA

View Full Version : سوال: منو مشابه سایت زیر


yasharhi
جمعه 11 مهر 1393, 22:52 عصر
تو سایت زیر وقتی روی هر کدوم از منو ها کلیک می کنم دقیقا میره روی اون قسمت از سایت . چطور میشه اینطوری درست کرد ؟
http://scrapd.nl
yas30in
جمعه 11 مهر 1393, 23:11 عصر
تو بعضی اصتلاحات بهش میگن . لنگر زدن.

<html> <head>
<title>my page</title>
</head>


<body>


<h3><a href="#Chapter1">Introduction</a></h2>
<h3><a href="#Chapter2">html text</a></h2>
<h3><a href="#Chapter3">html links</a></h2></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>


<a name="Chapter1"> Introduction </a></br>
<!-- Introdution متن مربوط به --></br>


<a name="Chapter2"> html text</a></br>
<!-- html text متن مربوط به --></br>


<a name="Chapter3"> html links</a></br>
<!-- html links متن مربوط به --></br>


</body>
</html>
SlowCode
جمعه 11 مهر 1393, 23:11 عصر
برای اون قسمت هایی که میگی یه id میدی، مثلا pricing، بعد یه تگ a درست میکنی و توی لینک علامت# رو میزاری و بعد نام id عنصر مورد نظر رو مینویسی.
حالا وقتی روی لینک کلیک بشه روی المنت مورد نظر فوکوس میشه.
مثال:


<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
*{margin: 0 auto;padding: 0;}
a{color: #ecf0f1;}
.menu{position: fixed;background: #34495e;width: 100%;top: 0;padding: 10px 25px;}
.menu li{list-style: none;display: inline;margin-left: 20px;}
.box{margin: 20px auto;padding: 60px 20px;background: #DDD;border: 1px solid #CCC;width: 90%;height: 400px;display: block}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#box1">Box1</a></li>
<li><a href="#box2">Box2</a></li>
<li><a href="#box3">Box3</a></li>
<li><a href="#box4">Box4</a></li>
</ul>
<br><br>
<div class="box" id="box1">box1</div>
<div class="box" id="box2">box2</div>
<div class="box" id="box3">box3</div>
<div class="box" id="box4">box4</div>
</body>
</html>
yasharhi
چهارشنبه 23 مهر 1393, 05:26 صبح
خیلی ممنون .