Design vertical menu with CSS

Поділитися
Вставка
  • Опубліковано 18 лис 2024

КОМЕНТАРІ • 160

  • @yaretziherbert292
    @yaretziherbert292 7 років тому

    Language does not matter in this video. The video is very clear, well-explained, nothing to complaint. Thank you so much, Brother!

  • @Amberjannat
    @Amberjannat 3 роки тому

    Super. Mind blowing

  • @maraikayer
    @maraikayer 5 років тому +1

    Awesome brother. Thanks from USA

  • @prernatopno6927
    @prernatopno6927 6 років тому

    It's alright if you can't understand ehat he's trying to say. The code is definitely understandable and really good. Nice job.

  • @vardansharma8749
    @vardansharma8749 3 роки тому

    very nice nd thankyou

  • @全景足跡
    @全景足跡 7 років тому +4

    I really don't know what he talking about,but I know the videos what he doing. and thank you for your videos.

    • @phannait
      @phannait  7 років тому +1

      Hmm, sorry that the old videos. I don't have any videos update now. If have I will try to speak in English.

  • @wolfis4146
    @wolfis4146 2 роки тому

    Great! Have only one problem to see this signs

  • @teamopenmid
    @teamopenmid 7 років тому

    I understand khmer but I'm american. I like your design.

    • @phannait
      @phannait  6 років тому

      Wow, sound great!

  • @chhiethearith9525
    @chhiethearith9525 5 років тому

    good videos for khmer. i like video of you

  • @nairgh
    @nairgh 4 роки тому

    Nice Work. Thank you.

  • @RameshKumar-uz5hj
    @RameshKumar-uz5hj 7 років тому +5

    Thats good work. No Matter What you speak.. Each country have own language and should be.. You did good work, its a nice videos.

  • @inmkngyou3979
    @inmkngyou3979 5 років тому

    This helps a lot in my homework. Thxxx

  • @GlobaliwebSolution
    @GlobaliwebSolution 5 років тому

    Nice design, i like the UI

  • @Melo5154
    @Melo5154 7 років тому

    Very good. Excellent.

  • @Moss_Official
    @Moss_Official 7 років тому +6

    do you still have the full code for this? if so could you send a link?

  • @kaayalnanban9219
    @kaayalnanban9219 3 роки тому

    Thank you man.. Awesome.

  • @al_peterson
    @al_peterson 4 роки тому

    thank you for your tutorial. it works well

  • @bhagawanshirsath1104
    @bhagawanshirsath1104 5 років тому +4

    your struggle is valueable.
    Please leave the code also.

  • @arkanglegeibriel
    @arkanglegeibriel 7 років тому +33

    low volume, listed as English with an English description, but frankly I can't tell what language is even being used!

    • @phannait
      @phannait  5 років тому +2

      It's Khmer language, sorry guy it's just my old video since I was junior.

  • @summerrichards9648
    @summerrichards9648 5 років тому +1

    great video and it helped me alot, honestly who cares if you couldn't understand what he was saying. Following along got the job done for me. Awesome Video!!!!

  • @erk4sh8
    @erk4sh8 5 років тому +1

    all the code
    Vertical menu


    body{
    padding: 0;
    margin: 0;
    }
    .menu ul{
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .menu ul li{
    padding: 15px;
    position: relative;
    width: 150px;
    vertical-align: middle;
    background-color: #34495e;
    cursor: pointer;
    border-top: 1px solid #bdc3c7
    -webkit-transition: all 0.3s;
    -0-transition; all 0.3s;
    transition: all 0.3s;
    }
    .menu ul li:hover{
    background-color: #2ecc71;
    }
    .menu > ul > li{
    border-right: 5px solid #f1c40f;
    }
    .menu ul ul{
    transition: all 0.3s;
    opacity: 0;
    position: absolute;
    border-left: 6px solid #f1c40f;
    visibility: hidden;
    left: 100%;
    top: -2%;
    }
    .menu ul li:hover > ul {
    opacity: 1;
    visibility: visible;
    }
    .menu ul li a{
    color: #fff;
    text-decoration: none;
    }
    span{
    margin-right: 15px;
    }
    .menu > ul > li::after{
    content: "+";
    position: absolute;
    margin-left: 10%;
    float: right;
    color: #fff;
    font-size: 20px;
    }





    Home
    Users

    add
    edit
    delete


    Web Design
    Database
    Contact us

  • @elchochaso
    @elchochaso 3 роки тому

    pregunta como accedo al contenido de los item de ese menu

  • @anandbisht5138
    @anandbisht5138 8 років тому

    for you to add the plus + sign your css position is absolute which is not working for me but for me its not working fot me its relative .i need to know why its so ..your answer will be helpful. and 1 more thing the remove icon is not displaying for me can u tell the resion

  • @illuminasyon2464
    @illuminasyon2464 6 років тому

    Although your speaking is terrible, you did a good work.

  • @anandbisht5138
    @anandbisht5138 8 років тому

    in mine bullets are comming at the left side of item list how to remove them and plz tell me what you use for coding means other than notepad++.

  • @mithileshyadav3276
    @mithileshyadav3276 6 років тому +1

    i have written the same code but 2nd< ul> is not working its not popping out
    ..plz help

    • @akhilvijay8670
      @akhilvijay8670 4 роки тому

      simple mistake happened to me resulting the same mistake. Don't forget to write the 2nd (Sub menu) inside the tag.

  • @srinualla6497
    @srinualla6497 5 років тому

    what is the text editor are using

  • @abdullatifal-rubaie4386
    @abdullatifal-rubaie4386 4 роки тому

    شكرا لك يا غالي ... الله يحفظك

  • @antrinh8474
    @antrinh8474 8 років тому +1

    can u put your .html and .css public?

  • @simonabotanicalhome
    @simonabotanicalhome 5 років тому +1

    Thanks, very useful!

  • @rishikabhanushali5174
    @rishikabhanushali5174 6 років тому

    This was really helpful. Thanks!

  • @positiveminds3247
    @positiveminds3247 5 років тому +2

    I think the English version of this video will be better for a better understanding ........
    Please work on this!!!!

  • @kimmakimma2602
    @kimmakimma2602 8 років тому

    well done

  • @marcingolec6618
    @marcingolec6618 8 років тому +3

    can you sent me the code for this tutorial ?

  • @beatricebottini4969
    @beatricebottini4969 5 років тому

    Well done!!!

  • @programmingtacticalcode7968
    @programmingtacticalcode7968 5 років тому

    pls answer what means this sign > ?

  • @anandbisht5138
    @anandbisht5138 8 років тому

    i have written this code but its showing the add menu far away i.e at the corner of the moniter and its not comming from 2nd row its comming on 1st row even help plz- moz-transition : all 0.3s;
    opacity : 0;
    position: absolute;
    visibility: hidden;
    left: 80%;
    top: -2;

  • @0v1al14
    @0v1al14 8 років тому

    when you type 'ul>(li>a)*5' what you press to make the list?

  • @lolaayala9654
    @lolaayala9654 8 років тому +5

    when i write ".menu ul li:hover >ul { " hover doesnt seem to work, why?
    I know is a dumb question, but is it a pluggin or something? :c

    • @yuvakishore548
      @yuvakishore548 6 років тому +1

      Same problem

    • @xerri99
      @xerri99 5 років тому

      It's a Brackets (IDE) plugin called Emmet

    • @sabafatima813
      @sabafatima813 5 років тому

      @@yuvakishore548 did u find the solution ?

    • @ghurburrunnilesh3050
      @ghurburrunnilesh3050 5 років тому

      any solution found?

    • @summerrichards9648
      @summerrichards9648 5 років тому +2

      @@ghurburrunnilesh3050 make sure your tag it not after Users but after the first closing tag right under delete. Scroll to 1:54 and study the code very carefully line by line and that should help. I ran into the same problem. God Bless

  • @georgedavid7877
    @georgedavid7877 8 років тому

    is there any English languages videos around for making drop down menus?

  • @satyanaryanareddy9154
    @satyanaryanareddy9154 7 років тому

    what is the software u used & how to get all the font list u had

    • @phannait
      @phannait  7 років тому +1

      In this video, I used Atom editor.
      Here the link:
      atom.io/
      And sorry for font, it's too long for me. I almost forget but I will try to find it for you. Thanks you!

  • @DieLasergurke
    @DieLasergurke 8 років тому

    If i add , for example by database or web design some attributes like edit or delete , i cant reach them anymore or better only the first one ( here only add ). So if i would like to reach the next one it jumps to the next here webdesign . ??
    it works , but only for one item with a sub menu , but do you have an idea , whats going on by more than 1 menu with submenu ??
    hope you will answer soon !
    greetings paul

  • @anushamallem8216
    @anushamallem8216 6 років тому +1

    can u send please full code

  • @stupidtaimur
    @stupidtaimur 5 років тому

    a very helpful

  • @weissestangel4172
    @weissestangel4172 7 років тому

    how did you make the shortcut for div and ul

    • @phannait
      @phannait  7 років тому

      That's emmet plugin.

  • @paullabrador77
    @paullabrador77 8 років тому +2

    the hover code is not working in my front page 2003 what should i do ??? please i really need your help

  • @eduardgeschaftlich4730
    @eduardgeschaftlich4730 5 років тому

    thx a lot! great style!

  • @abdallahsoulaimana2705
    @abdallahsoulaimana2705 5 років тому

    Hello brother,
    I need to know how to download the Font awesome library?
    or can you give me directly the link to download?

  • @phearon6329
    @phearon6329 7 років тому

    សួរស្តីបងប្រុស
    ការបង្ហាញរបស់ពិតជាល្អមែនទែនសម្រាប់ខ្ញុំ ដែលទើបចាប់ផ្តើម HTML និង CSS
    ខ្ញុំមានចំង្ងល់បន្ថែមពីរបៀប add list to gallery.
    ឧទាហរណ៍៖ ខ្ញុំចង់ដាក់ Add, Edit and Delete ជាប្រភេទ gallery វិញ ។ តើគួរត្រូវធ្វើយ៉ាងដូចម្តេច?

    • @phannait
      @phannait  7 років тому

      អាចរកវិដេអូដែលទាក់ទងទៅនឹង CRUD(Create, Read, Update,Delete) មើលទៅ

  • @linaayu5057
    @linaayu5057 7 років тому

    awesome

  • @akaryn7847
    @akaryn7847 6 років тому

    can i have the color palette?

  • @nholmes86
    @nholmes86 6 років тому

    it works perfectly TESTED

  • @rennysalainti6754
    @rennysalainti6754 6 років тому

    what text editing app you are using?

  • @racontemoi4682
    @racontemoi4682 6 років тому

    Hello! Please can you help me do the vertical menu with dropdown ages like on fnac.com ?

  • @9701504046
    @9701504046 8 років тому

    hellow brother Please suggest a good screen capture software.

    • @phannait
      @phannait  8 років тому +1

      In this video, I use FastStone Screen Capture.

  • @pkarthick99
    @pkarthick99 7 років тому

    tq for your help...

  • @omeganeura7814
    @omeganeura7814 7 років тому

    i need so much your "fontawesome", can you tell me where you founded?

  • @venkateshk2005
    @venkateshk2005 3 роки тому

    Nice Phanna. Can you share code ?

  • @saruulmunkhbat2506
    @saruulmunkhbat2506 7 років тому

    Thank you very much

  • @kerimtim
    @kerimtim 8 років тому +1

    Could you share the code?

  • @nseguemoseramariarosa8357
    @nseguemoseramariarosa8357 4 роки тому

    Span tag is not working for me hel please 🙏🙏🙏🙏

  • @charlottemilk884
    @charlottemilk884 7 років тому

    whats your syntax theme? pls

  • @sagarkhatri2848
    @sagarkhatri2848 8 років тому

    Which editor you are using please provide me the download link.

    • @phannait
      @phannait  7 років тому

      In this video, I used Atom editor.
      Here the link:
      atom.io

  • @123istMr
    @123istMr 7 років тому +1

    for the its doesn't work
    can you explain why ?

    • @mohamedelhlwany2115
      @mohamedelhlwany2115 7 років тому

      maybe the file doesn't excisist

    • @PegassiInfernus
      @PegassiInfernus 6 років тому

      Already downloaded Font Awesome, but in Chrome They show up as rectangles, and in Edge They're invisible.

  • @juhandvan
    @juhandvan 8 років тому

    thank you very much ...

  • @flashmetalmodels1899
    @flashmetalmodels1899 8 років тому

    Thanks a lot.

  • @doktorrollo-koster4276
    @doktorrollo-koster4276 7 років тому +1

    wow, perfect

  • @programmingtacticalcode7968
    @programmingtacticalcode7968 5 років тому

    what means sign > in css someone explain pls?

    • @akhilvijay8670
      @akhilvijay8670 4 роки тому

      Called a child combinators. Google it and you could find details with number of examples

  • @vishalsehgal2374
    @vishalsehgal2374 7 років тому

    .menu ul li:hover >ul is not working pls guide it's urgent.

    • @phannait
      @phannait  7 років тому

      Can you share your code, please??

    • @vishalsehgal2374
      @vishalsehgal2374 7 років тому

      Phanna ly OK sir wait I will share a link here to the GitHub OK ?

    • @phannait
      @phannait  7 років тому

      That's okay.

  • @danmanh4280
    @danmanh4280 6 років тому

    Nice b excuse me b can you show me about data that store in menu . For example home: when we click it output Data. Ok thanks

  • @anandbisht5138
    @anandbisht5138 8 років тому

    transition is not working for me notepad ++

  • @therealindian109
    @therealindian109 8 років тому

    Ur Great thanks

  • @petavenkat3478
    @petavenkat3478 4 роки тому

    sir it very good for me.
    But please give media to this

  • @nasajpg
    @nasajpg 5 років тому

    Code ???

  • @middleclassdevi579
    @middleclassdevi579 7 років тому

    why ur all video volume low, whereas other video it sounds good. plz sir, look after it

  • @mainak7146
    @mainak7146 6 років тому

    .sidebar ul li:hover > ul{
    this code is not working for me can I get help please.

    • @robertbhandari7829
      @robertbhandari7829 6 років тому

      give both ul a class name and next ul then try .sidebar .sub1 li:hover>.sub2{}

  • @radja.lingga
    @radja.lingga 7 років тому

    What app editor that is?

  • @viraktav9247
    @viraktav9247 8 років тому

    សួស្ដី!
    ហេតុអ្វីបានជាខ្ញុំដាក់ fontawesome អត់ចេញរូប Icon បែជាចេញរូប បួនជ្រុងទៅវិញ

  • @HoeungLot
    @HoeungLot 7 років тому

    thank brother

  • @nmagarjhp
    @nmagarjhp 8 років тому

    why this design cannot support when try it.....plz reply my message...plz.
    virtical menu

    body{
    padding: 0;
    margin: 0;
    }
    .menu ul{
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .menu ul li{
    padding: 15px;
    position: relative;
    width: 150px;
    vertical-align: middle;
    background-color: #34495E;
    border-right: 5px solid #F1C40F;
    cursor: pointer;
    border-top: 1px solid #BDC3C7;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    }
    .menu ul li:hover{
    background-color: #2ECC71;
    }
    .menu > ul > li {
    border-right: 5px solid #F1C40F;
    }
    .menu ul ul{
    transition: all 0.3s;
    opacity: 0;
    position: absolute;
    border-left: 5px solid #F1C40F
    visibility: hidden;
    left: 104%;
    top: -2%;
    }
    .menu ul li:hover > ul{
    opacity: 1;
    visibility: visible;
    }
    .menu ul li a{
    color: #fff;
    text-decoration: none;
    }
    span{
    margin: 15px;
    }
    .menu > ul > li:nth-of-type(2)::after{
    content: "+";
    position: absolute;
    margin-left: 30%;
    color: #fff;
    font-size: 20px;
    }
    How to Check Your Website with Multiple Browsers on a Single Machine (Cross-Browser Compatibility Checking)

    Home
    User
    Add
    Edit
    Delete

    Web Design
    Database
    Contact

    • @phannait
      @phannait  8 років тому

      +nirmal magar I just test it and work. The problem maybe I use CSS3 with new syntax. One more thing transition you need to use prefix.

    • @nmagarjhp
      @nmagarjhp 8 років тому

      +Phanna ly thanks for good suggestion to you......

  • @itmoindrive
    @itmoindrive 7 років тому

    Code source file not included here.

  • @sonuyadav-kp2lt
    @sonuyadav-kp2lt 7 років тому

    i want source code

  • @therealindian109
    @therealindian109 8 років тому

    plese send a tutorial "how to add data in database and retrive it to another page pleseeeeeeeeeeeee it is so important for me....

  • @VoeurnRavy-kh
    @VoeurnRavy-kh 5 років тому

    សួស្ដី បង

  • @finecatererseventorganiser9639
    @finecatererseventorganiser9639 7 років тому

    hover effect wont work for me!

    • @markvilrensonballester6949
      @markvilrensonballester6949 7 років тому

      you need to declare to html5 first before you can use other effects

    • @RameshKumar-uz5hj
      @RameshKumar-uz5hj 7 років тому

      I also face the issue.. do like this --1> Set the" Id" of fist "ul" -- 2> #vMenu li:hover > ul{ -----} . It will definitely work...

  • @temirbekerkinbekov34
    @temirbekerkinbekov34 7 років тому

    span is not work for me

    • @phannait
      @phannait  7 років тому

      I don't know your code. You should show it here and I will have a quick look.

  • @benjaminbar4584
    @benjaminbar4584 8 років тому

    it doesnt work on notepad

    • @phannait
      @phannait  7 років тому

      You should try to use any modern text editor. I will help you more.
      Please try this atom.io

  • @pviila165
    @pviila165 8 років тому +1

    why not grab me the icons ?
    Restaurante: Mi ranchito


    body{
    padding:0;
    margin:0;
    }
    .menu ul{
    list-style:none;
    margin:0;
    }
    .menu ul li{
    padding:15px;
    position:relative;
    width:150px;
    background-color:#34495E;
    border-top: 1px solid #BDC3C7;
    }
    .menu ul ul{
    transition: all 0.3s;
    opacity:0;
    position:absolute;
    visibility:hidden;
    left:80%;
    top:-2%;
    }
    .menu ul li:hover > ul{
    opacity:1;
    visibility:visible;
    }
    .menu ul li a{
    color:#fff;
    text-decoration:none;
    }
    span{
    margin-right:15px;
    }

    Inicio
    Menu
    Desayunos
    Tacos de guisado
    Antojitos mexicanos
    Comida del día
    Entremés
    Carnes
    Ensaladas
    Postres
    Bebidas

    Contactanos
    Nosotros

  • @cecilvamzjedeti2348
    @cecilvamzjedeti2348 5 років тому +1

    guys please write it

  • @bytler4518
    @bytler4518 7 років тому +4

    Did not understand a single word LOL.

  • @taanipusaiyan6380
    @taanipusaiyan6380 5 років тому

    Why making ppl loosing so much time typing letter by letter everything instead of giving the full code already done and explaining only where to change colors and sizes?

  • @HimanshuNishadProduction
    @HimanshuNishadProduction 7 років тому

    Good Job God Bless :)

  • @SerralheriaDicas
    @SerralheriaDicas 7 років тому

    Friend I do not hear what you're saying, please I'm almost deaf.

  • @sigmasystems2755
    @sigmasystems2755 6 років тому +1

    Great tutorial man, but without english or source code then its helpless to the rest of the world. Put the source code man. I come from Zimbabwe and I cant be giving tutorials in Ndebele man . Its total bullshit

  • @ThanhHa-fi6ce
    @ThanhHa-fi6ce 7 років тому

    canhophuan.net/
    cho e hỏi tên của kiểu menu này dc không ạ
    cám ơn ad nhiều

  • @adrianopereira6534
    @adrianopereira6534 8 років тому +1

    good video, but not work for me!

  • @oakbank1953
    @oakbank1953 6 років тому

    This looks to be a good video, but I can't hear a thing. Can you re-do it with better sound...? English?

  • @MSKWebServices
    @MSKWebServices 7 років тому

    Hey help needed

  • @hshna7659
    @hshna7659 5 років тому

    Chẳng cần cao sang

  • @ivofrancisco357
    @ivofrancisco357 4 роки тому

    This should be tagged as non English.