Başlangıç

Visual Studio 2013 Asp.NET ile css açılır menü yapma (html5, mysql veritabanı ve datarepeater kullanarak)

Yorum bırakın


Önce Mysql kullanabilmek için gerekli eklemeleri yapın.

Nasıl olduğunu okumak için tıklayın.

Daha sonra ilgili veritabanını mysql ile oluşturun. Ayarları yaptınız ise sql dosyası örneği aşağıdaki rar dosyasında vardır.

Nasıl ayarlandığını okumak için tıklayın.

2015-08-21 01-09-24 Ekran görüntüsü

İstediğiniz bir css menüyü internetten indirin veya ekteki rar dosyasını kullanın.

rar dosyasını indirmek için tıklayın.

simdi içerisindeki css dosyasını şekildeki gibi çalışma ortamınıza alın.

2015-08-21 01-25-26 Ekran görüntüsü

default.aspx dosyasının içeriği;

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default.aspx.cs” Inherits=”_Default” %>

<!DOCTYPE html>

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head runat=”server”>
<title></title>
<link href=”stil.css” rel=”stylesheet” />
</head>
<body>
<form id=”form1″ runat=”server”>

<asp:Repeater ID=”Repeater1″ runat=”server” OnItemDataBound=”Repeater1_ItemDataBound”>
<HeaderTemplate><ul id=”menu”></HeaderTemplate>
<ItemTemplate>
<li><a href=”<%# Eval(“link”) %>”><%# Eval(“ad”) %></a>
<asp:Repeater ID=”Repeater2″ runat=”server”>
<HeaderTemplate><ul></HeaderTemplate>
<ItemTemplate><li><a href=”<%# Eval(“link”) %>”><%# Eval(“ad”) %></a></li></ItemTemplate>
<FooterTemplate></ul></FooterTemplate>
</asp:Repeater>
</li>
</ItemTemplate>
<FooterTemplate></ul></FooterTemplate>
</asp:Repeater>

</form>
</body>
</html>

default.aspx.cs dosyasının içeriği;

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using MySql.Data;
using MySql.Data.MySqlClient;

public partial class _Default : System.Web.UI.Page
{
MySqlConnection baglanti = new MySqlConnection();
MySqlCommand sqlkomut = new MySqlCommand();
MySqlConnection baglanti2 = new MySqlConnection();
MySqlCommand sqlkomut2 = new MySqlCommand();
protected void Page_Load(object sender, EventArgs e)
{
baglanti.ConnectionString = “Server=localhost;User Id=root; Password=xxkendisifrenizxx; Database=deneme_db; Pooling=false”;
baglanti.Open();
sqlkomut.Connection = baglanti;
sqlkomut.CommandText = “select * from kategori”;
MySqlDataAdapter adaptergonder = new MySqlDataAdapter(sqlkomut);
DataTable ds = new DataTable();
adaptergonder.Fill(ds);
Repeater1.DataSource = ds;
Repeater1.DataBind();
baglanti.Close();

}
protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
//try
//{
Repeater rp = (Repeater)e.Item.FindControl(“Repeater2”);
string sqlstring2 = “SELECT * FROM altkategori WHERE kategoriid='” + DataBinder.Eval(e.Item.DataItem, “id”).ToString()+”‘”;
baglanti2.ConnectionString =
“Server=localhost;User Id=root; Password=xxkendisifrenizxx; Database=deneme_db; Pooling=false”;
baglanti2.Open();
sqlkomut2.Connection = baglanti2;
sqlkomut2.CommandText = sqlstring2;
//Response.Write(sqlstring2);
MySqlDataAdapter adaptergonder2 = new MySqlDataAdapter(sqlkomut2);
DataTable dt = new DataTable();
adaptergonder2.Fill(dt);
if (dt.Rows.Count == 0)
{
rp.DataSource = null;
rp.DataBind();

}
else if (dt.Rows.Count > 0)
{
rp.DataSource = dt;
rp.DataBind();
}
baglanti2.Close();
/*}
catch
{
;
}
finally
{
;
}*/
}
}
}

Kodlamada değişik html5 ve css menülerle birlikte isterseniz jquery menuleri, sliderları da kullanabilirsiniz. Ama menü kodları karıştıkça kodlamalarda da değişiklikler yapmak gerekir.

2015-08-21 01-11-52 Ekran görüntüsü

şekildeki gibi bir menü  karşınıza gelir. Kullanılan css menu http://mintik.com adresinden rastgele alınmıştır. örnek olarak verilmiştir.

Reklamlar

CSS ve Liste etiketleri ile En Basit Dikey Açılır Menü Yapımı

Yorum bırakın


En basit haliyle css ve html ile Dikey Açılır menü yapmak için bir adet html dosyası ve bir adette  css dosyası oluşturalım. Bu dosyaları herhangi bir metin editörü (notepad.exe) veya Dreamweaver Programı ile oluşturabilirsiniz.

  • dikeyacilirmenuolustur.html dosyasının içeriği;

<html>
<head>
<title>Dikey Açılır Menü Oluşturma</title>
<link rel=”stylesheet” type=”text/css” href=”dikeyacilirmenustilleri.css”/>
<!–css dosyasının eklenmesi–>
</head>
<body>

<div id=”dacilirmenu”> <!–dosyadaki sınıfın etikete uygulanması–>
<ul> 
<li><a href=”#” target=”_self”>ANASAYFA</a></li>
<li><a href=”#” target=”_self”>RESİMLER</a>

<ul>
<li><a href=”#” target=”_self”>Tatil Resimleri</a></li>
<li><a href=”#” target=”_self”>Kişisel Resimler</a></li>
<li><a href=”#” target=”_self”>Okul Resimleri</a></li>
</ul>

<li><a href=”#” target=”_self”>İLETİŞİM</a></li>

</ul></div></body></html>

  • dikeyacilirmenustilleri.css dosyasının içeriği;

#dacilirmenu ul{
margin:0;
padding:0;
list-style:none;/*liste etikeltlerini kaldır*/
width:150px;
border:1px solid #000;/*en alttaki kenarlık için*/
}
#dacilirmenu li{
position:relative;/*bir önceki konuma göre diğer listeyi yerleştirme*/
}
#dacilirmenu li ul{
position:absolute;/*alt liste bağlı olduğu listenye göre konumlansın*/
left:149px;/*sol tarafa alt listeyi kaydır*/
width:150px;
display:none; /*normalde alt liste gözükmesin*/
top:0;/*bağlı olduğu listeye göre üstte sıfır konumu*/
}
#dacilirmenu li a{
display:block;/*liste elemanları eşit boylarda olsun*/
text-decoration:none;
background-color:#06C;
color:#FFF;
font:bold 13px Verdana, Geneva, sans-serif;
padding:5;
border:1px solid #000;
border-bottom:0;
}
#dacilirmenu li a:hover{
background-color:#0fC;
color:#FF0;
}
#dacilirmenu li:hover ul {display:block;}/*gizlenmiş alt liste gözüksün*/

/* IE. gizle \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* IE den gizleme sonu */

not:Tüm css dosyaları en az sayıda parametre kullanılarak hazırlanmış menü örnekleridir. Tasarımlara göre değişik eklentilerle çok daha görsel menüler oluşturulabilir.

CSS ve Liste etiketleri ile En Basit Yatay Açılır Menü Yapımı

Yorum bırakın


En basit haliyle css ve html ile Yatay Açılır menü yapmak için bir adet html dosyası ve bir adette  css dosyası oluşturalım. Bu dosyaları herhangi bir metin editörü (notepad.exe) veya Dreamweaver Programı ile oluşturabilirsiniz.

  • yatayacilirmenuolustur.html dosyasının içeriği;

<html>
<head>
<title>Yatay Açılır Menü Oluşturma</title>
<link rel=”stylesheet” type=”text/css” href=”yatayacilirmenustilleri.css”/>
<!–css dosyasının eklenmesi–>
</head>
<body>

<div id=”yacilirmenu”> <!–dosyadaki sınıfın etikete uygulanması–>
<ul> 
<li><a href=”#” target=”_self”>ANASAYFA</a></li>
<li><a href=”#” target=”_self”>RESİMLER</a>

<ul>
<li><a href=”#” target=”_self”>Tatil Resimleri</a></li>
<li><a href=”#” target=”_self”>Kişisel Resimler</a></li>
<li><a href=”#” target=”_self”>Okul Resimleri</a></li>
</ul>

<li><a href=”#” target=”_self”>İLETİŞİM</a></li>

</ul></div></body></html>

  • yatayacilirmenustilleri.css dosyasının içeriği;

#yacilirmenu ul{/*tüm listelerin genel css ayarları*/
padding:0;
margin:0;
list-style:none;
}
#yacilirmenu li{
float:left;/*ana listenin yanyana gözükmesi için*/
position:relative;/*liste konumlandırma göreceli*/
width:150px;
border:1px solid #000;}
#yacilirmenu li ul{/*alt listelerin css durumu*/
display:none;/*alt liste gözükmesin*/
left:0;
position:absolute;
top:16px; }
#yacilirmenu li a{
display:block;
text-decoration:none;
background-color:#06C;
color:#FFF;
font:bold 13px Verdana, Geneva, sans-serif;
padding:0;
}
#yacilirmenu li a:hover{
background-color:#0fC;
color:#FF0;
}
#yacilirmenu li:hover ul {display:block;}/*liste elemanı üzerine gelindiğinde alt listeleri göster*/

/* IE. gizle \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* IE den gizleme sonu */

not:Tüm css dosyaları en az sayıda parametre kullanılarak hazırlanmış menü örnekleridir. Tasarımlara göre değişik eklentilerle çok daha görsel menüler oluşturulabilir.

En Basit Haliyle Katmanlar (div) ve CSS ile Web Sayfası Şablonu Oluşturma

5 Yorum


Html dilinde katmanlar ile bir web şablonu oluşturmak için  CSS kullanmak gerekir. Bunun için bir adet html dosyası ve bir adette  css dosyası oluşturalım. Bu dosyaları herhangi bir metin editörü (notepad.exe) veya Dreamweaver Programı ile oluşturabilirsiniz.

  • Şu şekilde en basit tasarımlardan birini yapalım;

csswebsablon2

  • indexsablon.html sayfasının içeriği;

<html>
<head>
<title>arama sayfamıza hoşgeldiniz</title>
<link href=”stil.css” rel=”stylesheet” type=”text/css” /> <!–Css dosyasını sayfaya ekleme–>
</head>
<body>
<div id=”container”><!–tüm şablona ana sağlayıcı içinde hazırlanıyor.–>

<div id=”banner”>Banner olacak</div>
<div id=”header”>ustmenü </div>
<div id=”left”>sol bölum </div>
<div id=”content”>içerik</div>
<div id=”right”>sağ</div>
<div id=”footer”>alt</div>

</div>

</body>
</html>

  • stil.css dosyasının içeriği;

body /*Sayfa genel ayarları*/
{
margin: 0px;
font-family: verdana;
font-size: 12px;
}

#container /*web şablonu ana sğlayıcı */
{
width:980px;
height:700px;
margin:0px;
padding:0px;
}
#banner
{
padding: 0px;
margin: 0px;
width: 980px;
height: 100px;
background-color: #99FFCC;
}

#header
{
padding: 0px;
margin: 0px;
width: 980px;
height: 30px;
background-color: #66FF66;
text-align: center;
vertical-align: middle;
}

#left
{
margin: 0px;
padding: 0px;
float: left;/*katman yerleşimini soldan doğru yapmaya başlıyor*/
height: 500px;
width: 200px;
background-color: #FC9;
}
#content{
margin: 0px;
padding: 0px;
float: left;/*bir önceki katmanın sol yanında yer varsa yeni katman onun yanına yerleşir.*/
height: 500px;
width: 580px;
background-color: #aCf;
}
#right{
margin: 0px;
padding: 0px;
float: left; /*bir önceki katmanın sol yanında yer varsa yeni katman onun yanına yerleşir.*/
height: 500px;
width: 200px;
background-color: #0C9;
}
#footer{
margin: 0px;
padding: 0px;
clear: both; /*soldan doğru yerleşim  iptal edilir*/
height: 70px;
width: 980px;
background-color:#996;
}

CSS ve Liste etiketleri ile En Basit Yatay Menü Yapımı

Yorum bırakın


En basit haliyle css ve html ile Yatay menü yapmak için bir adet html dosyası ve bir adette  css dosyası oluşturalım. Bu dosyaları herhangi bir metin editörü (notepad.exe) veya Dreamweaver Programı ile oluşturabilirsiniz.

  • yataymenuolustur.html dosyasının içeriği;

<html>
<head>
<title>Yatay Menü Oluşturma</title>
<link rel=”stylesheet” type=”text/css” href=”yataymenustilleri.css”/>
<!–css dosyasının eklenmesi–>
</head>
<body>
<ul class=”yataymenu”> <!–dosyadaki sınıfın etikete uygulanması–>
<li><a href=”#” target=”_self”>ANASAYFA</a></li>
<li><a href=”#” target=”_self”>RESİMLER</a></li>
<li><a href=”#” target=”_self”>İLETİŞİM</a></li>
</ul></body></html>

  • yataymenustilleri.css dosyasının içeriği;

.yataymenu{ /*yataymenu sınıfı css ayarları*/
list-style-type:none; /*listedeki madde işaretlerini kaldır */
margin:0;
padding:0;
}
.yataymenu a{ /*yataymenu sınıfına link verildiğinde css ayarları*/
text-decoration:none;/*altı çizili özelliğini kaldır*/
background-color:#336;
color:#CF0;
width:100px;
}
.yataymenu a:hover{/*yataymenu sınıfına link üzerine gelindiğinde css ayarları*/
background-color:#C30;
color:#00F;
}
.yataymenu li{
display:inline;/*liste elemanlarını yanyana yerleştirir.*/
}

CSS ve Liste etiketleri ile En Basit Dikey Menü Yapımı

Yorum bırakın


En basit haliyle css ve html ile Dikey menü yapmak için bir adet html dosyası ve bir adette  css dosyası oluşturalım. Bu dosyaları herhangi bir metin editörü (notepad.exe) veya Dreamweaver Programı ile oluşturabilirsiniz.

  • dikeymenuolustur.html dosyasının içeriği;

<html>
<head>
<title>Dikey Menü Oluşturma</title>
<link rel=”stylesheet” type=”text/css” href=”dikeymenustilleri.css”/>
<!–css dosyasının eklenmesi–>
</head>
<body>
<ul class=”dikeymenu”> <!–dosyadaki sınıfın etikete uygulanması–>
<li><a href=”#” target=”_self”>ANASAYFA</a></li>
<li><a href=”#” target=”_self”>RESİMLER</a></li>
<li><a href=”#” target=”_self”>İLETİŞİM</a></li>
</ul></body></html>

  • dikeymenustilleri.css dosyasının içeriği;

@charset “iso-8859-9”;
/* CSS Document */
body{ /*body etiketi css ayarları*/
margin:0;
padding:0;
background-color:#9C9;
}
.dikeymenu{ /*dikeymenu sınıfı css ayarları*/
list-style-type:none; /*listedeki madde işaretlerini kaldır */
margin:0;
padding:0;
}
.dikeymenu a{ /*dikeymenu sınıfına link verildiğinde css ayarları*/
text-decoration:none;/*altı çizili özelliğini kaldır*/
background-color:#336;
color:#CF0;
width:100px;
display:block; /* listedeki tüm liste elemanlarının genişliği*/
}
.dikeymenu a:hover{/*dikeymenu sınıfına link üzerine gelindiğinde css ayarları*/
background-color:#C30;
color:#00F;
}

Bana Silverlight Anlat

meslek lisesi ders notları

Eren ÇOLAK

Yazılım Mühendisi Olmak Yolunda İlerliyor...