Asp.net 4 horizontal menü yapımı

Asp.Net 4 de yatay açılan horizontal dropdrown olarak menü yapımı yada asp.net 4 hazır olarak gelen navigation menüyü özelliştirmeye çalışacağımız bu yazıyı asp.net e yeni başlayanlara faydalı olması dileğiyle başlıyoruz.

Şimdi yeni bir proje oluşturuyoruz.ASP.NET Web Application u seçtiğimiz zaman şu şekilde bir hazır menü karşımıza çıkıyor.

<asp:menu cssclass="menu" enableviewstate="false" id="NavigationMenu" includestyleblock="false" orientation="Horizontal" runat="server">
                    <items>
                        <asp:menuitem navigateurl="~/Default.aspx" text="Home">
                        <asp:menuitem navigateurl="~/About.aspx" text="About">
                    </asp:menuitem></asp:menuitem></items>
                </asp:menu>

Görüldüğü üzere hazır olarak gelen menüde Home ve About adında 2 tane menü sayfası tanımlanmış ayarları yapacağımız css nin adı "menu"
Şimdi menümüzü kendimize göre tasarlayalım.Sayfamızı Kodlama şeklini Design olarak seçtikten menümüze tıkladıktan sonra Edit Menü Items diyoruz yada sağ taraftaki properties den Items i açıyoruz ve eklemelerimizi yapabiliriz.NavigateUrl olarak sayfa adresimizi yazıyoruz.Ben örnek olarak 2 tane alt menüsü olan sayafa ekledim.

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
                        
                        <asp:MenuItem Text="Resimler" Value="Resimler">
                            <asp:MenuItem Text="İlginç Resimler" Value="İlginç Resimler" 
                                NavigateUrl="~/ilginc_resimler.aspx"></asp:MenuItem>
                            <asp:MenuItem Text="Komik Resimler" Value="Komik Resimler" 
                                NavigateUrl="~/komik_resimler.aspx"></asp:MenuItem>
                        </asp:MenuItem>
                        <asp:MenuItem Text="Video" Value="Video">
                            <asp:MenuItem NavigateUrl="~/video_egitim.aspx" Text="Eğitim" Value="Eğitim">
                            </asp:MenuItem>
                            <asp:MenuItem NavigateUrl="~/video_belgesel.aspx" Text="Belgesel" 
                                Value="Belgesel"></asp:MenuItem>
                        </asp:MenuItem>
                        <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
                    </Items>
                </asp:Menu>

Buraya kadar menüye sayfa ve alt sayfaları eklemeyi gördüğümüze göre sıra geldi css deki ayarları değiştirmeye Site.css yi açalım ve ayarlardan div.menu yazısını bulalım div.menu ile başlayan tüm ayarların hepsi bizim menünün seçenekleridir.Değiştireceğimizi seçip build style diyoruz veya sağ tarafta style diyoruz ve karşımıza çıkan ekranda istediğiniz gibi renklerle veya genişliklerle oynayabilirsiniz.

div.menu
{
    width: 85%;
    text-align: center;
    color: #000000;
    padding-left: 15%;
    background-color: #00CCFF;
}
div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
    color: #66FFCC;
    background-color: #666699;
}
div.menu ul li a, div.menu ul li a:visited
{
    border: 1px #4e667d solid;
    color: #000000;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
    background-color: #00CCFF;
}
div.menu ul li a:hover
{
    color: #000000;
    text-decoration: none;
    background-color: #FF9900;
}
div.menu ul li a:active
{
    background-color: #FFFFCC;
    color: #000000;
    text-decoration: none;
} 

Menü son hali ise şöyle;

Örnekteki kodlarımız

div.menu ul li a:active = hangi menüyü seçersek onun aktif olduğunda
div.menu ul li a:hover = hangi menünün üzerine gelirsek
div.menu ul li a, div.menu ul li a:visited = sayfa ve alt sayfalar ilgili seçeneklerdir.