Home JQuery Jquery Navigasyon Portfolyo Sitesi
Jquery Navigasyon Portfolyo Sitesi

Jquery Navigasyon Portfolyo Sitesi

513
20

Merhaba Arkadaşlar,

Yoğun çalışmalarımdan sonra artık siteyle daha fazla ilgilenebileceğim. Gerçi tüm arkadaşlarımızın sorduğu sorulara cevap vermeye çalıştım . Eğer vermiyorsam da söyleyin 🙂 Gerekeni yaparız….:)  Sizlere bu sefer ile yapılmış çok güzel bir web sitesi örneği vereceğim. Bu çalışmayı istediğiniz şekilde kullanabilecek ve kendinize göre değiştirebileceksiniz.

Makalenin en altında bulunan İNDİR linkine tıkladığınızda bilgisayarınıza indireceğiniz dosyanın içinde 2 klasör ve 2 adet dosya göreceksiniz. Dosyalardan bir tanesi index.html diğeri ise site içeriğinde kullandığımız jquery dosyasıdır ki, o dosyayla işimiz olmayacak. Genelde index.html ve images klasörünü kullanacağız. Siteyi çalıştırdığınızda images klasörünün içindeki resimlerin ne işe yardığını göreceksiniz. Resimleri değiştirmek için kendi kullanacağınız resmi, klasör içinde bulunan resimle aynı isim olmak şartıyla değiştirebilirsiniz.

Gelelim index.html dosyasının içine … index.html dosyası fazla karışık  bir yapıya sahip değil o yüzden işinizi çok kısa şekilde halledeceğinizi sanıyorum. Aşağıdaki kodlara dikkat edelim o zaman 🙂

<li class="bg1" style="background-position:0 0;">
<a id="bg1" href="#">Portfolyo</a>
<ul class="sub1" style="background-position:0 0;">
<li><a href="http://www.omerbozalan.com">Omer bozalan</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
</ul>
</li>

” li class ” etikeyle başlayan kısım size verdiğim index.html dosyasının yanında bulunan jquery dosyası kontrolünde olan bölümdür. Bu kısım jquerynin sayfadaki kullanım pozisyonuyla ilgilidir.  Bizi ilgilendiren kısım ise portfolyo yazılarının ve submenü 1… gibi giden yazılardır. Bu yazıları değiştirip linklerinizi verdiğinizde herşey bitecektir.  Linkleri artırmak istiyorsanız <li> etiketini çoğaltıyorsunuz azaltmak istediğinizde ise silmeniz yeterli olacaktır. Şimdilik bu kadar.

Yapamadığınız herhangi bir şey olursa yorum kısmında bana ulaşın. Yorumlarınızıda eksik etmeyin lütfen 🙂

DemoButton

hemen-indir-butonu

(513)

omerbozalan 1981 doğumluyum. Üniversite eğitimimi, Sakarya Ünv. Elektronik ve Bilgisayar Öğretmeni bitirerek tamamladım. Ayrıca C Sınıfı İş Sağlığı ve Güvenliği Uzmanıyım. 2014 Nisan ayında Adobe Dreamweaver CS6 Kitabımı yayınlarak tüm bildiklerimi sizlerle paylaşmak istedim. Kendimi Web Tasarım, Grafik Tasarım, Donanım konusunda hâlâ geliştirmekteyim.

Yorum(20)

  1. genel olarak ortada küçük duruyor. full ekran nasıl yaparım? ayrıca sana zahmet index.html ye girip nasıl değişeceğiz? resimli olarak yaparsan çoook makbule geçer…allah razı olsun ömer ağabey.

    1. ugur arkadaşım full ekran yapabilmen için baya uğraşman lazım baştan ayağa değiştirmen lazım. Lakin uğraşsan bile full ekran diye bişey olmaz:) nedenide gelince senin bilgisayarının çözünürlüğü yüksek olabilir ama diğer bilgisayarların çözünürlüğü düşük olabilir. yani şunu demek istiyorum diğer senin bilgisayarda tüm ekranda site görünebilir ama diğer kullanıcıların bilgisayarında küçük veya büyük görünebilir. Bu sitenin yapısıylada alakalı.Bence bu site bu şekilde güzel. Birde kendini geliştirmek için css ve html’i iyi öğren.
      Kolay gelsin.

  2. indir butonuna basınca hiç bir şey gelmiyor, bana da ödev için lazım 20 tane jquery uygulaması olması gerek ama kendim beceremedim bunda kaç jquery uygulaması var?İndiremedim bir de.Onları bi söyleyebilirsen abi çok makbule geçicek .

    1. indirdim sonunda tşkler, sadece sorum şu burada kaç jquery uygulaması var ve bu site ortalılarda çok mu ben hocaya vericem benim yapmadığımı anlama ihtimali var mı? tşkler.

    2. indirdim sonunda tşkler, sadece sorum şu burada kaç jquery uygulaması var ve bu site ortalıklarda çok mu ben hocaya vericem benim yapmadığımı anlama ihtimali var mı? tşkler.

  3. Öncelikle emeğine teşekkürler.
    çalışmayı amatör bir şekilde sitemde kullanmak istiyorum ancak;
    1: Resimleri bölen iki çizgi benim kullandığım zemin üzerinde çok kötü görünüyor. Onları kaldırıp resmin bütün görülmesini sağlamak mümkün mü?
    2: “slide” için gri fon üzerine gelmek gerekiyor. Benim niyetim fonu ve yazıları kaldırmak ve resimlerin üzerine gelince “slide” yapmak. Ama beceremedim:) Bu mümkün mü? (Aynı şekilde yatay çizgi de kalmaması gerekiyor.)
    Şimdiden teşekkür ederim.

    1. Ufuk arkadaşım
      1.sorunun cevabı: çizgiler için aşağıdaki kodu bulup border-right: 1 solid #777777; olan yerdeki 1′i silip 0 yaparak düzenleyebilirsin. yani aşağıdaki gibi olmalı.
      ul.menu > li {
      background-color: transparent;
      background-repeat: no-repeat;
      border-right: 0 solid #777777;
      float: left;
      height: 542px;
      width: 265px;

      gri fonu kaldırarak yani opacity:0.1; css kodu koyarak grip fonun şeffaflaşmasını sağlayabilirsin.

      1. Faydalı ve acil cevabın için çok teşekkür ederim.
        Ancak sorumda kendimi ifade edemedim.
        Niyetim şöyle bir şey yapmak; Menü ve gri bandı kaldırıp SADECE resimlerin kalmasını ve mouse resmin üzerine geldiğinde “slide” yapmasını istiyorum. Resme tıklayınca da ilgili linke gidecek. Böyle bir şey yapmak mümkün mü?
        İlgin ve bilgin için teşekkür ederim.

        1. Ufuk arkadaşım her şeyi yapmak mümkün tabiki de ama yapman gereken yazıların yerine resim tanımlamak olacaktır. yani < img src="resimadı.uzantısı" > ‘nı yazının yerine yerleştirmen lazım. Ama şöyle bişey var. açılır Menüyü iptal mi edeceksin? yani tam olarak anlatım lazım. yoksa böyle uzaktan biraz zor oluyor.

  4. Paylaşım için çok teşekkürler ben host’a siteyi ekliyorum fakat js çalışmıyor arka plan da resimler de gözükmüyor donmuş bir halde duruyor ama bilgisayarımda internete yüklemeden çalışıyor neden olabilir acaba?

    1. Rst Arkadaşım yukarıdaki makalenin sonundaki önizlemeye baktığında çalıştığını görüyorsun değil mi? Yani ben host a attım çalıştı. Büyük bir ihtimalle dosyalarını tam olarak göndermedin ondan kaynaklanıyor olabilir.

    1. Sercan Bey, Linklerin sayfaları da size kalmış 🙂 artık.
      html hiç bilmiyorsanız. Şimdiden öğrenmeye bakın. Sitemizde Dreamweaver dersleri bulunmakta. İzlemeye hemen başlayın

  5. çok güzel bi çalışma elinize sağlık hocam.
    acaba bu çalışmayı 4 de nasıl bölebiliriz yazılımların üzerinden oynadım ama başaramadım yardımcı olursanız sevinirim

  6. En arkaya bir rengi nasıl ekliyeceğiz acaba? Ve Ellerinize sağlık çok güzel olmuş. En yakın zamanda jquery’ide öğreneceğim inşallah.

    1. Yusuf index.html içerisinde bulunan aşağıdaki satırı düzenliyorsun işte.

      background:#FFF9DF url(title.png) no-repeat top center;

      bu kadar basit.

  7. sayın hocam bu paylaşımınızı jquery i bir türlü mantık olarak kavrayamama problemimden dolayı öğrenemediğim için 🙂 mobil e uyumlu hala getiremiyorum :/ çok bedbahtım

    1. Meral hanım Mobil uyumlu yapmanız için jqueryi tam olarak bilmenize gerek yok. Boostrap bilmeniz yeterlidir. Bence buna yoğunlaşın. Böylelikle hazır kodları oradan çekeceksiniz. :)kolay gelsin.

Senin Yorumların

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Sonucu Giriniz * Time limit is exhausted. Please reload CAPTCHA.